Astro 入门指南

Astro 是一个现代化的静态站点生成器，特别适合内容型网站。

为什么选择 Astro？

1. 零 JS 开销

Astro 默认输出纯 HTML 和 CSS，JavaScript 只在需要时才加载。这意味着你的网站加载速度会非常快。

2. 岛屿架构

Astro 引入了”岛屿架构”的概念——你可以在静态页面中嵌入独立的交互式组件：

---
// 这个组件只在客户端交互时才加载 JS
import LikeButton from '../components/LikeButton.jsx';
---

<h1>我的文章</h1>
<p>文章内容...</p>
<LikeButton client:load />

3. 内容集合

Astro 的内容集合（Content Collections）提供了类型安全的内容管理：

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

4. Markdown 友好

直接用 Markdown 写文章，Astro 会自动生成页面。支持 MDX，可以在 Markdown 中使用组件。

快速开始

# 创建新项目
npm create astro@latest

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

总结

Astro 是一个非常适合博客、文档站等内容型网站的框架。它的性能优秀，开发体验也很好。