原文内容

Claude Code 助我打造“零代码、自动化”个人博客网站

1. 背景与需求

很多时候我们想搭建一个属于自己的 GitHub Pages (github.io) 个人网站，用来记录学习笔记、生活日常或展示项目。但传统开发面临三大痛点：

• 前端门槛高：即使有现成模板，想增加一个个性化组件（如日历、抽奖等），依然需要去啃 HTML、CSS 和 JavaScript。

• 维护成本高：每次写了新博客，都要手动改代码、调样式、本地构建再 push，步骤繁琐。

• 多项目集成难：想把之前写过的其他独立项目（比如一些小工具、小游戏）移植进个人网站时，页眉、页脚和整体画风极其难适配。

2. 核心 AI 工具链

• 主导工具：Claude Code（基于终端的 CLI 智能 Agent，拥有超强的本地文件编辑、终端命令执行和多文件上下文理解能力）。

• 辅助工具：其他辅助型 Agent 工具。

• 部署平台：GitHub Pages (github.io)。

3. 核心功能实现与工作流

功能一：自然语言驱动的功能热插拔（零前端基础）

• 使用方式：直接在终端向 Claude Code 下达自然语言指令。例如：“帮我在网站首页右侧加一个极简风的日历挂件” 或 “在互动页加一个转盘抽奖功能”。

• AI 的全自动处理：Claude Code 会自动扫描现有的项目结构，理解当前的样式风格（CSS），然后精准地在目标 HTML/React 组件中插入结构，并用原生 JS 补全逻辑。全程不需要我自己写一行 HTML、CSS 或 JS。

功能二：构建 Skill 实现博客内容“定时自动上新”

• 使用方式：我利用 Claude Code 组合并构建了一个自动化的技能流（Skill）。

• 工作流设计：

  1. 指定监听：指定一个本地或特定的 Markdown 暂存文件。

  2. 定时检测：脚本定时检测该文件中是否有新的内容写入。

  3. AI 智能整理：一旦发现新内容，AI 会自动提取摘要、规范格式、自动补全当前时间和作者信息。

  4. 自动注入与样式适配：AI 自动将整理好的文章追加到网站的博客界面，并完美适配既有样式，实现全自动更新，无需手动改动任何代码。

功能三：异构项目的快捷接口调用与画风移植

• 使用方式：当需要将一个完全独立的已有项目接入当前网站时，往往会因为导航栏不统一、样式冲突而头疼。

• 工作流设计：我把已有项目的代码上下文丢给 AI，并给出当前网站的样式规范。AI 能够快捷高效地重构独立项目的页眉、页脚和色彩变量，提供统一的接入接口，让异构项目在几分钟内无缝融入主站画风。

4. 成果与收获

• 效率暴涨：原本可能需要折腾几天的“改样式、调接口”工作，在 Claude Code 的辅助下缩短到了分钟级。

• 降低心智负担：我可以把 100% 的精力放在网站功能设计和内容创作上，把底层的语法实现、文件读写、环境部署彻底交给了 AI。

• 技能提升：在看 Claude Code 自动修改代码的过程中，顺便直观地学会了许多优秀的前端组件解耦和 CI/CD 自动化处理的思路。

5. 心得与建议

1. 拥抱 CLI Agent：像 Claude Code 这种能直接读写本地文件并运行命令的工具，非常适合用来做网站这种多文件协同的项目，比单纯在网页端复制粘贴代码片段效率高得多。

2. 提示词要“结果导向”：在要求 AI 迁移项目或加功能时，多给它一些现有网站的优质代码范例，它模仿出的画风会极其统一。

3. 做好 Git 协同：Agent 工具威力很大，但偶尔也会“大力出奇迹”改错地方。建议每次让 AI 大改前，保持当前工作区 git clean，方便随时回滚。

4. 项目地址: largeoyos.github.io