Vibe Coding实战：用AI从零搭建个人博客

什么是Vibe Coding？

Vibe Coding是一种新的编程方式——你描述需求，AI来写代码。你主要负责思考、决策和审查。

这篇文章记录了我用Vibe Coding从零搭建这个博客的过程。

第一步：选择技术栈

我告诉Claude：“我想搭一个个人博客，要求轻量、快速、SEO友好。”

Claude推荐了几个方案：

• Hugo：Go编写，速度快，但模板语法不太直观
• Jekyll：Ruby编写，GitHub Pages原生支持
• Astro：新框架，零JS输出，支持多框架

我选择了Astro，原因：

• 零JavaScript输出，页面加载极快
• 原生支持Markdown，写文章方便
• 现代化的开发体验

第二步：项目初始化

我运行了以下命令：

npx create-astro@latest blog -- --template minimal
cd blog
npm install

Astro的CLI体验很好，交互式引导完成了项目创建。

第三步：配置内容集合

Astro v6使用Content Collections来管理博客文章。我需要：

1. 创建 src/content.config.ts 定义文章schema
2. 在 src/content/blog/ 目录下写Markdown文章
3. 在页面中查询并展示文章列表

这部分工作，我基本是描述需求，Claude来写代码。

第四步：编写文章

5篇占位文章，每篇300字以上。这里我发挥了Vibe Coding的优势：

• 我提供大纲和关键点
• Claude扩展成完整的文章
• 我review并调整细节

整个过程不到1小时就完成了5篇文章。

第五步：部署到服务器

服务器是腾讯云轻量应用服务器，Ubuntu 24.04。部署步骤：

1. 在服务器上安装Node.js 22
2. 克隆代码
3. 运行 npm run build
4. 用Nginx serve静态文件

遇到的问题和解决方案

问题1：Node.js版本不兼容

Astro v6要求Node.js >= 22.12.0，服务器上是v20。

解决：使用NodeSource安装Node.js 22。

问题2：内存不足

服务器只有2GB内存，build时内存不够。

解决：添加了4GB Swap，顺利构建。

问题3：Nginx配置

需要配置Nginx serve静态文件，支持SPA路由。

解决：添加 try_files 配置，支持客户端路由。

总结

Vibe Coding确实能大幅提升开发效率。以前可能需要1天的工作，现在2-3小时就能完成。

但要注意：

• 不能完全依赖AI：核心逻辑需要自己理解
• 要review代码：AI可能有bug或安全问题
• 持续学习：了解原理才能更好地使用AI

这就是Vibe Coding的魅力——让编程变得更有趣、更高效！