使用 Astro 搭建技术博客

本文将介绍如何使用 Astro 框架搭建一个技术博客。

为什么选择 Astro？

Astro 是一个专注于内容的静态网站生成器，特别适合博客类网站：

• 内容优先 - 专为内容驱动的网站设计
• 极致性能 - 默认零 JavaScript
• 灵活架构 - 支持多种前端框架

项目结构

├── src/
│   ├── components/    # 可复用组件
│   ├── content/       # 博客内容
│   │   └── blog/      # 博客文章 (Markdown)
│   ├── layouts/       # 布局模板
│   ├── pages/         # 页面路由
│   └── styles/        # 全局样式
├── public/            # 静态资源
├── astro.config.mjs   # Astro 配置
└── package.json

内容集合

Astro 的内容集合功能让管理博客文章变得简单：

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

部署到 Cloudflare Pages

Cloudflare Pages 提供免费的静态网站托管：

1. 连接 GitHub 仓库
2. 设置构建命令：npm run build
3. 设置输出目录：dist
4. 绑定自定义域名

就这么简单！