牧屋诞生记：用 Claude Code + DeepSeek V4 从零搭建一个博客

2026 年 7 月 9 日，凌晨 0 点 44 分，我 push 了牧屋博客的第一个 commit。

27 个文件，5 篇文章，双主题切换，视差背景，环境音效，自定义字体，Cloudflare Pages 自动部署。

一个人 + 一个 AI，一个晚上。

这不是炫耀——这是记录。记录一个 23 岁的独立游戏开发者，如何用 AI 把“我想要一个博客”变成“我的博客在线了”。

为什么从头造轮子？

市面上搭博客的方案太多了：Hugo + GitHub Pages、Hexo、VuePress、WordPress……选一个成熟的模板，改改配置，半小时上线。

但我是做游戏开发的。我需要一个我能完全控制的、体现我设计审美的空间。不是寄居在 CSDN 或掘金上的一亩三分地——那些平台方便，但你的内容被算法控制，你永远不知道哪天平台会改变规则。

所以我定了三个约束：

1. 所有代码自己写——不套用任何现成主题
2. 设计从场景出发——不是“看起来不错”，而是“它承载什么情绪”
3. AI 只是 builder，我是 architect——所有设计决策我来做，AI 负责实现

技术选型：第一性原理推导

不用类比——不因为“大家都用 Next.js”就选 Next.js。回到原点：博客是什么？

一组结构化内容（Markdown），通过模板渲染成静态 HTML，放在可访问的服务器上。

从这个定义出发：

• 需要的内容：Markdown 文章 + 元数据
• 需要的渲染：模板引擎 + 构建系统
• 需要的部署：静态文件托管 + 全球 CDN

框架：Astro 7。默认零 JS 输出，内容型网站的天然选择。Content Layer API 让 Markdown 管理变成类型安全的工程实践，不是“往文件夹里扔文件”。

部署：Cloudflare Pages。push 即部署，全球 CDN，免费无限带宽。和 Astro 的静态输出天然匹配。

样式：手写 CSS。从 design tokens（颜色、间距、字体）到组件样式，全自己写。Tailwind 更快，但我不需要“快”——我需要“我想要的”。

AI 协作模式：建筑师 + 工匠

这是这篇记录最重要的部分。我用的不是“让 AI 帮我写代码”的协作模式——那是把 AI 当工具人。我用的模式是：

角色	谁	做什么
建筑师	我	技术选型、设计方向、体验决策、“不做什么”的边界
工匠	Claude Code + DeepSeek V4	代码实现、文件操作、构建调试、CSS 微调

整个过程中，没有一行代码是我亲手写的。但每个设计决策都是我做的。

举几个例子：

• 双主题的色板：我定的——日间草原暖色、夜间木屋烛光。AI 生成了完整的 CSS 变量方案。
• 视差背景：我提出“鼠标移动时有景深感”。AI 用两张 AI 生成的场景图 + CSS transform 实现了三层视差。
• 环境音效切换：我要求“白天和夜晚听到的不一样”。AI 用 Web Audio API 生成了两套环境音（草地微风 + 鸟鸣 / 暖炉嗡鸣 + 壁炉噼啪），根据时间自动切换。
• 字体选择：我想用 Cormorant Garamond 做英文展示字、Noto Serif SC 做中文正文、Long Cang 做手写点缀——AI 负责配置 font-face 和 fallback 链。

这不是“AI 帮我省了时间”——这是认知劳动分工。我把机械执行交给 AI，把战略决策留给自己。我的时间省在设计上，不是省在“不想做”上。

经历了什么坑

说一个真实的：7 月 28 日，博客经历了一次 Cloudflare Pages 的部署回退。三篇文章的内容丢失了——包括你现在看到的这篇。

当时的心情是崩溃的。但冷静下来后的处理方式，恰好证明了这套 AI 协作模式的价值：

1. 从 White-House 的知识库里调出了原始阅读笔记——牧屋博客的内容源头不在博客仓库里，在白屋的 prophet/thoughts/ 里。丢失的是渲染结果，源素材完好无损。
2. 用 git log 还原了完整的开发时间线——17 次提交，从 07-09 凌晨的初始构建，到 07-28 下午的逐步恢复。
3. AI 重写了丢失的文章——但不是从零编造，是基于我自己的阅读笔记、知识卡片和设计记录来重建的。

这就是为什么我坚持“源素材归我，渲染归 AI”——当渲染丢了，素材还在。

当前的牧屋

现在是 2026 年 7 月底，牧屋博客有：

• 双主题自动切换（6:00 日间 / 18:00 夜间）
• 三层视差背景 + 环境音效
• 四维分类系统（项目 × 类型 × 技术 × 难度）
• 自动标签云（≥2 篇文章的标签才显示）
• 代码高亮（Shiki 双主题）
• 响应式 + 毛玻璃 + 滚动动画
• 0 JS 默认输出（非交互部分）

未来计划：Diorama 多层视差、Mascot（一只边牧）、音效按钮 UI 优化。

这个博客证明了什么

一个人，一个晚上，一个 AI 合作伙伴，从零到上线。

不是“AI 代劳”——我做了所有应该由人做的决策。不是“一个人硬扛”——AI 做了所有可以由机器做的执行。

这就是我想展示的能力：不是“我会写代码”，而是“我知道什么时候让人做，什么时候让 AI 做，以及如何让两者协同”。

这个能力，比会写 React 重要一百倍。