SoraShu's Blog
中文EN

新博客上线

✍️ SoraShu
blog vibe-coding
This post is also available in English: English ->

经过我的亲自指挥和 Claude Opus 4.5 的不懈努力，我耗时两天完成了新博客框架的开发与上线工作。本文用以记录这一过程。

背景

之前我的博客是基于 Hexo 搭建的，选择了一个非常花哨的主题，然后博客刚上线就断更了。当然，断更的原因并不是主题花哨，也不是我对 Hexo 不满意，而是我对写博客这件事本身失去了兴趣。后面和群友讨论他们的博客，他们有人觉得 Hexo 的性能存在问题，一部分人转向了 Hugo。我当时也想跟风试试 Hugo，但我对 Hugo 的中文博客主题都不太满意，奈何我对前端技术一窍不通，也没法自己开发主题，又搁置了。

后来 Astro 这个框架突然火了起来，并且有别于前面提到的静态网站生成器，Astro 并非为静态网站生成而设计，而是一个现代化的前端框架，允许你对网页进行高度定制化开发。越来越多的群友开始使用 Astro 重构他们的博客，效果都非常好，但我还是不懂前端技术，没法跟上这一次的重构热潮。

直到最近随着 AI Agent 的兴起，我发现借助 AI Agent 可以快速上手完全陌生领域的开发工作，并且很多时候效果比我认真学习几天后自己动手还要好，并且效率更高。并且 Vibe Coding 这个概念也随着 AI Agent 的发展逐渐兴起，我开始好奇我作为一个完全不懂前端技术的人，能否单纯靠自然语言指挥 AI Agent 来完成一个现代化博客的开发工作。

框架选型和基础配置

既然选择了 Astro 这个最新最热的框架，那么我就需要选一些最新最热的框架和组件库。于是我选择了 React 作为前端框架，Tailwind CSS 作为样式库，Shadcn UI 作为组件库，非常新潮非常现代。

由于我打算一行代码都不写，所以我需要配置好完成开发任务的 AI Agent。首先作为高贵的 GitHub Education 计划用户，我拥有免费的 GitHub Copilot Pro 订阅，虽然配额似乎并不算很高，但这个月也接近尾声且临近圣诞假，我也不需要它来帮我完成其它任务，所以放心大胆烧 token 就完事了。至于模型我选择了风评很好的 Claude Opus 4.5，虽然它的消耗倍率是 3x，但烧就完事了。

Copilot 内置于 VSCode 中，所以我打开了两年前新建的文件夹，删除了里面所有的内容，然后配置好了 Astro，Shadcn 和 Chrome DevTools 的 MCP，然后打开了 Copilot Chat，开始亲自指挥。

博客开发与上线过程

亲自指挥开发过程

根据之前群友们的经验，先 Plan 后 Implementation 是比较好的 Vibe Coding 开发流程。我在 Plan 模式下说了一个大概的需求：

我需要写一个基于astro的博客框架，要求如下：

  • 包含博客所需的基本页面，包含但不限于about页面，文章时间线，tag页面，友链页面
  • 使用shadcn作为UI组件库
  • 由于博客的内容是中英混排的，所以帮我选取合适的字体

AI Agent 很快给出了一个详细的开发计划，并给了几个更细化的建议，包括是否增加 MDX 支持，是否增加暗色模式支持，以及 SEO 和 RSS 功能。我并不认为现阶段需要 MDX 支持，但暗色模式，SEO 和 RSS 功能是必须的，所以我让 AI Agent 把这些功能都包含进去。AI Agent 很快就将这些功能加入了计划中。

接下去我亲自指挥 AI Agent 进入 Implementation 模式，它马上开始一步步实现这些功能，我只需要不断点击 “Accept” 按钮就行了。很快 AI Agent 就完成了整个博客框架的开发工作，并且帮我在本地开好了预览效果的开发服务器。

当然事情不会这么顺利，我又亲自指挥 AI Agent 修复了工作区的所有 Warning 和 Error，然后开始扮演产品经理加测试人员的角色，亲自指挥 AI Agent 修复了 UI Bug 以及完成我提出的新需求，比如增加目录组件，调整深浅色切换按钮的样式，增加数学公式支持等，最终在我烧了我这个月一半的 Token 配额后，博客框架终于达到了我的预期。

亲自部署博客

接下来我亲自进行了部署工作。我对 CI/CD 和 Cloudflare Pages 十分熟悉，所以我让 AI Agent 帮我调整了目录结构将博客的框架和内容分离开来，并且将可配置项都放到了环境变量中。于是现在的博客架构如下：

blog/
├── .env.example          # 环境变量模板
├── xxx/                  # 博客框架代码
├── yyy/                  # 还是博客框架代码
├── content@sha1hash      # 博客内容，作为 git submodule 管理
├── ...
.......

我在 GitHub 上新建了两个仓库，分别托管博客和博客内容。然后到 Cloudflare Pages 上部署博客。最后我配置好了两个仓库的 GitHub Actions 工作流，实现了博客内容更新后自动触发博客更新 submodule 到最新 commit 并触发 Cloudflare Pages 重新部署博客。

值得一题的是，虽然我对这部分内容十分熟悉，但我的亲自部署效率比起前面 AI Agent 的开发效率还是逊色不少。

亲自指挥修改

当然，博客试上线后还是暴露出不少问题，我又向 AI Agent 提出了一些修改意见和新需求，比如：

  1. 增加真正的i18n支持，而不是简单的中英文混排
  2. 优化移动端的UI布局
  3. 优化友链配置的格式，简化友链交换流程
  4. 增加 Generated AI 的提示组件

在我的亲自指挥下，AI Agent 很快就完成了这些修改工作。目前的博客基本达到了我的预期。当然，未来我还会继续亲自指挥 AI Agent 进行更多的修改和优化工作。如果你发现了什么问题，欢迎你通过页脚的联系方式告诉我，我会亲自指挥 AI Agent 进行修复。

未来的工作

我预期博客还会实现以下功能：

  • 增加评论系统
  • 增加博文的功能支持
  • 404 页面优化
  • 博客性能优化

在我的亲自指挥下，AI Agent 会逐步实现这些功能。但我这个月的 Token 配额已经烧完了，所以这些工作要等到下个月才能继续进行。

关于友链交换

由于我之前的博客主题并未实现友链页面，故之前一直没交换过友链。如果你想交换友链，请参考 友链页面的说明，向我的博客内容仓库提交 PR 即可。或者你也可以通过任何方式直接联系我。

结语

十分感谢 AI Agent 和 Claude Opus 4.5 的帮助，让我这个对前端技术一窍不通的人也能完成一个现代化博客的开发与上线工作。希望这个自己完成的博客框架能帮助我保持写博客的兴趣，不要再次断更。

评论