CFBlog：在 Cloudflare 上零成本搭建功能完整的现代化博客系统

项目介绍

在搭建个人博客时，我们往往面临两难选择：WordPress 功能强大但需要服务器和数据库，静态博客生成器虽然轻量但缺乏动态交互能力。而 CFBlog 的出现完美解决了这一问题——它是一个类似 WordPress 的博客系统，完全运行在 Cloudflare 生态系统上，让你可以在零服务器成本的情况下，拥有一个高性能、功能完整的现代化博客系统。

项目地址：https://github.com/luochen-zhang/cfblog

开源协议：MIT

核心优势

费用：0 元（利用 Cloudflare 免费额度）
性能：极速（部署在 Cloudflare 全球边缘节点）
一体化部署：访客前台、管理后台和 REST API 由同一个 Worker 提供服务[reference:0]
运维成本：零——无需管理服务器

功能特性

CFBlog 是一个功能完备的博客系统，覆盖了从内容创作到读者互动的完整链路：

内容管理

功能	说明
集成式前台	首页、归档、分类、标签、文章页、友链页、动态页一应俱全[reference:1]
文章管理	创建、编辑、删除、发布，支持草稿、发布、待审核、私密、回收站等多种状态[reference:2]
分类和标签	完整的分类和标签系统，支持 AI 自动生成 Slug[reference:3][reference:4]
Markdown 编辑器	使用 Markdown 撰写文章，支持实时预览[reference:5]
文章摘要和置顶	支持自定义摘要和文章置顶功能[reference:6]
特色图片	支持 URL 或媒体库设置特色图片[reference:7]
页面支持	支持独立页面创建，与文章类型分开管理[reference:8]
AI 辅助	使用 Cloudflare AI 自动生成文章 Slug 和摘要[reference:9]

评论系统

功能	说明
完整评论功能	文章评论、动态评论、嵌套回复[reference:10]
评论状态管理	待审核、已批准、垃圾评论、回收站[reference:11]
多层防垃圾	Cloudflare Turnstile、首评审核、限流、重复内容拦截、关键词/链接拦截、蜜罐[reference:12]
邮件通知	基于 Resend 的评论邮件通知（可开关）[reference:13]
浏览计数	自动统计文章浏览量[reference:14]

媒体管理

功能	说明
R2 存储	图片上传到 Cloudflare R2 对象存储[reference:15]
媒体库管理	完整的媒体库管理界面[reference:16]
图片元数据	支持标题、描述、替代文本[reference:17]
多格式支持	支持多种文件格式[reference:18]

用户系统

功能	说明
用户注册和登录	第一个注册的用户自动成为管理员[reference:19]
JWT 认证	基于 JWT 的安全认证机制[reference:20]
角色权限系统	管理员、编辑、作者、投稿者、订阅者[reference:21]
用户资料管理	头像和个人简介[reference:22]

友情链接

链接分类管理[reference:23]
友情链接管理[reference:24]
链接排序和可见性控制[reference:25]
头像支持[reference:26]

系统设置

站点基础设置（标题、描述、关键词）[reference:27]
SEO 配置[reference:28]
评论防护设置（Turnstile、首评审核、频率限制等）[reference:29]
邮件通知设置（Resend 发信、管理员提醒、评论回复提醒）[reference:30]
自定义页脚文本和 ICP 备案信息[reference:31]
Webhook URL（支持触发 Cloudflare Pages 部署）[reference:32]

技术栈

CFBlog 采用了现代化的全栈技术方案[reference:33]：

平台：Cloudflare Workers
Web 框架：Hono
数据库：Cloudflare D1（SQLite）
对象存储：Cloudflare R2
AI 服务：Cloudflare AI
语言：TypeScript
密码加密：bcryptjs
JWT 认证：jose
前端框架：Vue 3 + Vite（管理后台）
状态管理：Pinia + Vue Router
UI 组件：Naive UI + Lucide
Markdown 渲染：Marked
主题资源：Workers Assets 托管 public/ 下的静态资源

部署教程

准备工作

开始部署前，你需要准备：

一个 Cloudflare 账号
一个 GitHub 账号
（可选）一个自定义域名——如果使用 Workers 默认域名也可正常访问
（可选）一个 Resend 账号（用于评论邮件通知功能）

方式一：GitHub Actions 自动部署（推荐）

这是最便捷的部署方式，配置一次后，后续推送代码即可自动部署。

第 1 步：Fork 仓库

第 2 步：配置 Cloudflare 资源

在 Cloudflare 控制台中依次创建以下资源[reference:35]：

D1 数据库：用于存储文章、用户、评论等所有数据
R2 存储桶：用于存储上传的图片和媒体文件
AI 绑定：用于自动生成 Slug 和摘要（可选但推荐）

💡 创建完成后，记下各资源的名称，后续需要在 wrangler.toml 中配置绑定。

第 3 步：配置 GitHub Secrets

在你的 GitHub Fork 仓库中，进入 Settings → Secrets and variables → Actions，添加以下 Secrets[reference:36][reference:37]：

Secret 名称	说明	获取方式
`CLOUDFLARE_API_TOKEN`	Cloudflare API 令牌	在 Cloudflare Dashboard → Profile → API Tokens 创建，需要 Workers 编辑权限
`CLOUDFLARE_ACCOUNT_ID`	Cloudflare 账号 ID	在 Cloudflare 仪表盘右侧 "Account details" 中查找
`JWT_SECRET`	JWT 加密密钥	自行生成一个至少 32 个字符的强随机字符串

⚠️ 重要：JWT_SECRET 请使用强随机字符串，不要使用简单密码。

第 4 步：配置 wrangler.toml

编辑项目根目录下的 wrangler.toml 文件，将 D1、R2、AI 的绑定信息配置正确[reference:38]。

第 5 步：触发部署

完成以上配置后，有两种方式触发部署[reference:39][reference:40]：

自动触发：推送代码到 main 分支时自动部署
手动触发：在 GitHub Actions 页面手动执行 workflow_dispatch

工作流会自动执行以下步骤[reference:41]：

npm ci —— 安装依赖
npm run admin:build —— 构建 Vue 管理后台
node ./scripts/reconcile-remote-d1.mjs cfblog-db —— 执行数据库对账
npx wrangler deploy —— 部署到 Cloudflare Workers

第 6 步：初始化数据库

如果是全新部署，需要初始化数据库[reference:42]：

npx wrangler d1 execute cfblog-db --file=./schema.sql --remote

在 Cloudflare 上零成本搭建功能完整的现代化博客系统

洛宸