如何在 1 小时内，用 Vibe Coding 从零搭建个人博客

我原来的博客跑在阿里云轻量服务器上，WordPress，香港节点。

能用，但维护很烦。想用 AI 发布内容，流程繁琐；想改个样式，要登后台、找主题、调插件。每年还要续服务器的钱。

今天我把它彻底迁走了。新站用 Astro 写，部署在 Cloudflare Pages，域名也在 Cloudflare 买的。全程没有用任何现成模板，纯 Vibe Coding。大概花了 1 小时。

这篇文章是完整记录。

先想清楚：我要什么

很多人一上来就问”用什么框架”，但更重要的问题是：我需要什么功能？

我的答案很简单：

能放文章，能放图片
加载快
维护成本低，最好免费
方便用 AI 发布内容

这决定了选择：静态网站。不需要数据库，不需要服务端，一堆 HTML 文件扔到 CDN 上就行。

什么是静态网站？ 和 WordPress 不同，静态网站没有服务端程序实时运行，文章是提前编译好的 HTML 文件。加载更快，不会被黑，也不需要维护服务器。代价是：发文章需要走一个”写 → 构建 → 部署”的小流程，但配合 AI 和 GitHub 可以做到几乎无感。

技术栈：Cloudflare 全家桶

Vibe Coding 最擅长的事，就是把一套免费工具组合成一个完整系统。

用途	工具	费用
前端框架	Astro + Tailwind CSS v4	免费
内容格式	Markdown	免费
部署	Cloudflare Pages	免费
域名	Cloudflare Registrar	成本价
SSL 证书	Cloudflare 自动签发	免费

Cloudflare 的免费额度对个人博客来说几乎是永久够用的：Pages 无限部署次数，每天 10 万次请求，R2 存储 10GB，D1 数据库 5GB。流量大了也不用换架构，这套直接撑得住。

第一步：Dribbble + Figma AI 搞定设计（15 分钟）

这是 Vibe Coding 最容易被跳过、也最值得做的一步。

如果你直接告诉 AI “帮我做一个博客”，它会给你一个通用的、毫无个性的东西。你来回改十几遍，效率反而更低。

正确姿势是分三层：

第一层：Dribbble 找灵感

去 Dribbble 搜 blog design，找一个自己喜欢的风格截图保存下来。我找到了一个简洁、深绿配色的博客样式，感觉对了就是它。

第二层：Figma AI 生成设计稿

把截图丢给 Figma AI，让它模仿这个风格生成自己的设计稿。不是直接复制，而是”同风格，不同内容”——这个过程叫 Vibe Design。

Figma AI 帮我生成了首页、博客列表、文章详情、About 四个页面的设计稿。

第三层：从设计稿提取精确色值

有了 Figma 设计稿，就能拿到精确参数：

背景：#F5F5F0（米白，视觉舒适不刺眼）
主色：#1B5E57（深绿，沉稳有质感）
强调色：#E8824A（橙色，点缀用，不抢镜）
卡片背景：#FFFFFF
次要文字：#6B7280

这些色值不是拍脑袋定的，是从 Dribbble 参考图 → Figma AI → 色值提取，一路推导出来的。

为什么这步这么重要？ 因为有了精确的设计稿和色值，给 Claude Code 写 prompt 才能写得细致，生成质量才高。给 AI 的信息越具体，它出活越快、越准。

第二步：Claude Code 生成项目（20 分钟）

Claude Code 是 Anthropic 出的 AI 编程工具，直接在终端里运行，能帮你写代码、改文件、跑命令。

# 安装
sudo npm install -g @anthropic-ai/claude-code

# 进入你的项目目录，启动
claude

把 Figma 截图和需求描述一起发给它。Prompt 里要包含：技术栈、精确色值、每个页面的组件描述。

实操经验一：Prompt 要分两条发

Claude Code 有单次输出的 token 限制，需求太长直接报错。把 prompt 拆成两条：

第一条：项目框架、配置文件、导航栏、Footer、示例文章
第二条：所有页面的具体实现（首页、博客列表、文章详情、About）

第一条跑完确认没问题，再发第二条。

实操经验二：调试时不要在对话里发截图

遇到问题直接用文字描述，不要截图。session 里图片多了会报 dimension limit 错误，用文字描述反而更清晰。

项目生成完成后：

npm install
npm run dev

打开 localhost:4321，第一眼看到自己设计的博客跑起来，这个感觉值得记一下。

第三步：迁移旧博客内容（10 分钟）

WordPress 后台 → 工具 → 导出 → 下载 XML 文件。

然后用这个工具一键转换：

cd ~/Desktop
npx wordpress-export-to-markdown --input="你的导出文件.xml"

它会把所有文章转成 .md 文件，图片也一并下载到本地。

转换完成后：

.md 文件 → 复制到 src/content/blog/
图片 → 复制到 public/images/

没有旧博客也没关系。 跳过这步，直接在 src/content/blog/ 里新建一个 .md 文件，就是你的第一篇文章。Markdown 格式非常简单，AI 可以直接帮你写。

第四步：部署到 Cloudflare Pages（5 分钟）

先把代码推到 GitHub：

git init
git add .
git commit -m "init: my blog"
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -u origin main

然后在 Cloudflare 控制台：

Workers & Pages → Create → Connect to Git
选刚才的 GitHub 仓库
构建命令：npm run build，输出目录：dist
点部署，等约 2 分钟

部署完成后，Cloudflare 会给你一个 xxx.pages.dev 的临时地址，可以直接访问。

第五步：绑定域名（5 分钟）

在 Cloudflare 买域名有一个巨大优势：DNS 自动配好，不需要手动改 NS 记录。

Domain Registration → Register Domains → 搜索域名 → 购买。Cloudflare 卖成本价，无溢价。

买完之后：Pages 项目 → Custom domains → 填入你的域名 → Confirm。自动创建 DNS 记录，自动签发 SSL 证书，几分钟后上线。

一个小优化： 在 public/ 目录下新建 _redirects 文件：

/ /en/ 301

Cloudflare 在 HTTP 层做 301 跳转，访问根路径完全无感知，对 SEO 也更友好。

之后：用 AI 发文章的工作流

迁移完成只是开始。现在发一篇文章的流程是：

用 AI 写好 Markdown 格式的文章
→ 保存到 src/content/blog/
→ git push
→ Cloudflare 自动触发部署（约 2 分钟）
→ 文章上线

不需要登后台，不需要点发布按钮。纯文本流，AI 友好。

完整时间记录

环节	耗时
Dribbble 找灵感 + Figma AI 设计	15 分钟
Claude Code 生成项目	20 分钟
旧博客内容迁移	10 分钟
Cloudflare 部署 + 域名	10 分钟
调试和细节优化	5 分钟
合计	约 1 小时

Vibe Coding 的前提是：你要知道自己想要什么。

设计上，Dribbble 帮你找感觉，Figma AI 帮你落地；开发上，Claude Code 帮你实现；部署上，Cloudflare 帮你运维。

你需要做的，只是把这些工具串起来，然后做决策。

你不需要是前端工程师，才能拥有一个好看的、真正属于自己的个人网站。