资源介绍
视频数量：22个
总时长：2小时22分
课程介绍：
从零搭建博客：Astro框架入门十日实战
你有没有过这样的想法——想搭一个属于自己的博客网站，但又觉得前端开发门槛太高？React、Vue、Next.js，光是选框架就让人头疼，更别提后面还有组件、路由、构建工具一堆新概念。如果这种顾虑一直在拦着你，那Astro可能是最适合你的入门选择。它默认不发送任何JavaScript到浏览器，生成的全是静态HTML，对新手极其友好。
这门课程把整个学习过程拆成了十天，每天聚焦一个核心主题，用"讲解加练习加点评"的方式带你从零搭建一个完整的博客站点。课程一共22个视频，总时长约两个半小时，节奏紧凑但不急促，特别适合想快速上手现代Web开发又不想被复杂概念吓退的人。
第一天是热身。你会启动第一个Astro项目，写出经典的Hello World页面。别小看这一步，里面涉及的frontmatter前置代码区、模板语法、变量嵌入，是后面所有内容的地基。课程会先讲原理，再给出动手练习，最后对照参考答案分析常见错误和进阶挑战。这种讲练结合的节奏贯穿了每一天，学完不是看完，是真的会写。
第二天正式进入组件的世界。你会搞清楚什么是组件，怎么通过Props把数据从父组件传给子组件。组件化是现代前端开发最核心的思想之一——把页面拆成可复用的小零件，让代码从一团乱麻变成整齐的积木。哪怕你之后去学React或Vue，这一天的内容也是直接打基础。
第三天讲布局组件和插槽（slot）机制。当网站有多个页面时，页眉、页脚这些公共部分总不能每个页面都复制粘贴一遍吧？布局组件就是来解决这个问题的。你只需要写一次公共结构，通过slot插槽把每个页面独有的内容嵌进去，套用到所有页面。后期想改导航，只改一个文件就全部生效，省心省力。
第四天是这门课的重头戏之一——动态路由。想象一下，你的博客有十篇文章，如果每篇都手动创建一个页面文件，维护起来简直是噩梦。学了[slug].astro和getStaticPaths之后，你只需要写一个模板文件，系统就能根据数据条目数量自动生成对应数量的文章页面。这一招在实际项目中极为常用，学完你会真切感受到框架带来的效率提升。
第五天开始给网站穿衣服。你会学习Astro独特的Scoped CSS样式隔离机制，搞清楚它和全局CSS以及CSS变量的搭配用法。Astro的样式默认只在当前组件生效，完全不用担心改一个按钮的样式会牵连到其他页面，这种"安全网"对新手来说特别贴心。
第六天开始写真正的博客内容。Astro原生支持用Markdown写文章，课程会教你如何把.md文件自动渲染成网页，以及怎么在Markdown的frontmatter里配置标题、发布日期、作者等元信息。对于习惯用Markdown记录内容的人来说，这一天会让你爱上Astro。
第七天深入模板语法的进阶用法。你会学到怎么用map循环遍历并渲染文章列表，怎么用条件判断根据数据显示不同内容，怎么用filter筛选出符合条件的文章。这些操作是处理动态数据的标配技能，掌握之后你的页面就不再是写死的静态内容，而是真正的数据驱动。
第八天处理数据管理。当文章数量增多、内容分散到各个组件里时，维护成本会急剧上升。课程教你把文章数据提取到独立的.js文件里，通过import和export在不同页面间共享。这是项目工程化的重要一步，也是从"能跑就行"到"易于维护"的分水岭。
第九天打磨细节。你会创建一个自定义的404错误页面，并用Astro.url实现导航链接的当前页高亮效果。这些看似不起眼的小细节，往往决定了一个网站看起来是业余的还是专业的。
第十天是综合实战演练。你要把前十天学到的所有技能串联起来，独立完成一个功能完整的博客站点——首页文章列表、详情页、404页面、响应式导航栏、精美的样式设计，全部由你自己动手。学完这一步，你就拥有了一个真正可以部署上线、拿得出手的个人作品。
那么这门课适合谁？如果你懂一点HTML和CSS基础，但还没接触过任何前端框架，想找一个低门槛的入口，那Astro加这门课几乎是最优路径。如果你已经会用React或Vue，也可以通过这门课了解Astro独特的设计哲学——它强调内容优先、默认零JavaScript、用更少的客户端代码换取更快的页面速度，这种思路在性能至上的今天非常值得借鉴。
学完整个课程，你会拥有一个自己的博客网站，更重要的是，你会建立起组件化思维、布局复用、动态路由、数据管理、样式隔离这些前端开发的核心能力。这些知识无论迁移到React、Vue还是Next.js都没有障碍，是你继续深入Web开发领域的扎实起点。