使用 Astro 构建现代博客

为什么选择 Astro？

Astro 是一个专为内容驱动的网站设计的现代静态站点生成器。它的核心理念是零 JavaScript 默认，这意味着生成的网站默认不包含任何客户端 JavaScript，除非你明确需要。

主要特点

1. 极致性能：默认输出纯静态 HTML
2. 岛屿架构：按需加载交互组件
3. 多框架支持：React, Vue, Svelte, etc.
4. 内容集合：类型安全的内容管理

快速开始

# 创建新项目
npm create astro@latest

# 选择博客模板
cd my-blog
npm install
npm run dev

项目结构

src/
├── content/
│   └── posts/          # Markdown 文章
├── layouts/            # 页面布局
├── components/         # 可复用组件
└── pages/              # 路由页面

内容集合

Astro 的内容集合功能让我们可以用 TypeScript 的类型安全来管理 Markdown 文件：

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const postsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

总结

Astro 是构建博客的理想选择，它结合了静态站点生成的性能优势和现代开发体验。无论你是个人博客还是企业文档站点，Astro 都能满足你的需求。