hello，我是 kite。
相信每个学编程的同学，心里都藏着一个超酷的想法：做一个属于自己的个人网站。
放上简介和光辉事迹，求职时简历里再附上链接，瞬间逼格拉满。
我找到了读初中时制作的个人黑页，现在看起来挺中二的… （看样子不支持 gif 动图额）
从域名购买到编码再到网站上线，这整个过程就难倒了许多人，于是这个很酷的想法最终变成了泡影。
现在不一样了，AI 的出现将编程的门槛大大降低，你只需有 idea 和用自然语言，AI 都能帮你实现。
废话不多说，开始给大家介绍怎么为自己做一个个人主页网站。
前置要求
本地电脑能科x上网
准备一段个人简介
AI 编程工具（claude code、cursor、trae…）
注册 github 和 vercel
github 注册地址：https://github.com/
vercel 注册地址：https://vercel.com/
这两个注册很简单，填入邮箱接验证码验证就完事了。
关于 vercel 注册有个小建议，能使用 github 注册就使用 github 吧，方便。
vercel 部署项目
注册完 github 和 vercel 后，我们开始创建初始项目并部署。
创建项目有两种方式，一种是去 github 创建，然后再加入到 vercel；另一种是，直接在 vercel 创建项目，这个项目会自动同步到 github。
我们采用第二种方式，点击 vercel 页面右上角 add New 新建一个项目：
选择 Next js 模板，Next js 和 vercel 集成度非常好：
下面这步就是会在 github 创建一个存放你代码的空间，这个空间叫“仓库”，你可以为你的仓库取个名字，还可以设置是否公开这个仓库：
然后点击 create 即可自动在 github 创建仓库，然后 vercel 会自动拉取 github 的代码进行部署，以下是部署成功后的界面：
点击“Continue to Dashboard”即可回到项目页面。
以下是对 vercel 项目页面的解释：
如果你现在访问 vercel 给你的域名，大概率是这样的界面：
需要注意的是，vercel 提供的域名需要科x上网才能访问。
vibe coding
接下来我们就通过 vibe coding，开始编码实现我们的个人主页。
编码是在本地进行的，所以需要把 github 上的代码保存到本地。
可以点击 vercel 主页的 “Repository” 直接跳转到 github。
也可以自行访问 github.com 查看项目的地址。
复制项目地址：
我使用的是 claude code，我在本地启动 claude code，让 claude code 帮我把代码拉取下来：
帮我将github上的项目拉取到本地，远程项目地址：“这里放上刚才复制的项目地址”注意，不要将代码放在本地的C盘。
代码拉取到本地后就可以开始编码了，直接把你的需求和个人简介发给claude code。
这是通过 vercel Nextjs 初始化的项目，请你在此基础上帮我完成个人主页项目的开发。要求页面精美、大气。
我的个人简介：xxxxx。
如果你想在终端粘贴图片，可使用快捷键 alt +V，前提是你使用的大模型支持多模态。
当 claudecode 完成编码后，会自动运行项目并给出访问地址（http://localhost:xxxx），浏览器访问这个地址即可看到网站页面。
如果 claudecode 没有自动运行项目，你可以用自然语言让它帮你启动项目：帮我运行项目。
页面排版、元素、内容、风格等等都可以微调，直到自己满意。
项目没问题后就可以让 AI 帮你提交代码，并推送到 github：
完成的很不错，请帮我提交代码并推送到远程仓库，提交说明请使用简洁的中文描述。当代码推送到 github 后，vercel 会自动从 github 部署最新的代码。
如果你推送代码后发现网站页面并没有更新，可能是遇到 vercel 部署错误，可以在 vercel 首页 -> Deployments 查看部署状态，然后将报错提示发给 claude code 处理。
vercel 部署成功后，访问 vercel 提供的域名就能看到我们的个人主页了：
到此，个人主页基本就完成了，我设计得比较简单，大家可以做得更丰富、精美。
写在最后
之前说过，vercel 给我们提供的域名国内用户无法访问。
如果想让我们的网站全球可访问，可以接入 cloudflare，也是 0 成本。
本篇就写到这了，后续会继续介绍怎么把网站上线，让我们的网站走向全球。
我是 kite，希望我的内容对你有帮助。
大家加油 ：)
