文科爸爸陪娃学游泳，顺手用手机配合 CNB + CodeBuddy 做了个在线阅读站

你没看错：一个不懂代码的文科生，用碎片时间，零代码搭出了一个《聊斋志异》在线阅读站——原文、现代文、英文三语对照，移动优先，还带一键自动部署。

全文是真实操作记录：我提了什么需求 → AI 怎么响应 → 我怎么审核 → 效果如何，按时间线完整还原，所有提示词都贴给你，方便复现。

项目开源在：https://cnb.cool/historyhub/lzzy ，方便大家时间戳级打假。

先看效果#

缘起：一节游泳课引发的网站#

先交代一下背景，我家小孩最近在学游泳，每周都要送去泳池。今天晚上，我照例在池边的椅子上干等——娃在水里扑腾，我在外面刷手机，刷到一篇「AI 编程」的文章，心痒痒。

我是文科生，对编程的了解停留在「Ctrl+C、Ctrl+V」。但家里书架上那本《聊斋志异》我翻了无数遍，那会儿脑子里突然冒出一个念头：能不能用手机AI写代码，搭一个在线阅读站？ 以后想读哪篇读哪篇，还能给娃看看蒲松龄的鬼故事。

话不多说，几十分钟娃还没下课，我已经用手机把方案盘明白了：仓库放 CNB，页面让 AI 生成，部署到腾讯云 EdgeOne。

整个过程就一句话：

在 CNB 开 Issue 提需求 → CodeBuddy 自动写码提 PR → 我审核点「合并」→ 流水线自动部署上线

下面按时间线，一步步还原。

第一个需求：把原文录进去（Issue #1）#

说干就干，我在仓库的 Issue 页面点「新建 Issue」，标题随手填了「新增原文」，正文就写了一句话：

新增聊斋志异原文，按章节保存到md，都放在docs目录下 @CodeBuddy

发出去没多久，CodeBuddy 就在评论里回执了：

• 全书 496 篇故事按 12 卷拆分成 docs/卷一.md ~ docs/卷十二.md
• 新增 docs/聊斋志异.md 全书目录索引
• 自动提交了 PR #3：docs: 新增聊斋志异原文，按卷保存至docs目录

我点进 PR 一看，好家伙，几百个 md 文件整整齐齐。代码我是不太看得懂，但 md 文档我熟啊——确认无误，点「合并」，全文入库。

第一次体验小结：全程我只打了 20 个字，剩下的 AI 全包了。

定技术路线：外行也能装内行（Issue #2）#

网站光有内容还不够，还得长得好看、能上线。技术细节我肯定定不出来，但这难不倒我——把大概的套路告诉 AI，让它细化成文档：

用astro构建页面，用tailwindcss构建UI，仓库用cnb，生产部署到edgeone，@CodeBuddy 这个技术路线给我细化到md，保存到docs

CodeBuddy 三下五除二，把技术路线细化成文档存进 docs/：

• 页面构建：Astro v5（静态站点生成）
• UI 样式：Tailwind CSS v4（移动优先）
• 代码托管：CNB
• 生产部署：腾讯云 EdgeOne
• 还主动补了一条**「移动优先」**方案

「移动优先」这点我很满意——现在谁不是抱着手机看文章？合并 PR #4。

第二次体验小结：你负责说人话，AI 负责把它翻译成技术文档。

规划功能：把脑子里的想法全倒给 AI（Issue #5）#

接下来是重头戏：功能规划。我先把自己拍脑袋想出来的功能写上去，请 CodeBuddy 查漏补缺：

这个网站有几个功能，按章节按故事浏览书架模式。首页是今日推荐故事。每个故事支持现代文和英文。故事后面有该故事的重点古文言文字词。你看看还要加哪些工程给我完善一下功能的清单。@CodeBuddy

好家伙，CodeBuddy 一口气给我补齐了一长串清单：夜间模式、字号调节、阅读进度记忆、上一篇/下一篇、面包屑导航、全文检索……很多功能我自己都没想过。

那一刻我深刻体会到：你负责天马行空，AI 负责落地成需求清单。

运维自动化：一键部署的感觉真爽（Issue #6）#

网站做完要上线，部署又是一道门槛。但这次我有经验了——继续开 Issue：

我在eo私有仓库里有key，请构建自动化发布到eo的流水线 @CodeBuddy

CodeBuddy 写了一份 .cnb.yml 流水线配置，实现了「代码推送 → 自动构建 → 发布到 EdgeOne」的一键部署。也就是说，以后我每次合并 PR，网站自动更新，我啥都不用干。

确认后点「合并」，流水线就位。

上线冲刺：一个 Issue 触发了 3 个 PR（Issue #11）#

接下来是建站当天最刺激的一段，也是我唯一一次「翻车」的地方。

我把卷二的中文翻译准备好了，想一起做进站里，于是开了 Issue #11：

我的卷二，有md翻译了，做下业务代码，然后整站编译下，同步部署 @CodeBuddy

第一轮：接入卷二译文#

CodeBuddy 把卷二译文接入阅读页，做成了「原文 / 现代文 / 英文」三栏切换。合并 PR #12。

第二轮：优化部署#

为了部署更稳，CodeBuddy 换用了 EdgeOne Makers 新版 CLI。合并 PR #13。

第三轮：翻车与修复#

然后，熟悉的剧情来了——CI 构建失败，部署不上去了。

说实话，那一刻我慌了一下。但转念一想：反正 AI 就是干这个的，把报错丢过去就完事了。

CodeBuddy 定位问题后提交 PR #14：fix: 修复 CI 构建失败致无法部署 EdgeOne。我确认合并。

这一轮我最大的收获：AI 也不是万能的，第一次冲上线总得出点幺蛾子。但别慌，把报错原样贴给它，来回 battle 几个回合，问题就解决了。

上线！#

整站编译通过，成功同步部署到 EdgeOne。我掏出手机试了一下：书架、卷浏览、单篇阅读页三栏切换，丝滑。

到家后，配上自定义域名，就上线了，顺便开了 https。

有了 EO + CNB，网站的自动化部署体验真香，随时随地提需求，合并 PR，流水线自动部署上线。

说实话，看到自己从零折腾出来的网站真的跑起来，那一刻还挺有成就感的。一个三语对照、移动优先、自动部署的在线阅读站就这么上线了。

写攻略：过程本身也值得记录（Issue #15）#

网站上线后，我意犹未尽，想把整个过程整理成一份攻略，发到公众号，分享给同样想「零代码建站」的朋友：

把这个项目的所有 issue 操作和合并操作，按照时间线整理，给我一份我的操作攻略，我要发微信公众号，先给我整理为md文档，里面图片见站位，写要图片的注释和图片序号，我后续手工截图 @CodeBuddy ，md保存在宣传文件夹中

于是就有了你现在看到的这篇文章——它本身就是 CodeBuddy 的产物。

写在最后：几点经验 & 还能玩什么#

我踩出来的几个关键经验#

1. 先把需求讲清楚再动手。 每个需求开一个 Issue，把话说清楚，AI 的产出会准很多。谁先想清楚，谁就有主动权。
2. 一个 Issue 可以串联多轮迭代。 光 #11 一个需求就触发了 3 个 PR：接入译文 → 优化部署 → 修复构建，全程我没改一行代码。
3. AI 也会翻车，来回 battle 就完事了。 CI 构建失败那会儿我慌了一下，结果把报错丢给 CodeBuddy，分分钟定位修复。专业的事交给它，拍板的事交给我。
4. 零代码真的能上车。 全程我干的活就是：打字提需求、点确认合并。不会写代码？完全不影响。

以后还能折腾什么#

• 把剩下 11 卷的译文全部接入，做完整版双语阅读
• 加全文检索，想搜哪篇搜哪篇
• 给故事配朗读音频，当睡前故事听
• 做成微信小程序，随手就能读

这次体验最打动我的地方在于：建网站不再是程序员的专利。 一个文科爸爸，用碎片时间，就能把想法变成上线运行的网站。 希望这份攻略对你有用，也欢迎转发给同样想低成本搭站的朋友🎉