Astro 博客搭建实战：从零到部署

1. 背景

作为一个 AI 技术从业者，我需要一个轻量、快速、SEO 友好的博客来记录工程实践。经过对比 Hugo、Next.js、VitePress 等方案，最终选择了 Astro。

核心诉求：

• Markdown 写作
• 代码高亮（Python / PyTorch / Rust）
• 静态部署，零服务器成本
• 后续可扩展评论和搜索

Astro 恰好在这几个维度上都做得不错。

2. 项目初始化

npm create astro@latest my-blog -- --template blog
cd my-blog
npm install

Astro 的 blog 模板自带：

• Content Collections（类型安全的 Markdown 管理）
• RSS Feed 自动生成
• Sitemap 自动生成
• OG/Twitter SEO meta 标签

3. 集成 Tailwind CSS

npx astro add tailwind

Tailwind v4 使用 Vite 插件方式集成，无需单独的 tailwind.config.js。

在 global.css 头部添加：

@import "tailwindcss";

4. 内容集合 Schema

在 src/content.config.ts 中定义 Frontmatter 校验：

const blog = defineCollection({
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string(),
      pubDate: z.coerce.date(),
      tags: z.array(z.string()).default([]),
      draft: z.boolean().default(false),
    }),
});

5. 部署到 Cloudflare Pages

1. 将代码推送到 GitHub
2. 在 Cloudflare Pages 中连接仓库
3. 构建命令：npm run build
4. 输出目录：dist
5. 自动 HTTPS + 全球 CDN

6. 总结

Astro + Tailwind + Cloudflare Pages 这套技术栈非常适合个人技术博客：

• 构建速度快（~1.8s）
• 输出纯静态 HTML（Lighthouse 满分）
• 零运维成本
• 保留未来扩展性（MDX 嵌入交互组件）

后续计划加上 Giscus 评论和 Pagefind 搜索。