开源一个 CDN 个人博客模板：让 AI 一键部署到 Cloudflare Pages

新增功能亮点#

这次整理不只是把源码公开出去，还补了几项更适合个人长期维护的能力：

1. AI 一键部署 Skill

   仓库里内置了 skills/deploy-astro-blog。它会约束 AI 先本地 scaffold、安装依赖、跑检查、构建，再创建 GitHub 仓库、配置 Cloudflare Pages，并在每次外部变更前确认操作范围。

2. AI 写作发布 Skill

   skills/post-astro-blog 把资料核验、文章起草、Frontmatter、图片、构建、预览和上线验收串成一条流程。它默认先保留草稿，只有文章内容和发布范围确认后才允许提交并推送。

3. D1 公开评论

   评论区不加载第三方 iframe，优先通过 Cloudflare Pages Function 写入 D1，让所有访客看到同一套评论。D1 未绑定、接口失败或额度超限时，会降级保存到访客当前浏览器，避免内容丢失，也避免继续消耗远端额度。

4. 随机昵称和英雄头像

   如果评论者没有设置昵称，会自动随机生成一个王者荣耀英雄昵称，并优先显示对应的官方英雄头像。头像加载失败或昵称不是英雄名时，才会回落到昵称末尾两个字和稳定底色，不需要上传头像，也不会收集额外账号信息。

5. 公开脱敏模板

   模板仓库里已经把域名、邮箱、部署 ID、仓库名等个人信息替换成 example.com、Example Lab 这类示例值，并配了脱敏截图，方便别人直接参考。

6. 完整发布质量门

   文档里固定了 pnpm check、pnpm type-check、Biome、生产构建、Pagefind、Pages 预览和自定义域验收流程，避免部署时靠记忆操作。

模板长什么样#

首页大致是这样：

文章页会保留 Fuwari 的阅读体验，并在底部挂载评论区：

如何用这个模板搭建自己的博客#

最短路径是直接克隆模板仓库：

1
git clone git@github.com:geekyfoxlab/cdn-blog.git my-blog
2
cd my-blog
3
corepack enable
4
pnpm install --frozen-lockfile
5
pnpm dev

然后改 src/config/site.ts 里的站点信息：

1
const siteUrl = "https://blog.example.com";
2
const mainSiteUrl = "https://example.com";
3
const githubUrl = "https://github.com/example";
4
const contactEmail = "hello@example.com";

文章放在 src/content/posts/。新建文章可以用：

1
pnpm new-post my-first-post

发布前补齐 description，并把 draft 改成 false：

1
---
2
title: "文章标题"
3
published: 2026-07-31
4
description: "用一到两句话概括文章。"
5
tags: ["Astro", "博客"]
6
category: "工程实践"
7
draft: false
8
---

让 AI 一键部署#

如果想让 AI 直接从空目录帮你部署，可以安装仓库里的 Skill：

1
mkdir -p ~/.codex/skills
2
cp -R skills/deploy-astro-blog ~/.codex/skills/deploy-astro-blog

然后给 AI 一段结构化输入：

1
使用 deploy-astro-blog skill，帮我部署一个 Astro/Fuwari 个人博客到 Cloudflare Pages。
2

3
输入：
4
- 模式：new
5
- 项目目录：/absolute/path/my-blog
6
- 博客名称：Example Lab
7
- 项目 slug：example-blog
8
- 博客 URL：https://blog.example.com
9
- 主站 URL：https://example.com
10
- 描述：记录技术实践与学习笔记。
11
- 主题方向：技术写作,项目记录,学习笔记,工程实践
12
- GitHub 仓库：example/example-blog
13
- 仓库可见性：Private 或 Public
14
- 是否绑定自定义域：是/否
15
- 自定义域：blog.example.com
16

17
请先本地 scaffold、验证构建，再创建 GitHub 仓库、推送 main、配置 Cloudflare Pages Git 集成，并在每次外部变更前确认。

Cloudflare Pages 的构建参数保持固定：

绑定自定义域时，只处理明确授权的博客子域，例如 blog.example.com。不要为了博客部署去改根域、www、MX/TXT、Nameserver 或其他无关记录。

让 AI 写作并发布文章#

把写作流程也交给 AI 时，可以安装同仓库的另一个 Skill：

1
mkdir -p ~/.codex/skills
2
cp -R skills/post-astro-blog ~/.codex/skills/post-astro-blog

然后提供主题、读者、素材和期望结果。比如：

1
使用 post-astro-blog skill，把下面的项目记录整理成一篇中文技术文章：
2

3
- 主题：如何为 Astro 博客接入 Cloudflare Pages
4
- 读者：第一次部署静态博客的开发者
5
- 素材：README、部署日志和我提供的截图
6
- 目标：给出可复现步骤、关键设计原因、风险和验收方法
7

8
先创建 draft: true 的草稿，核验代码与链接并完成本地预览。
9
未经我确认，不要改成公开文章，不要提交或推送。

这个 Skill 不负责凭空生成经历或数据。它会先区分仓库中可验证的事实、作者观点和仍需确认的假设，再按照当前项目的 Schema 生成文章。正式发布前，它还会检查桌面与移动端渲染、Pagefind、RSS、Sitemap 和生产文章 URL。

为什么这样设计#

这个模板继续保持纯静态输出。这样做有几个好处：

• 没有数据库和后端运维压力。
• GitHub + Cloudflare Pages 的免费组合就能跑起来。
• Markdown 写作、Git 提交和 Pages 自动构建形成一条清晰链路。
• 隐私边界更明确：评论不依赖第三方 iframe，D1 不可用时只在访客浏览器本地降级保存，统计和第三方评论默认关闭。

后续如果需要公开评论、访问统计、Newsletter 或账号系统，可以单独评估，不让这些功能成为博客上线的默认依赖。

发布检查清单#

每次正式发布前，我会至少跑：

1
pnpm check
2
pnpm type-check
3
pnpm exec biome check ./src
4
pnpm build

如果部署到 Cloudflare Pages，再检查首页、文章页、归档、RSS、Sitemap、robots、404、搜索和移动端布局。这样麻烦一点，但可回滚、可复现，也更适合长期写下去。