基于 Cloudflare Worker 的 Github CMS后端管理系统

所有使用静态博客的写作者，大概都曾被同一个流程困扰过：每次想更新文章，都得在本地打开编辑器、修改 Markdown 文件、git commit、git push。尽管 VS Code 已经将这套流程简化到了极致，只需动动手指点几下按钮，但整套操作走下来，依然相当繁琐。

市面上的 CMS 倒是不缺，但要么太重，要么需要额外维护数据库——对个人静态博客而言，实在犯不上。于是 Bloath CMS 就这么诞生了：一个基于 Cloudflare Worker 的轻量级 GitHub 仓库内容管理系统。

核心思路：直接通过 API 读写仓库

Bloath 的核心思路其实很简单：既然博客内容本身就是存放在 Git 仓库里的 Markdown 文件，那为什么不直接通过 GitHub API 来读写这些文件呢？

这样省去了拉取和推送的环节——每次连接仓库都是最新的文件状态，每次保存都是一次提交。整个系统只需要 Cloudflare Worker 做 API 中转，前端是个纯静态应用，部署在 Cloudflare Pages 上，不需要额外维护服务器或数据库，而这些操作完全在免费额度内运行。

换句话说，维护一个个人博客的管理后台，成本几乎为零。

界面哲学：隐形设计，内容优先

打开 Bloath 的第一眼，你会注意到它很安静。没有花哨的渐变，没有层层堆叠的投影，没有五颜六色的图标轰炸。整个页面铺着一层暖米白色的画布，卡片是纯白色的，边框极细极淡，像是铅笔轻轻划出的分隔线。

这是刻意追求的效果——用设计圈比较时髦的说法叫 “界面隐形，内容优先”。一个写作工具不该喧宾夺主，它应该像一张干净的桌子：你坐下来时只看到纸和笔，而不是桌子的雕花。

配色克制，阅读友好

配色上设计较为克制。全局只用了蓝色和绿色作为品牌强调色，仅出现在按钮、链接和选中状态上。其余所有元素都保持中性——文字是带微弱暖调的近黑色，次要信息用中灰色，辅助说明用暖灰色。

不用纯黑，因为纯白背景上的纯黑文字对比度过高，长时间阅读容易眼疲劳。也不选冷灰，冷灰在暖色画布上会显得脏。

登录与后台布局

登录流程

登录走的是标准 GitHub OAuth 流程。点击登录按钮，跳转到 GitHub 授权认证页面，授权完成后回到管理后台。登录有效期为六小时，临期会自动续期。系统本身不设账号体系，也不会存储任何用户信息。

后台界面结构

进入后台后，左侧是固定的侧边栏导航，右侧是主内容区。导航项之间间距紧凑，激活状态用加粗文字和浅色背景区分，没有花哨的高亮条。顶部有一条极细的 Header，几乎不会分散注意力。

• 桌面端：经典的左栏导航加右栏内容布局
• 移动端：侧边栏收进抽屉，通过汉堡菜单唤出，列表从多列切换为单列卡片堆叠

内容管理：最核心的功能

内容库展示的是你配置的内容集合——该集合对应 GitHub 仓库里的一个目录，你可以通过在设置中添加内容路径来管理哪些内容显示在内容库中。默认目录为 content/posts。

文件列表按 Git 最后提交时间倒序排列，最近修改的文章排在前面。每篇文章右侧有编辑和删除两个图标按钮，没有多余的操作入口。搜索框位于顶部，输入关键词即可即时过滤，支持按标题和路径匹配。

编辑器：专注写作体验

所见即所得的编辑环境

点击编辑进入编辑器页面。编辑器用的是 Vditor，一个成熟的 Markdown 编辑器组件，套了一层自定义主题，让配色尽量与整体界面保持一致。

• 工具栏放在编辑器顶部，按钮紧凑排列，覆盖了核心格式操作
• 默认编辑器模式为即时渲染模式
• 移动端工具栏上方增加了一个折叠按钮，可以将工具栏收起

Front Matter 面板：告别手写 YAML

编辑器右侧是 Front Matter 元数据面板，用来编辑文章的元数据——标题、日期、分类、标签等等。所有字段都是结构化的表单控件，不用手写 YAML，也不用担心格式出错。

底部还有一些个人定制的属性，比如加密、图片、视频、链接等，不过对其他主题或架构可能不适用。

保存、草稿与回收站

保存逻辑

保存操作会把 Front Matter 和正文拼成完整的 Markdown 文件，通过 GitHub API 直接写入仓库。如果文件已存在就走更新逻辑，需要带上文件的 SHA 值防止冲突。写入成功后弹出一个通知，三秒后自动消失。

草稿箱与回收站

• 草稿箱：新建文章默认保存到草稿箱，路径为根目录下的 .draft
• 回收站：删除操作会把文件移到回收站目录，而不是直接删除，保留一个反悔的机会。回收站路径为根目录下的 .trash

回收站页面可以查看已删除的文件，支持恢复到指定目录或彻底删除。

媒体库：够用就好的图片管理

媒体库目前还比较基础，可以浏览指定 GitHub 仓库内指定分支下的图片文件，使用当前登录的 GitHub 账号权限。

支持上传新图片，上传的图片会存到仓库根目录下，通过 CDN 链接引用。这个功能的定位是 “够用就行”——没有做复杂的文件夹管理或图片编辑。个人博客的图片需求通常不复杂，后续如果有需要再迭代。不过就目前而言，我觉得它已经足够满足日常使用了。

设置与配置

设置页面用来配置内容集合路径和媒体库配置：

• 内容集合路径：支持多个目录，直接输入目录名即可添加，系统会自动识别补足
• 媒体库配置：需要指定仓库和分支

这些配置会自动存储在前端 localStorage 里，不依赖后端存储——毕竟是个人工具，配置跟着浏览器走就足够了。

设计取舍：做少一点，做好一点

Bloath 最初的设计取舍很明确：

不做数据库，不做服务器，不做复杂权限系统，不做多人协作。

它只做一件事——让使用者能更方便地管理 GitHub 仓库里的 Markdown 文件。