嗨站  /  ai编程实践 /  用 Claude Code 搭建个人技术博客:从想法到上线的完整过程

用 Claude Code 搭建个人技术博客:从想法到上线的完整过程

最近折腾了一段时间,终于把自己的技术博客给搞上线了。整个过程比我预想的顺利很多——主要是因为我把大部分重复性的工作都交给了 Claude Code 来处理。今天把这段经历整理出来,分享给同样想搭博客但不知道从哪下手的朋友。

为什么想搭个博客,为什么选这个组合

说实话,”搭博客”这个念头在我脑子里飘了很久了。记笔记总是散落在各种工具里,想系统整理又嫌麻烦,看到别人的技术博客写得有条有理,心里痒痒的。

选 WordPress 倒不是因为它有多时髦——恰恰相反,它足够成熟、插件生态完善,对于一个”搭好了能长期用”的个人博客来说,稳定比什么都重要。

选 Claude Code 是因为我不想花大量时间手写主题 CSS。Claude Code 的优势在于:你可以用自然语言描述你想要什么,它帮你生成代码、执行操作,甚至可以自定义一套工作流指令。这个”可以自定义工作流”的特性,是整件事情能跑通的关键。

第一步:表达你的想法(从 ~init 开始)

Claude Code 项目里有个机制:你可以在项目根目录下放一个 .claude/CLAUDE.md 文件,里面定义 AI 在这个项目里的行为规范和自定义指令。我在里面设计了一个 ~init 指令,触发后 Claude 会引导我一步步把博客配置说清楚。

第一次运行 ~init 的时候,Claude 开始问我:博客定位是什么、技术方向、设计风格偏好、布局结构、需要哪些功能。我在”设计风格”那里回答了”复古,想要那种老电脑的感觉”。没想到 Claude 直接给我规划出了一个 Windows 98 风格的方案——主色 #000080(标志性的 Windows 蓝)、背景 #C0C0C0(银灰色桌面)、强调色 #008080(经典桌面绿)、字体用 Courier New 等宽字体、所有卡片和按钮做 3D 凸起边框效果。

这个方案让我很惊喜——它不是随便给个”复古配色”,而是还原了一个具体的时代感。后续这些配置都自动保存到了 .claude/blog-config.md 里,后面每次执行指令都会读取这份配置,不用重复说明。

核心:CLAUDE.md 的编写思路

这是整个项目里我花时间最多、但也最值得的一部分。CLAUDE.md 本质上是你给 AI 写的说明书。你把自己的工作流程、常用操作、专业术语、期望行为都写进去,AI 在这个项目里就按你的规则来,不会每次都要你从头解释。

我的 CLAUDE.md 核心设计了五个指令:

~init    引导式采集博客配置:定位、风格、布局、功能需求
~update  读取已有配置,引导式提问,逐项修改
~publish 采集标题大纲 → 自动生成内容 → SEO优化 → 推送WordPress
~copy    抓取网页内容 → 清洗排版 → 确认后发布
~help    显示所有可用指令说明

除了指令,CLAUDE.md 里还定义了 Agent 编排——不同任务由哪个”专业角色”来处理:Plan 负责架构规划,CMS Developer 负责 WordPress 主题开发,Frontend Developer 负责前端样式,UX Architect 负责 CSS 系统,Technical Writer 负责文章撰写,SEO Specialist 负责 SEO 优化。

为什么要分这么多 Agent?因为不同任务的关注点不同。写文章时不希望 AI 去考虑代码质量,调 CSS 时不希望它去改数据库结构。分角色是为了让每次操作的输出更专注、更可控。这套 CLAUDE.md 写好之后,它其实就是一份工程文档,只不过读者是 AI 而不是人。

WordPress 的安装和主题开发

WordPress 本地环境用 LocalWP 或 MAMP 都能快速跑起来,几分钟的事情。如果有服务器,用宝塔面板配一个也很方便。我这里用的是 Docker Compose 方式,一个 docker-compose.yml 文件直接把 WordPress + MySQL 全拉起来。

有意思的是主题开发这部分。我的自定义主题放在 wp-content/themes/haiblog/,这个主题是 Claude Code 完全帮我生成的——我没有手写过一行 CSS。做法是:在 CLAUDE.md 里定义好配色和风格规范,然后在对话里说”帮我开发一个符合当前配置的 WordPress 主题”,Claude 就开始生成 style.cssfunctions.php、各种模板文件。

Windows 98 那个 3D 边框效果,在 CSS 里是用 border 属性叠加实现的:光源在左上角,所以左边和上边用亮色,右边和下边用暗色,视觉上就有了凸起感。折腾了一会儿的地方是左侧目录栏——要求文章详情页左边固定一个 TOC,右边是正文,移动端折叠成顶部按钮。第一版代码在某些浏览器宽度下会错位,来回调了两三次才稳定。

迭代过程:从定义到发布

第一阶段:运行 ~init,把博客配置说清楚,Claude 生成方案并保存配置。

第二阶段:Claude Code 根据配置开发 haiblog 主题,生成主题文件,在本地 WordPress 里激活,打开浏览器看效果。

第三阶段:哪里不满意就用 ~update。比如觉得正文字体稍微大了一点,说”把文章正文字号调小两号,行距稍微放松一点”,Claude 直接改对应的 CSS,不用找文件、不用记类名。

第四阶段:内容发布。用 ~publish 指令,告诉 Claude 标题和大纲,它生成完整文章、SEO 优化标题和描述,然后通过 WordPress REST API 推送发布。

整个过程里最有价值的一点是:每次操作都在 CLAUDE.md 定义的框架内运行,不用重复解释上下文。

总结:CLAUDE.md 就是你给 AI 的说明书

用 Claude Code 搭博客这件事,核心不在于 AI 有多聪明,而在于你有没有把自己的需求说清楚。CLAUDE.md 的意义在于:你只需要说清楚一次,后面每次操作都不用重复。如果你把工作流程、风格规范、指令系统都写进去,AI 在这个项目里就有了一致的”记忆”和”行为准则”。

这套方案适合:想搭技术博客、有一定技术背景(知道 WordPress 是什么)、但不想花太多时间在前端细节上的朋友。可以先从写 CLAUDE.md 开始——想清楚自己要什么,剩下的事情让 Claude Code 来做。

Leave a Comment

您的邮箱地址不会被公开。 必填项已用 * 标注