面向小白的教程：如何通过vibe coding从0到1创造出一个精美的个人网站

一个漂亮的个人网站在求职、social的时候让人wow，也是取悦自己的好的方式。

我自己做过超过5版的个人网站，得到身边很多朋友的夸赞。

今天把步骤分享出来，帮助小白从0到1完成这件事情。

章节：1. 个人网站由什么构成 2. 如何用codex/workbuddy 从0到1完成。 3. 心得。 4. 引用

个人网站如何构成

内容无非包含两个部分：第一个是内容，第二个是风格。内容上一般包含三块内容：1.我是谁 2. 我做什么 3. 如何联系我。 风格上每个个人网页都有自己的风格，比如黑白极简风，比如复古风（我的）， 比如学术风....我举两个例子

1. 我自己的例子：我是一位浙大在读的博士生，也在做轻创业的事情。那么上述三个部分映射到我这里的话，第一就是我的简短的背景介绍。我用了第一页（本文封面）放了我的照片和我的最精简、high-level的描述。“Researcher, Builder, curious human”. “ I study people and AI, then turn fuzzy ideas into papers, tools, and small experiments.” 这样子大家看完就知道我是做什么的。

之后我希望让大家能够看到我的过往的经历，于是我放了我的教育背景和我做的研究和开源项目，简单直接。

最后我放了我的社交平台的链接。这样大家可以在别的平台找到我的账号。一方面，也许看到这个主页的人会给我点一个关注。另一个方面来说，有很多的音视频的内容，并不太方便在主页里一一呈现，所以一个外部的链接就尤为的重要。给想要了解你的人提供一个更丰富的上下文。

2. 我欣赏的日本一位程序员的封面

会发现也是上述三个部分构成。所以，做一个个人网站来说，内容是很简单的。

用codex/workbuddy从0到1完成

让AI获得你的画像，启动对话

首先是工具方面，我推荐用codex和workbuddy，原因也很简单。这两的GUI界面在我看来是做的比较不错的。不管是对于小白还是对于技术人员（我自己一个月前从terminal+cc转到了codex），都是一个很好冷启动的方式。这里我拿codex举例，workbuddy也是类似的。

使用方法很简单，在codex中创建一个任务，在对话栏里输入“读取我的电脑里面我的工作文件，根据我的个人画像，给我制作一个个人网站的计划。”Magic happens here. AI极大概率会给你创造出一个差强人意的出来。你会第一次看到自己做的一个网站展现在你的面前。但这里还有两个问题： 1. AI制作的东西的内容往往是比较boring且冗长的。从这个角度来说，我不建议内容完全由AI负责，而且这样会剥夺你writing的体验和乐趣。所以我建议可以让AI先做出一个框架来，然后你针对性地去进行调试。

方法也很简单，直接在侧边栏里点击注释。就可以通过交互的方式告诉Codex哪里需要修改，如何修改。整体就是这样。

冷启动到迭代闭环

总结：方法如图...

视觉

部署

最后就是我们的个人网站当然想放到互联网上，让所有人都能看得到。一个自嗨的网站没有任何意义。通常来说有两种方式：我分为免费的和要付费的来讲。

1. 免费静态网络部署： 我使用过的有vercel, github. 这俩都很方便。 方法也很简单，直接告诉Codex： “把我的这个网站部署到我的github/vercel里面去。” 然后发送，去点一杯咖啡。回来之后，你的网站就已经可以被全世界所看到。

2. 

心得

再次重复一遍，最好的学习AI的方式就是去使用AI。而上线一个个人网站，在我看来是一个适合小白学习的事情。而且这件事情的成就感很强，我本科的时候，手写出自己的第一个网站的时候，真的是无比的高兴。至少也会让你在social的时候更酷一点，说，“OK，这是我的网站，你可以知道一下我在做什么。“ 唯一要踩的坑就是，建议不要一开始就付费去购买域名，先用一些免费的静态部署的网站，因为你永远不知道你真正想要的域名是什么，在你没有一个长期的business开始work之前。先用最低的成本让这件事情做起来。后续如果真的有需求，再迭代。

参考资料

• 个人网站参考：doabit.dev、craftz.dog
• 视觉素材库：PinterestFramer 社区市场
• 托管（免费）：GitHub、GitHub Pages Vercel、Cloudflare
• 编码/AI 叙事工具：Codex、WorkBuddy