Vibe Coding：小白 2 小时手搓个人网站

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

 
  
    
     
     零基础也能2小时打造专属个人网站？最新AI编程工具组合让建站变得像聊天一样简单。从风格选择到代码生成，再到一键部署上线，Codex与Vercel的完美配合彻底降低了技术门槛。本文将手把手教你如何用自然语言对话完成整个建站流程，让人人都能拥有展现自我的数字名片。

提示：这篇文章适合无编程基础，想快速在 2 小时内手搓一个自己专属的个人线上网站的小白。使用到的工具有：Codex（可替换为其它 AI 编程工具）、GitHub、Vercel。

个人网站的意义

个人网站最大的好处，是能有了一个长期有效、可持续更新的个人主页。社交平台太散、简历也无法展示完整你的生活，别人很难在几分钟内真正认识你。个人网站刚好能补上这块空白，你能用自己最喜欢的表达方式展示自己被值得看见的经历、能力。

而搭建个人网站，用 vibe coding 的方式实现起来非常轻松。

在前一篇小白 Vibe Coding 0-1 零基础入门教程，我们使用的工具是Google AI Studio，留言/评论都有在咨询除了AI Studio 还有没有其他主流 AI Coding 工具推荐，目前大家用的比较多的工具有：Cloud Code、Cursor、Codex、Trae。

Cloud Code 的模型 coding 能力是最强的，更适合熟悉用命令行的人，适合已经有项目了，让 AI 查代码、修 bug、跑测试、改文件的场景。

Trae 在国内用起来会比较方便，模型能力方面不如其他平台，但快速出原型、demo的初阶使用也可以使用的。

Cursor 胜在可选用的模型多，支持多家厂商的模型。Codex 使用的是 OpenAI 的模型能力，官方定义是一个 coding agent，推理感更强。这两者的选择，就看用户自己用哪种更上手更熟悉。价格方面，使用的起点价格相同，个人玩家购买时可以看下咸鱼的价格。

工具的下载、安装、账户充值各个工具流程类似，在官网下载并安装，账户注册、登录、充值，一套下来很快就能完成。

在DesignPrompt 中有不同的风格模板，我们可以选择自己喜欢的风格卡片，提供的prompt 里面包含了这个风格的设计原则/要点，我们可以免费复制。

在给 Codex 发送编程命令之前，在输入框左下角将【计划模式】开启，这样它在思考后会先跟你确认思路、拆解步骤、问清楚细节再执行，比如会问你想要的技术栈，小白也不用担心看不懂就乱选择，他也会解释清楚每个选项会有什么效果，如果不满意提供的选项，也可以自定义答案。

然后就可以和 Codex 开始对话了，告诉它你想做一个个人网站，希望有个人介绍等 xxx 模块，使用以下风格，将刚才复制的风格 prompt 粘贴进去就行。当然如果有很完善的想法，也可以写得更加详细，但建议可以先让 Codex 生成一版，看整体风格是否符合预期，后面再进行调整。

Codex 在和你不断确认要点后，会输出一份 plan，确认无误后就能让它实施计划了。

在实施计划时，Codex会自动检查需要用的工具是否已安装/授权，如果没有会停下来征询你的同意。但也不必一直盯着页面担心错过交互，你可以在其他页面同时做其他的事情，有交互/已完成的状态都会有消息提醒你去查看。

当项目完成可以跑之后，你可以在本地预览网站效果，初版肯定会有很多可修改的点，你可以将需要修改的地方，截图+文字描述扔给 Codex，他会根据你的要求进行修改。

这是一个持续沟通的过程，你还可能会遇到，在本地预览时报错的问题。同样，你截图告诉 Codex 报错问题，它会自己排查问题并修复。他也会不断地给出下一步优化 idea，看是否要跟着它的思路去调整迭代。

和小白 Vibe Coding 0-1 零基础入门教程中提到的部署上线方式相同，先将代码提交到GitHub ，再通过 Vercel部署上线。那在 Codex 中如何操作呢？直接询问：现在项目可以部署上线了吗，我是一个小白，请选择最适合我的上线方式。它会建议用 git+vercel 的方式，也会一步一步地告诉你该如何操作。

你可以让它尽可能把你需要做的操作简化，并且让它自动完成。代码推到 Git 后只需要登录 Vercel 并 deploy就能完成。

Vercel 部署上线后，你仍然可以在 codex 中不断更新个人网站的内容/样式，只需要修改完成后再重提提交代码上线即可。
你也可以将自己的资料/简历喂给 Codex，让他帮助你理清楚适合你的网站框架和展示的内容。
Vercel提供的网址大家都可以访问，但需要访客挂上，如果想要国内更方便访问，可以考虑在阿里购买域名（国内个人域名的购买和续费都不贵），再让 Codex修改。
让个人网站彰显自我特色、打磨内容仍需要花费更多的时间。做个人网站的价值也不只是最后生成的网页，更重要的是，会让你开始更认真地思考/认识自己。

Vibe Coding：小白 2 小时手搓个人网站

相关推荐