想做一个个人博客、知识库、AI 导航站、作品集或简历站，又不想先研究框架和部署？

我把「晚枫个人网站」Skill 发布到 SkillHub 了。你通过对话说明需求，它会依次确认网站类型、技术栈、基础信息和创建目录，再生成项目并打开本地预览。

SkillHub 发布页：晚枫个人网站

GitHub 源码：personal-website-builder

大家好，我是程序员晚枫。

很多人想做个人网站，真正卡住的往往不是写内容，而是开始之前的一串问题：

  • 写博客应该选 Hexo、Hugo，还是别的框架？
  • 整理教程和文档，用什么工具更合适？
  • 网站文件应该放在哪里？
  • 依赖怎么安装，本地预览怎么启动？
  • 网站做好以后，怎样部署成别人能访问的链接？

这些问题每一个都不算难，但连在一起，就足以让人把建站计划一拖再拖。

所以我把自己的建站流程整理成了一个 Skill：让 AI 不只告诉你怎么做，而是在你确认之后，按流程把项目真正创建出来。

现在，它已经发布到 SkillHub：

https://skillhub.cn/skills/user_bf8c5b73/wanfeng-personal-website-builder

一、这个 Skill 能做什么？

它内置了 5 类常见的个人网站，也保留了自定义需求入口。

网站类型默认方案适合场景
个人博客Hexo + Butterfly写文章、记录生活、长期更新内容
知识库VitePress教程、文档、学习笔记、项目说明书
AI 导航网站Vue 3 + Vite + Vue Router分类展示 AI 工具和资源
个人作品集纯静态 HTML + CSS展示项目、设计、摄影或其他作品
个人简历站单文件 HTML + CSS在线简历、个人介绍、打印为 PDF
自定义网站根据需求推荐博客加作品集、工具导航加博客等组合需求

你不需要先记住这些技术名词。

如果你说“我想长期写文章”，它会推荐 Hexo；如果你说“我想整理一套教程”，它会推荐 VitePress；如果你只是想做一个作品展示页，它不会再给你套一个复杂框架。

技术栈是手段，网站用途才是起点。

二、从需求到预览，一共 5 个阶段

这个 Skill 采用纯对话式引导，不弹窗，也不要求你填写一张很长的表单。

第 1 步：确认网站类型

你可以直接说“我要做个人博客”或“帮我做一个简历站”，不用从菜单开始。

Skill 会识别你的需求，先确认它理解得对不对，再继续下一步。

第 2 步：确认技术栈

它只展示与你所选网站有关的方案，并给出默认推荐。

例如选择个人博客后，才会看到 Hexo、VuePress、Hugo 等选项，而不是一开始就把所有框架堆到你面前。

不懂怎么选，可以跟随推荐；有明确偏好，也可以直接指定。

第 3 步：收集网站信息

它会分别询问：

  • 网站名称
  • 一句话网站描述
  • 作者名
  • GitHub 用户名（博客、知识库和 AI 导航需要，可留空）

这些信息会用于网站标题、SEO 描述、署名、版权信息和社交链接。

没有提供的信息会使用明确的占位符或跳过，不会擅自给你编一个真实人物身份。

第 4 步：选择创建目录

你可以在当前目录下新建 my-website，也可以换一个子目录名，或者指定一个绝对路径。

项目始终创建在新的子目录中，不会直接初始化到你指定的父目录里。

如果同名目录已经存在，它会自动尝试 -2、-3 这样的后缀，而不是直接覆盖原有文件。

第 5 步：汇总确认，再执行创建

真正动手之前，你会看到一份完整清单：网站类型、技术栈、名称、描述、作者和创建目录。

只有你回复“确认”或“yes”，它才会执行。

创建完成后，它会安装所需依赖、启动本地预览，并在有图形界面的环境中自动打开浏览器。博客和知识库还会附带中文使用指南及英文入口，告诉你下一篇文章写在哪里、常用命令怎么运行。

不是只生成一堆文件，而是让你马上看到网站，并知道接下来怎么改。

三、想让别人访问，还可以继续部署

本地预览之后，Skill 会询问你是否继续部署。你可以选择暂时保留在本地，也可以从下面 6 个平台中选择：

平台特点使用前需要知道的事
Netlify支持匿名部署，操作少匿名站点是临时的，7 天后过期，保留需要绑定账号
Surge.sh命令简洁国内访问可能较慢
Cloudflare Pages适合长期使用需要 API Token，权限要按文档配置
腾讯云 CloudBase国内访问更方便需要环境 ID，首次使用还要在控制台开通环境
Vercel部署流程成熟需要登录，海外节点在国内访问可能受影响
GitHub Pages免费托管静态网站需要 GitHub CLI，并已登录

它还会检查当前环境里已经安装了哪些部署工具，再给出推荐。部署命令、环境变量和需要替换的参数，不要凭空猜，按照对应平台的文档填写即可。

这里我想特别说明：“支持部署”不等于所有平台都能无条件一键上线。

需要账号的平台仍然要登录，需要 Token 或环境 ID 的平台仍然要由你提供。Skill 做的是把流程串起来，不是绕过平台本身的规则。

四、为什么把它做成 Skill，而不是只给你一段提示词？

因为建站不是生成一段回答就结束了。

这个 Skill 除了对话流程，还包含真实的项目模板、初始化脚本、预览脚本、部署脚本和故障排查文档。

几个我觉得很实用的细节是：

  1. 路径安全校验：拒绝根目录、系统目录和包含越界风险的路径。
  2. 目录重名处理：自动选择新的子目录名，降低覆盖旧项目的风险。
  3. 创建前强制确认：AI 不能跳过清单直接执行。
  4. 自动打开预览：创建后尽量直接进入可查看的网站，而不是停在终端里。
  5. 部署结果验证：部署后会检查 URL 是否可访问，并保存状态，方便后续重新部署。
  6. 附带入坑文档：Node.js 版本、依赖安装失败、网络问题等，都有对应的排查说明。

对于 Hexo、VitePress 和 Vue 3 项目，建议使用 Node.js 18 或更高版本；作品集和简历站是纯静态 HTML，不需要先安装前端框架。

五、怎么安装和使用？

方式一：从 SkillHub 安装

打开发布页：

https://skillhub.cn/skills/user_bf8c5b73/wanfeng-personal-website-builder

在支持 Skill 安装的 AI 工具里，可以直接发送下面这句话：

1
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_bf8c5b73/wanfeng-personal-website-builder。

安装完成后，用自然语言调用即可。第一次使用时，建议把用途和约束说清楚，例如：

1
2
3
4
使用晚枫个人网站 Skill，帮我创建一个个人博客。
网站叫「晚枫的技术笔记」，主要记录 AI 工具和 Python 办公自动化。
我希望使用 Hexo，先创建并本地预览，暂时不要部署。
在真正创建文件之前，先把目录和配置汇总给我确认。

你也可以只说“帮我做一个个人网站”，让 Skill 逐项提问。

方式二：从 GitHub 获取源码

完整源码位于：

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

你可以查看 SKILL.md、模板和脚本，再按照自己使用的 AI 编程工具所要求的目录规范安装。

不同工具识别 Skill 的方式可能不同，但使用时的核心原则不变：说明网站用途，逐项确认信息，检查创建清单，再让 AI 执行。

六、它适合谁，又不适合谁？

它比较适合：

  • 第一次做个人网站，不知道从哪里开始的人；
  • 想写博客、整理知识库，却不想先研究框架的人；
  • 需要快速制作作品集或在线简历的人；
  • 想做一个 AI 工具导航站的人；
  • 已经有想法，希望 AI 把重复建站流程跑完的人。

它不太适合：

  • 需要复杂后端、账号系统、支付系统的应用；
  • 已经有成熟网站，只想做局部改版的人；
  • 对项目结构有非常具体要求，希望全部手工实现的人；
  • 不愿意检查配置，也不愿意处理平台登录和部署凭证的人。

它不是“任何网站都能自动生成”的万能工具，而是把常见静态个人网站的创建流程整理成了一条可以重复执行的路。

写在最后

我一直觉得，个人网站最有价值的时刻，不是你收藏了多少教程，而是你终于拥有了一个能打开、能修改、能继续更新的主页。

先让网站跑起来，再慢慢换主题、加内容、绑定域名，比一开始就追求完美更实际。

如果你最近正好想做博客、知识库、AI 导航、作品集或简历站，可以试试这个 Skill：

SkillHub：晚枫个人网站

GitHub：查看源码和项目文档

使用过程中如果遇到问题，欢迎到 GitHub 提 Issue，也可以在文章下面留言。

科技不高冷，AI 很好用。我是晚枫，关注我，一起把 AI 真正用起来。