用 Astro 在 Cloudflare Pages 上搭一个博客

你正在看的这个博客，就是用本文的方法搭的。整套方案的目标只有三个：快、便宜、好维护。

为什么是 Astro

写博客的框架很多，我最后选了 Astro，理由很简单：

• 默认零 JavaScript。文章页本质上是静态 HTML，浏览器不用先跑一大堆框架代码才能显示一段文字。
• Markdown 是一等公民。用内容集合（content collections）管理文章，还带类型校验。
• 组件化但不绑架你。.astro 组件写起来像 HTML，需要时再引入 React/Vue 也行。

三步跑起来

# 1. 创建项目
npm create astro@latest my-blog

# 2. 本地预览
cd my-blog && npm run dev

# 3. 构建静态文件
npm run build   # 产物在 dist/

文章用 Markdown 写，扔进 src/content/blog/ 就行。一个内容集合的定义大概长这样：

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    category: z.enum(['tech', 'ai', 'essay']),
  }),
});

export const collections = { blog };

schema 会在构建时校验每篇文章的 frontmatter——写错字段名直接报错，比上线后才发现强多了。

部署到 Cloudflare Pages

Cloudflare Pages 对静态站点几乎是免费的，全球 CDN，加载延迟极低。两种部署方式：

1. 连 Git 仓库（推荐）：在 Pages 里选中仓库，构建命令填 npm run build，输出目录填 dist。之后每次 git push 自动部署。
2. 直接上传：本地 npm run build 后，用 wrangler pages deploy dist 把产物推上去。

关键就一句话：构建命令 npm run build，输出目录 dist。剩下的 Cloudflare 都替你搞定。

还能再快一点

• 给 /_astro/* 这类带哈希的资源设置 max-age=31536000, immutable，让浏览器永久缓存。
• 用系统字体栈，省掉网络字体的加载等待。
• 图片用 Astro 的 <Image /> 组件自动压缩。

一套下来，Lighthouse 性能分轻松满分，而你每个月的账单是——零。