今天我想邀请大家一起看一个真实案例：一个做 AI 平台的技术负责人，怎么在 2 天内用 Claude Code 把一个开源博客项目改成了自己的内容系统。

不是玩具，是每天在用的生产环境。不是 demo，是 134 个文件、12000 多行代码的真实改动。

我为什么需要一个自己的博客

先说背景。我白天带队做 AI 平台，业余搞内容创作，写 AI 日报、技术教程、架构调试经验。内容散落在公众号、知乎、Obsidian 本地笔记里，时间一长就出问题了。

公众号文章改不了，知乎排版折腾人，本地笔记只有自己能看。更关键的是，平台账号是别人的，说封就封，算法说变就变。

我需要一个自己的站，数据在自己手里，随时可导出，不看任何平台脸色。

同时我还有一个执念：写作入口必须够多。浏览器看到好文章能一键剪藏，Obsidian 里写好的能直接发，Claude 聊天里产出的内容也能一句话推到博客。不是三个平台三套操作，而是三个入口一个后台。

为什么选 qiaomu-blog-opensource

看了一圈开源博客项目，大部分要么是静态生成器（Hugo、Hexo），要么是重型 CMS（WordPress、Ghost）。

静态生成器的问题是没有后台，每次发文章要推代码，对内容创作者来说这不叫发布，叫部署。Ghost 和 WordPress 需要一台服务器，我不想为了一个博客每月花几十刀维护 VPS。

qiaomu 刚好卡在中间那个甜蜜点。

第一，它是一个完整的博客系统，不是静态模板。有后台管理、有编辑器、有 AI 写作辅助、有全文搜索，开箱就是一个能用的产品。

第二，技术栈全部跑在 Cloudflare 上。Workers 做计算，D1 存数据，R2 存图片。不需要服务器，月费 5 美元级别。我信任 Cloudflare 的基础设施稳定性，不会哪天凌晨被一条报警叫醒。

第三，前端是 Next.js + Tiptap 编辑器，代码质量不错，扩展起来不用从零开始。

第四，MIT 协议，fork 了就是自己的。

我 4 月 27 日 fork，4 月 28 日完成全部改造上线。

真实踩了哪些坑，怎么用 Claude Code 解决的

Fork 之后我发现，一个好的开源项目和一个好用的个人系统之间，差的不是功能，是一连串体验细节。下面是我遇到的每一个真实痛点，以及 Claude Code 帮我解决的过程。

痛点一：编辑器粘贴外链图片全部裂图

我经常从各种网站剪藏文章到博客，粘贴进编辑器后发现图片全挂了。原因很简单：第三方 CDN 有 Referer 防盗链，你的博客域名不在白名单里，图片就 403。

这个问题在任何博客系统都会遇到，但大部分选择忽略，让用户自己另存图片再上传。

我跟 Claude Code 说了需求：粘贴外链图时自动把图片拉到自家 R2，替换 src，用户无感。Claude Code 帮我实现了 lib/remote-image-rehost.ts，编辑器里加了粘贴钩子，后端加了 /api/uploads/from-url 接口。粘贴完自动弹 toast 告诉你转存了几张图。

一个下午搞定，从此再也不用手动处理图片。

痛点二：自动保存炸了，D1 报数据库损坏

这个是最凶的坑。写了一篇长文章，自动保存突然开始报 500，错误信息是 SQLITE_CORRUPT_VTAB。数据库损坏，听起来就让人后背发凉。

排查下来是 Cloudflare D1 的 FTS5 全文搜索支持不稳定。FTS5 会建 shadow tables 跟主表同步，但 D1 上这个同步机制会失步，导致每次 UPDATE posts 触发 FTS trigger 就报错。

这不是我的代码问题，是 D1 平台的已知缺陷。但文章保存不了，用户不会管是谁的 bug。

我让 Claude Code 分析了整个 FTS5 的依赖链路，写了一个迁移脚本把 FTS 相关的 trigger 和 shadow tables 干掉，搜索降级走 LIKE 模糊匹配。用户搜索体验几乎无感知差异，但 autosave 彻底恢复正常。

同时在 db/schema.sql 里把 FTS 部分注释掉并加了注释标记，等 D1 未来修好了再开启。

痛点三：tooltip 反应太慢，整个后台感觉迟钝

后台管理页面有大量图标按钮，鼠标悬停想看提示文字，要等将近一秒才出来。这不是网络慢，是浏览器原生 title 属性的硬伤，Chrome 的 tooltip 延迟 500 毫秒起步，而且不可配置。

一个两个按钮还好，后台文章列表每行就有 8 个操作按钮，编辑器工具栏十几个，加起来全站 55 个以上。整体手感就是迟钝。

这个问题我交给 Claude Code 用多 Agent 模式处理。先让一个 Agent 扫全站所有 title 属性的分布，另一个 Agent 分析现有 UI 组件模式（Toast、Modal、Dropdown 的实现方式），然后设计方案。

最终方案是写一个 35 行的 <Tooltip> 组件，100 毫秒显示延迟，零新依赖，支持四个方向定位，自动适配四套主题。然后启动 7 个 Agent 并行替换 22 个文件。

从分析到全部替换完成加 build 通过，一个下午。如果手动一个个改，光 PostRow.tsx 里 26 个 tooltip 就够喝一壶的。

痛点四：重复部署报错 table already exists

上游的部署脚本 cf-deploy.sh 每次都会重跑 db/schema.sql，但 SQL 里是 CREATE TABLE 不是 CREATE TABLE IF NOT EXISTS。第一次部署没问题，第二次就炸。

Claude Code 把 schema.sql 全部改成幂等写法，同时在 CLAUDE.md 里记录了推荐的部署命令：绕过 npm script，直接用 npx opennextjs-cloudflare deploy，只在表结构变更时才单独跑 migration。

痛点五：剪藏工具不够好用

Chrome Clipper 剪藏网页后需要手动去后台找草稿。表格丰富的页面剪藏出来格式丢失。

两个小改动解决：剪藏成功后自动跳转到编辑器打开草稿，Markdown 转换增加 GFM 表格支持。

Claude Code 在这个项目里的真实角色

说完痛点，聊聊 Claude Code 到底在这里起了什么作用。

不是让 AI 从零写一个博客，那不现实，也没必要。是在一个已有 8000 多行代码的项目里，快速理解上下文、定位问题、生成方案、并行执行。

几个让我印象深刻的场景。

第一，多 Agent 并行。tooltip 优化那次，7 个 Agent 同时改 22 个文件，每个 Agent 拿到组件规格说明和目标文件列表，独立完成替换。我只需要最后跑一次 build 验证。这种并行能力是人工做不到的。

第二，全局一致性。改 brand 从乔木到晨启 AI，涉及几十个文件里的中文文案、英文变量名、配置项。Claude Code 一次性扫完所有匹配项，不会漏。

第三，架构感知。它不是在做文本替换，它理解 Toast 组件用了 Context + Provider 模式，理解 Modal 的 z-index 层级约定是 z-50，理解 Tiptap NodeView 里不能随便包 span。这些上下文让生成的代码能直接合入，不用我逐行审查基础结构问题。

第四，文档即代码。每次修复一个 Cloudflare 平台坑，Claude Code 会同步更新 CLAUDE.md 的已知坑章节。下次再遇到类似问题，上下文已经在那了。

最终成果

2 天，25 个 commit，134 个文件变更，12000 多行新代码。

一个跑在 Cloudflare 上的个人博客系统，月费 5 美元，数据全在自己手里。

三个写作入口：浏览器剪藏、Obsidian 一键发、Claude Skill 直发。

所有体验痛点清零：图片自动转存、数据库稳定保存、tooltip 秒级响应、部署一行命令。

项目已开源：https://github.com/JavaArthur/chen-blog-opensource

赶快去试试吧。如果你也有自建博客的想法，fork 这个项目比从零开始靠谱得多。期待你回来留言反馈。