为什么迁移到 Cloudflare Pages

原来的博客运行在腾讯云服务器上，使用 Flask 和 Nginx。虽然功能正常，但需要持续维护服务器、续费、配置 HTTPS，并处理部署环境。迁移到 Cloudflare Pages 后，静态页面由全球 CDN 分发，API 运行在 Pages Functions，文章数据保存在 KV 中。

主要收益：

  • 不再维护服务器和 Nginx
  • 自动 HTTPS 与全球 CDN
  • 前端代码推送后即可部署
  • 后台修改文章后直接写入 KV，无需重新构建

迁移后的架构

前端：Astro 静态站点
API：Cloudflare Pages Functions
存储：Cloudflare KV
后台：静态 HTML 管理面板
域名：Cloudflare DNS

访问流程如下：

浏览器 -> Astro 页面 -> /api/posts -> Pages Functions -> KV

第一步：准备 Astro 项目

创建项目并安装依赖：

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

将公共资源放在 public/，页面放在 src/pages/。执行 npm run build 后，静态文件会输出到 dist/。

第二步：创建 Pages Functions

在项目根目录创建 functions/api/[[path]].js。这个 catch-all 路由可以处理：

  • GET /api/posts：读取文章列表
  • GET /api/posts/:id：读取文章正文
  • POST /api/posts：新增文章
  • PUT /api/posts/:id：修改文章
  • DELETE /api/posts/:id：删除文章
  • POST /api/auth/login：后台登录

Functions 通过 context.env.BLOG_KV 访问 KV。

第三步：配置 KV

创建 KV 命名空间：

npx wrangler kv namespace create BLOG_KV

然后在 wrangler.toml 中绑定：

name = "my-blog"
pages_build_output_dir = "./dist"

[[kv_namespaces]]
binding = "BLOG_KV"
id = "你的命名空间 ID"

文章可以统一保存在 posts 键中，数据结构分为 papers 和 tips 两组。

第四步：制作后台管理页

后台页面放在 public/admin/index.html，Astro 构建时会原样复制到 dist/admin/。管理页通过 API 完成登录和文章增删改。

文章字段建议包括：

{
  "id": "article-id",
  "title": "中文标题",
  "titleEn": "English title",
  "summary": "中文摘要",
  "summaryEn": "English summary",
  "content": "Markdown 正文",
  "contentEn": "English Markdown content",
  "tags": ["Cloudflare", "Astro"]
}

第五步：部署

先构建站点：

npm run build

再部署到 Cloudflare Pages：

npx wrangler pages deploy ./dist --project-name my-blog

Cloudflare 会返回一个 pages.dev 地址。确认页面、Functions 和 KV 都正常后，再绑定自定义域名。

第六步：绑定自定义域名

在 Cloudflare Pages 项目设置中添加域名。如果域名已由 Cloudflare 托管，DNS 记录通常会自动创建。HTTPS 证书也由 Cloudflare 自动签发。

日常使用流程

修改前端代码时：

修改代码 -> npm run build -> Git push 或 Wrangler 部署

发布文章时：

打开 /admin/ -> 编辑 Markdown -> 保存 -> KV 立即更新

注意事项

  • API Token 不要写进代码或提交到 Git
  • .wrangler/、.astro/、dist/ 和 .env 应加入 .gitignore
  • 后台密码和认证令牌不要使用明文默认值
  • 重要文章数据应定期从 KV 导出备份

完成迁移后，博客不再依赖常驻服务器，同时仍保留动态文章管理能力。