我做了个「建站搭子」skill：对话 4 轮，5 种个人网站一键生成

兄弟们，我又来了。今天分享我做的另一个 skill——「建站搭子」。
上次发的「开源搭子」是帮你把项目推到 GitHub；今天这个是帮你从 0 搭一个个人网站。
全程对话式引导，4 轮对话搞定 5 种网站。

📦 开源仓库地址：

👉 https://github.com/CoderWanFeng/wanfeng-skills/tree/main/skills/personal-website-builder

Star 一下 ⭐、Clone 一下，跑起来就是你自己的"建站搭子"。

先说结论：

不会写代码、不知道 Hexo / VitePress / Vue 3 是啥——都没关系。
你只需要告诉 AI 4 句话：「我要什么类型网站」、「选哪个框架」、「网站叫啥」、「建在哪个目录」，剩下的我帮你搞定。

一、为什么做这个 skill？

我带过 100+ 想建个人网站的学员，发现一个很普遍的现象：

80% 的人不是没需求，而是死在"选框架"这一步。

他们会卡在：

❌ 听说 Hexo 好，但不知道和 Hugo 有什么区别
❌ 看 VitePress 漂亮，但不知道够不够做博客
❌ 想做 AI 导航站，找不到现成模板
❌ 决定用 Hexo 了，又卡在"装主题"
❌ 终于跑起来，又不知道"怎么写第一篇"
❌ 最后网站建好了，发现只是个 hello-world.md

这些"小障碍" 阻挡了 90% 的人真正开始写内容。

所以我做了 personal-website-builder skill，全程对话式引导 + 4 轮搞定。

📦 仓库：https://github.com/CoderWanFeng/wanfeng-skills/tree/main/skills/personal-website-builder

二、5 种个人网站一键生成

这个 skill 支持 5 种 常见个人网站类型：

类型	适合	推荐框架	难度
1. 个人博客	写作 / 记录 / 长期沉淀	⭐ Hexo + Butterfly	⭐
2. 知识库	教程 / 文档 / API 参考	⭐ VitePress	⭐⭐
3. AI 导航站	AI 工具分类展示	⭐ Vue 3 + Vite	⭐⭐
4. 个人作品集	设计师 / 摄影师展示作品	⭐ VitePress	⭐
5. 个人简历站	求职 / 找合作	⭐ 纯静态 HTML	⭐

还有第 6 个选项：自定义（AI 帮你判断该用哪个方案）

三、4 轮对话搞定一切

第 1 轮：选网站类型

AI：你好，我是「个人网站创建助手」。我会通过 4 轮对话帮你搭好一个个人网站。
    先告诉我你想做什么类型的网站？以下是常见选择：

1. ⭐ 个人博客型（Hexo 框架，Markdown 写作，主题丰富）
2. 知识库型（VitePress 框架，文档站风格，左侧导航 + 全文搜索）
3. AI 导航网站（Vue 3 + Vite，分类展示 AI 工具，自带后台配置）
4. 个人作品集（VitePress 框架，项目展示为主）
5. 个人简历站（纯静态 HTML，单页简历）
6. 自定义（直接告诉我你想做什么）

请回复数字或名称，我继续引导你。

每轮只问 1 个问题，不灌信息。

第 2 轮：选技术栈

AI 不会把 5 种框架全列给你（那是"灌信息"），只列你选的那类网站对应的几个框架：

如果你选了「个人博客型」，就只给你看：

个人博客型有 3 个常见框架可选：
1. ⭐ Hexo（Node.js，主题生态最丰富，中文文档完善，默认主题：Butterfly）
2. VuePress（Vue 驱动，适合已经有 Vue 经验的人）
3. Hugo（Go 编译，速度最快，但主题偏英文）

推荐选 Hexo，新手友好、主题多、部署简单。

有 ⭐ 标记的推荐选项，减少你的决策成本。

第 3 轮：收集网站基础信息

AI 一个个问：

1
2
3

📝 你的网站叫什么名字？
📄 用一句话描述你的网站是做什么的？
👤 你的名字是？（用于文章署名）

注意：作者名永远不预设真人名/IP，用 Your Name 占位符，让你自己去改。

第 4 轮：选目标目录

你的网站要创建到哪个目录？

当前工作目录是：`{当前工作目录}`

可选方案：
1. ⭐ 在当前目录下新建子目录（推荐：./my-website/）
2. 在当前目录下新建自定义名字的子目录
3. 指定一个绝对路径

四、5 个让我自己用了都觉得爽的细节

1. 默认推荐用 ⭐ 标记，新手不用纠结

每个问题都有"推荐选项"，对小白最友好——你不知道选啥，跟着 ⭐ 走就行。

2. 5 步确认 + 强制汇总

AI 不会上来就动手。建之前会给你一份"汇总清单"：

📋 网站类型：个人博客
🎨 技术栈：Hexo
📝 网站名称：我的小屋
📄 网站描述：记录学习路上的点点滴滴
👤 作者名：晚枫
📁 创建目录：/Users/xxx/my-website/

确认创建吗？回复「确认」或「yes」开始；回复「取消」退出。

不"先斩后奏"，每一步都可逆。

3. 删除默认示例文章（避坑设计）

框架 init 后通常会留下 hello-world.md 等示例，全部删掉。不让用户面对"系统默认示例 + 一脸懵"的局面。

4. 第一篇不是 Hello World，是"如何使用本博客"

创建完，AI 直接生成一篇中文"使用指南"作为第一篇文章（带英文跳转版本），让用户打开博客就能用。

# 这是你的新博客

这个博客基于 **Hexo** 搭建。下面 3 步开始用：

## 1. 本地预览
npx hexo server
→ http://localhost:4000

## 2. 写第一篇文章
npx hexo new "我的第一篇博客"
→ 编辑 source/_posts/我的第一篇博客.md

## 3. 部署上线
→ 参考 README.md 里的 Vercel 步骤

5. 强制启动本地预览

创建完必须自动跑 hexo server / vitepress dev / vite，直接打开浏览器让你看到效果。

不是"建好就完事"，是"建好你立刻能看见"。

五、怎么用这个 skill？

最快的方式：

# 1. 克隆仓库
git clone https://github.com/CoderWanFeng/wanfeng-skills.git

# 2. 切换到 skill 目录
cd wanfeng-skills/skills/personal-website-builder

# 3. 打开 SKILL.md 看你想跑的流程
# - 全流程：从 SKILL.md 第 20 行开始
# - 执行步骤：从第 196 行开始

或者直接看仓库的 SKILL.md：

👉 https://github.com/CoderWanFeng/wanfeng-skills/tree/main/skills/personal-website-builder

实战对话示例

✅ 用户：我想建一个个人博客
✅ AI：好的。个人博客推荐 Hexo + Butterfly 主题，确定吗？
✅ 用户：确定
✅ AI：网站叫什么名字？
✅ 用户：我的小屋
✅ AI：网站描述？
✅ 用户：记录学习路上的点点滴滴
✅ AI：作者名？
✅ 用户：晚枫
✅ AI：建在当前目录 ./my-website/，可以吗？
✅ 用户：可以
✅ AI：好的，创建中……（3 分钟后）预览已打开 → http://localhost:4000

六、这个 skill 适合谁？

适合	不太适合
第一次建个人网站的小白	已经有个人网站的人
不知道怎么选框架的人	已经有明确技术栈偏好的资深用户
想用"对话"驱动建站的人	想要"自己写代码定制"的人
想做 AI 导航站 / 知识库 / 博客	想做复杂 web 应用（这个 skill 只做静态站）
老师 / 培训师（用 AI 给学员批量建）	大型团队项目（应该用企业级方案）

七、和「开源搭子」的配合

我做的两个 skill 正好是前后衔接：

【建站搭子】→ 帮你从 0 搭一个个人网站
                ↓
       你的网站有了，代码在本地
                ↓
【开源搭子】→ 帮你把网站推到 GitHub / Gitee
                ↓
       你的网站有了，还有了开源版本
                ↓
       AI 可以推荐你，更多人认识你

这就是为什么我把这两个 skill 放在同一个仓库 wanfeng-skills 里。建站 + 开源 = 个人开发者起飞的标准路径。

📦 整套 skill 都在这里：https://github.com/CoderWanFeng/wanfeng-skills

八、为什么"对话式建站"是未来？

说点"虚"的，但很重要。

未来 3 年的趋势：AI + 工具 = 一键生成。ChatGPT 不会写代码帮你建站，但 AI + 写好流程的 skill 可以。
个人网站是 AI 时代的"个人 IP 资产"。公众号会被限流、知乎会被折叠，但你自己的网站，AI 可以随时抓取推荐。
建站的难点从来不是技术，是"我到底要写什么"。这个 skill 把技术摩擦降到 0，让你专注在内容本身。