基于 Cloudflare Workers + D1 数据库 搭建的轻量级个人博客系统

基于 Cloudflare Workers + D1 数据库 搭建的轻量级个人博客系统，无需服务器、无需备案，部署简单，功能完善。
>

在线演示：https://blog.hiir.cn

📖 项目简介

CF-blog 是一个运行在 Cloudflare Workers 上的轻量级个人博客系统。它使用 Cloudflare D1 (SQLite) 作为数据存储，无需自备服务器，支持 Markdown 编辑、文章分类/标签、评论系统、密码保护、SEO 优化、RSS 订阅、Sitemap 生成等功能。

前端零依赖框架，采用原生 HTML + CSS + JS 编写，加载速度快，移动端体验良好。系统支持通过后台配置首页幻灯片、友情链接、知识付费卡片，并内置了 V免签支付接口，适合个人技术分享与内容变现。

✨ 主要特性

• 🚀 一键部署：基于 Cloudflare Workers，无需服务器，免费额度充足。
• 📝 Markdown 编辑：内置 editor.md 编辑器，支持实时预览，并额外增强了“解析HTML标签”、“折叠块”、“回复可见”等快捷按钮。
• 🗄️ D1 数据库：数据存储于 Cloudflare D1，稳定可靠。
• 📱 响应式设计：PC / 移动端自适应，移动端体验优化。
• 🔒 密码保护：支持单篇文章加密访问，同时支持 [password] 标签实现文章内部分内容加密。
• 💬 评论系统：支持评论审核、博主回复、评论后可见（整篇或局部 隐藏）。
• 📂 折叠块 / 隐藏块：文章内支持 折叠、评论后可见。
• 🖼️ 幻灯片：首页轮播图，后台可配置。
• 🔗 友情链接：独立管理，支持 LOGO 与描述。
• 🏷️ 分类与标签：多分类、多标签，支持分类聚合展示。
• 🔍 全文搜索：支持标题与正文搜索。
• 📡 RSS 订阅：自动生成 rss.xml，方便读者订阅。
• 🗺️ Sitemap：自动生成 sitemap.xml，利于 SEO 优化。
• 📊 访问统计：文章浏览量统计。
• 🌙 代码高亮：基于 highlight.js，支持多种语言。
• 🔐 安全登录：Session Cookie + 环境变量，避免明文密码入库。
• 💰 知识付费：支持设置文章价格、首页卡片价格，集成 V免签支付接口。
• 🎨 页面定制：支持自定义页头/页脚代码、版权信息、404页面等。

🗂️ 目录结构

cfblog/
├── public/                   # 静态资源目录
│   ├── style.css             # 前台主样式
│   ├── article.css           # 文章页样式（评论回复可见 / 折叠块）
│   ├── main.js               # 前台主脚本（菜单图标 / Tab / 轮播 / 移动端导航）
│   ├── comments.js           # 文章页评论系统
│   ├── highlight.min.js      # 代码高亮
│   ├── tomorrow-night-bright.min.css  # 代码高亮主题
│   ├── jquery.min.js         # 后台依赖
│   ├── bootstrap.min.css     # 后台依赖
│   ├── bootstrap.min.js      # 后台依赖
│   ├── bootstrap-select.min.css
│   ├── bootstrap-select.min.js
│   ├── defaults-zh_CN.min.js
│   ├── editormd.css          # Markdown 编辑器样式
│   └── editormd.js           # Markdown 编辑器脚本
├── src/
│   └── index.js              # Workers 主程序（全部后端逻辑）
├── backup.sql                # D1 数据库结构备份
├── wrangler.toml             # Workers 配置文件
└── README.md

🚀 快速开始

1. 前置要求

• 一个 Cloudflare 账号
• 安装 Node.js（建议 v18+）
• 安装 Wrangler CLI：

npm install -g wrangler

2. 克隆项目

git clone https://github.com/你的用户名/cfblog.git
cd cfblog

3. 登录 Cloudflare

wrangler login

浏览器会自动打开授权页面，登录并授权即可。

4. 创建 D1 数据库

wrangler d1 create cfblog

执行后会返回类似：

✅ Successfully created DB 'cfblog'
[[d1_databases]]
binding = "CFBLOG"
database_name = "cfblog"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

记下 database_id，下一步要用。

5. 修改 wrangler.toml

name = "cfblog"
main = "src/index.js"
compatibility_date = "2024-01-01"

[[d1_databases]]
binding = "CFBLOG"
database_name = "cfblog"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

[vars]
SITE_DOMAIN = "blog.example.com"

6. 初始化数据库

wrangler d1 execute cfblog --file=./backup.sql

也可以远程执行：

wrangler d1 execute cfblog --remote --file=./backup.sql

7. 配置环境变量（Secrets）

以下变量必须在 Cloudflare Workers 后台或通过 CLI 设置，不要写进代码里：

通过 CLI 设置：

wrangler secret put ADMIN_PASSWORD
wrangler secret put SESSION_SECRET

或者进入 Cloudflare Dashboard → Workers → 你的 Worker → Settings → Variables 添加。

⚠️ 注意：ADMIN_PASSWORD 和 SESSION_SECRET 未设置时，站点会返回 500 错误。

8. 部署

wrangler deploy

部署成功后，Cloudflare 会返回一个 *.workers.dev 的地址。你也可以在 Dashboard 里绑定自己的域名。

⚙️ 配置说明

所有前台配置都在 src/index.js 的 OPT 对象中：

const OPT = {
  "siteDomain": "blog.hiir.cn",              // 站点域名
  "siteName": "杨公子的博客",                 // 站点名称
  "siteDescription": "...",                  // 站点描述
  "keyWords": "...",                         // SEO 关键词
  "logo": "https://...",                     // 站点 Logo
  "pageSize": 8,                             // 每页文章数（PC）
  "mobilePageSize": 12,                      // 每页文章数（移动端）
  "readMoreLength": 150,                     // 摘要长度
  "recentlySize": 6,                         // 侧边栏热门文章数量
  "recentlyType": 3,                         // 1=按ID，2=按修改时间，3=按浏览量
  "tagsDisplayCount": 30,                    // 标签云显示数量
  // ...
};

如需修改站点名称、描述、Logo 等，直接改这里即可。

分类样式 CATEGORY_STYLE

用于首页分类卡片的封面图、热度、描述：

const CATEGORY_STYLE = {
  "经验分享": { img: "https://...", hot: "9.5W+", desc: "分享折腾经验和实用技巧" },
  // ...
};

🛠️ 后台使用

访问 https://你的域名/admin/，输入用户名和密码即可登录后台。

后台功能：

• 📊 博客总览：文章、分类、标签、评论、幻灯片、友链数量统计
• 📝 我的文章：查看、编辑、删除文章
• ✏️ 新建文章：Markdown 编辑、分类、标签、置顶、隐藏、密码、推荐
• 🖼️ 首页幻灯片：管理首页轮播图
• 🔗 友情链接：增删改友链
• 💬 留言管理：审核、回复、驳回、删除评论
• ⚙️ 博客设置：分类、顶部菜单配置
• 📥 导入导出：JSON 备份 / 恢复
• 🚀 发布站点：清理缓存并重新生成

✍️ 文章语法扩展

在 Markdown 编辑器中，支持以下自定义语法：

评论后可见（局部）

这里的内容需要评论一次才能查看
🔒
评论后可见
本条内容需要评论一次才能查看
去评论 ↓

折叠块

点击展开▾
这里是折叠的内容

整篇文章评论后可见

在后台新建 / 编辑文章时，打开「评论可见」开关即可。

文章加密

在后台新建 / 编辑文章时，填入「文章访问密码」即可。

🗄️ 数据库结构

主要数据表：

articles 字段：

comments 字段：

🔧 常见问题

Q1：部署后访问提示「服务未正确配置」？

未设置 ADMIN_PASSWORD 或 SESSION_SECRET 环境变量。请到 Cloudflare Workers 后台 → Settings → Variables 添加。

Q2：评论功能无法使用？

确认已执行 backup.sql 初始化数据库，且 comments 表已创建。

Q3：样式或脚本加载失败（404）？

确认 public/ 目录下所有静态资源已随 Workers 一起部署。如果使用 wrangler.toml 的 [site] 配置，确保 bucket 指向 public 目录。

Q4：如何绑定自定义域名？

Cloudflare Dashboard → Workers → 你的 Worker → Triggers → Custom Domains，添加你的域名即可。

Q5：如何清理缓存？

后台「发布站点」页点击「立即发布」即可。需要配置 CACHE_ZONE_ID 和 CACHE_TOKEN 才能彻底清除 Cloudflare CDN 缓存。

Q6：文章 ID 如何生成？

自动递增，从 000001 开始，每次新建文章自动 +1。

📝 更新日志

v2.1.7

• ✨ 新增评论系统（审核、回复、驳回、删除）
• ✨ 新增 [reply] 评论后可见、[collapse] 折叠块
• ✨ 新增文章密码保护
• ✨ 新增后台留言管理
• 🎨 优化移动端 Tab 胶囊样式
• 🐛 修复移动端幻灯片间距
• 🐛 修复评论后可见解锁逻辑

📄 开源协议

本项目基于 MIT License 开源，欢迎 fork 与 star。

🙏 致谢

• Cloudflare Workers
• editor.md
• highlight.js
• Mustache.js

📮 联系

• 博客：https://blog.hiir.cn
• GitHub：https://github.com/net5705632

如果这个项目对你有帮助，欢迎点个 ⭐ Star 支持一下！
```