在 Cloudflare Pages 上部署 Astro 博客

为什么选 Cloudflare Pages + Astro？

Cloudflare Pages 提供免费的静态站点托管（以及 Serverless Functions）， 而 Astro 是一个专为内容站点设计的框架 —— 默认输出静态 HTML， 需要动态功能时也可以优雅地降级到 SSR。

这两个东西加在一起就是博客利器：免费、快速、全球 CDN。

步骤

1. 创建一个 Astro 项目

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

2. 添加 Cloudflare 适配器

npm install @astrojs/cloudflare

在 astro.config.mjs 中：

import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  adapter: cloudflare(),
  output: 'server', // 或者 'static'
});

3. 部署到 Cloudflare Pages

用 wrangler 或直接在 Cloudflare Dashboard 中连接 GitHub 仓库。

npm run build
npx wrangler pages deploy dist/

4. 搞定

你的 Astro 博客就在 Cloudflare 全球网络上了。

一些经验

  • Astro 的 output: 'static' 速度最快，但如果你想用 SSR + 动态功能就用 server
  • Cloudflare 适配器会自动处理静态资源的路由
  • RSS、Sitemap 这些 Astro 官方都有集成，直接加就行

具体的配置可以参考 本博客的源码。