Astro 教程

产生背景

在 Astro 出现之前，前端构建站点主要有两条路。

• 要么用 jQuery 这类脚本直接操作 DOM，写起来繁琐、难以维护。
• 要么接入 React、Vue 等现代框架，但这类框架默认把整页做成「客户端渲染」，即便只是展示一篇静态文章，也要先把整套运行时 JS 下载、解析、执行，页面才显示得出来。

这对内容站是很大的浪费，读者打开一篇博客，最想要的是文字本身，而不是先等几百 KB 的 JS 跑起来，搜索引擎爬虫同样更喜欢直接能读到的 HTML。

2021 年，Fred Schott 等人（原 Snowpack 团队）发布了 Astro，核心主张是把「页面」和「交互」分开，默认交付静态 HTML，只在需要处按岛屿加载 JS。

Astro 是什么

Astro 是一个用于构建内容驱动型网站的现代 Web 框架，比如博客、文档站、营销官网、作品集等，它最大的特点是默认零 JavaScript。

所谓默认零 JavaScript，是指 Astro 在构建阶段就把页面渲染成纯 HTML，浏览器拿到的是已经画好的静态页面，不需要再下载一大堆 JS 才能显示内容，只有当某个组件确实需要交互时，你才显式地告诉 Astro「这部分要变成可交互的」。

发展历程

• 2021 年，Astro 首次发布，主打「默认零 JS」，提出岛屿架构（Islands Architecture）。
• 2022 年，Astro 1.0 正式发布，确立基于文件的路由与组件模型。
• 2022 年，Astro 2.0 引入内容集合（Content Collections），用类型安全的 schema 管理 Markdown 文章。
• 2023 年，Astro 3.0 带来视图过渡（View Transitions）和更快的构建；同年 Astro 4.0 推出开发者工具栏与国际化路由改进。
• 2024 年，Astro 5.0 重构内容层（Content Layer），内容集合改用 glob loader，并支持更大规模的内容与远程数据源。

如今 Astro 7 是官方主推的版本，本教程也基于 Astro 7 讲解。

核心特点

• 默认零 JavaScript，页面以静态 HTML 交付，加载快、对 SEO 友好。
• 岛屿架构，把交互组件像岛屿一样按需加载，没有交互的地方完全不发 JS。
• 组件无关，同一项目里可混用 Astro、React、Vue、Svelte 等框架的组件。
• 内容集合，用 schema 统一管理 Markdown，字段写错会在构建时报错。
• 内置优化，图片、样式、脚本由 Astro 自动处理与打包。

前置准备

• HTML 与 CSS（CSS 入门）
  • 常用标签、选择器、盒模型，Astro 模板本质就是 HTML，样式则常用 class 与 <style> 控制。
• JavaScript 基础（JavaScript 教程）
  • 变量、函数、数组、对象，这是编写 Astro 组件脚本的根基。
• ES6 语法（ES6 教程）
  • 箭头函数、模块化 、import/export，现代项目代码里大量使用。
• Node.js 与 npm（Node.js 教程、NPM 教程）
  • Astro Node.js 运行，至少会用 npm create astro 创建项目、npm run dev 启动开发服务器。
• TypeScript 基础（TypeScript 教程）
  • Astro 的配置文件、内容集合 schema、环境变量都基于 TS，了解类型、接口、类型标注才能看懂并修改这些配置。
• Vue 或其他组件框架基础（Vue3 教程）
  • Astro 自身语法不依赖框架，但组件、Props、插槽等概念与 Vue/React 相通，有框架经验更容易上手；且岛屿架构需借助 Vue/React/Svelte 组件来实现交互，想写可交互岛屿建议先学其一。

参考资料

本教程在编写过程中参考了下列资料：

• Astro 官方文档