零代码时代:普通人如何利用 AI 工具独立完成一个网站开发.

前言：

最近发现越来越多人开始尝试搭建属于自己的网站，有的是做个人介绍，有的是展示作品，还有一些人想做一个简单的小工具或者内容平台。

其实我之前也一直有这个想法，但每次想到网站开发，总觉得离自己很远。什么代码、服务器、域名、部署，一听就感觉很复杂，好像只有程序员才能完成。

前几天偶然看到有人分享用 Codex 搭建个人网站的经历，感觉挺有意思，于是自己也决定试一下。

刚开始也是一边查资料，一边摸索，不懂的地方就搜索解决方案。没想到真正动手之后才发现，现在搭建一个简单的网站，并没有想象中那么难。

所以今天想把自己的整个过程整理出来，分享一下如何利用 Codex 搭建一个免费的个人网站。

如果你也想拥有一个属于自己的网站，但又不会写代码、不会配置服务器，不妨看看这个方法。

你有没有想过：

拥有一个自己的线上空间，可以放个人介绍、作品展示、项目经历，甚至做一个属于自己的小工具网站？

但很多人一想到建网站，第一反应就是：

“我不会代码怎么办？”

“服务器是不是很贵？”

“域名是不是很麻烦？”

“是不是还要找程序员开发？”

于是很多想法还没开始，就被这些问题打消了。

但现在情况已经不一样了。

随着工具越来越简单，搭建网站已经不再只是技术人员的事情。

我自己没有系统学过编程，也不是开发人员，但通过 Codex，再结合 GitHub 和 Vercel 这些免费工具，花了一上午时间，把一个简单的网站从零搭建并成功上线。

整个过程没有购买服务器，也没有额外投入费用。

这篇文章，我会把整个流程记录下来，从准备工具、创建项目，到最后发布上线，一步一步分享给大家。

即使你没有代码基础，只要会使用电脑、会复制粘贴，也可以跟着完成属于自己的第一个网站。

· 开始之前，你需要准备这些东西：

在正式搭建网站之前，我们先准备几个基础工具。

其实整个过程并不复杂，除了 Codex 之外，其他基本都可以免费使用。

你需要准备：

1、 一个 AI 助手

可以选择：

• ChatGPT
• Claude
• DeepSeek
• Kimi

它主要负责帮你生成代码、修改页面效果、解决搭建过程中遇到的问题。

我这次使用的是 Codex，整个过程会以它作为演示。

即使你完全不会编程，也不用担心，你不需要自己写代码，只需要告诉它你想做什么，然后根据提示操作即可。

2、 一个 GitHub 账号：

GitHub 可以理解为一个专门保存代码的平台。

我们后面创建的网站文件，会放在这里，方便管理和后续修改。

如果你以前没有注册过，也不用担心，注册流程和普通网站账号差不多，后面会一步步介绍。

3、 一个 Vercel 账号：

Vercel 的作用很简单：

它可以把 GitHub 里面的网站代码自动转换成一个可以直接访问的网站。

也就是说：

你把代码放进去 →Vercel 自动部署 → 生成一个网站链接 → 其他人就可以打开访问。

整个过程不需要自己购买服务器，也不用复杂配置。

4、 大约 30 分钟时间：

第一次操作可能会慢一点，因为需要注册账号、熟悉界面。

但整个流程走通以后，之后搭建类似的网站会越来越快。

看到 GitHub、Vercel 这些名字，很多第一次接触的小伙伴可能会觉得陌生。

其实不用把它们想得太复杂：

GitHub = 存放网站代码的地方，就像代码版的网盘。

Vercel = 帮你把代码发布成网站的工具，就像自动搭建网站的发布平台。

你现在不用急着深入了解它们背后的技术原理。

今天我们的目标很简单：

先把第一个网站成功做出来。

当你亲手看到自己的网站可以打开的那一刻，很多之前觉得复杂的东西，自然就明白了。

后续文章我也会继续分享 GitHub 和 Vercel 更多的玩法，比如如何绑定自己的域名、优化网站、搭建个人主页、作品展示页等。

第一步：让 Codex 帮你完成网站代码：

刚开始接触建站的时候，很多人最大的心理障碍就是“代码”。

以前做一个网站，可能需要学习 HTML、CSS、JavaScript，还要懂服务器部署，对于普通人来说确实有一定门槛。

但现在不一样了。

在 AI 工具的帮助下，你不需要从零开始敲代码，你只需要把自己的想法描述清楚，让 AI 帮你完成第一版。

简单来说：

你负责提出需求，AI 负责把想法变成代码。

当然，你也可以选择自己习惯的 AI 工具，比如 ChatGPT、Claude、DeepSeek 等。

这里我用 Codex 来演示整个过程。

打开 Codex 后，不需要一开始就研究复杂功能，直接把你的需求告诉它即可。

下面分享两个我实际测试过的提示词，你可以直接复制使用，也可以根据自己的需求修改。

方案一：简单版（适合第一次尝试）

如果你只是想快速做出一个属于自己的个人主页，可以先从简单版本开始：

帮我制作一个个人主页网站，要求：

① 所有代码写在一个 HTML 文件中；

② 页面包含三个主要部分：

   - 个人介绍

   - 项目展示

   - 联系方式

③ 整体设计风格简约、大气、有现代感；

④ 支持手机端正常浏览，页面需要自适应；

⑤ 输出完整代码，不要省略任何内容。

这个版本比较适合新手。

第一次不要想着做得特别复杂，先让网站成功运行起来。

当你看到自己的第一个网页出现在浏览器里的时候，会明显感觉：

“原来做网站也没有想象中那么难。”

方案二：进阶版（打造个人品牌网站）

如果你希望网站更像一个专业个人主页，可以直接让 Codex 按完整结构设计：

帮我制作一个个人品牌主页网站，要求：

 ① 所有代码写在一个 HTML 文件中； 

② 页面包含以下模块： - 顶部固定导航栏（滚动时保持悬浮） - 首屏展示区域（个人 IP 形象 + 一句话定位） - 关于我的个人介绍 - AI 项目展示区 - 产品与知识库展示 - GitHub 项目合作区域 - 联系方式 - 社交账号入口 - 页脚版权信息； 

③ 网站整体设计风格： - 白底极简科技资讯风； 或者 - 黑橙高对比扁平设计风； 

④ 页面需要适配电脑和手机端显示； 

⑤ 输出完整 HTML 代码，不要省略任何部分。

这个版本做出来的网站，会更接近一个完整的个人品牌展示页面。

这里有一个小经验：

第一次使用 Codex 的时候，不建议一开始就追求“完美”。

因为网站开发本身就是不断修改的过程。

先让它生成一个能运行的版本，然后再继续告诉它：

• “帮我优化页面布局”
• “增加动画效果”
• “调整颜色风格”
• “让手机端显示更好”
• “增加新的功能模块”

慢慢修改，最后就能得到一个真正符合自己需求的网站。

对于不会代码的人来说，现在最大的变化就是：

以前需要先学会开发，才能做网站。

现在可以先有想法，再借助工具一步步实现。

这也是我觉得 Codex 最适合新手入门的地方。

第二步：实操流程

步骤1 ———————————————————————————

步骤2 ———————————————————————————

步骤3 ———————————————————————————

步骤4 ———————————————————————————

▲ 一个小细节，大家一定要注意：代码文件最好保持单个 HTML

这里有一个比较重要的地方，建议新手朋友不要忽略。

在让 Codex 生成网站时，最好提前告诉它：

· 把所有内容写在一个 HTML 文件里面。

为什么推荐这样做？

因为刚开始搭建网站时，如果页面拆分成多个文件，比如 HTML、CSS、JavaScript 分开存放，后面上传和部署的时候容易遇到各种小问题，比如文件路径错误、资源加载失败等。

对于第一次做网站的人来说，一个完整的 HTML 文件会简单很多。

生成以后直接上传、部署，成功率也更高。

· 我自己踩过的一个坑：文件名一定要改。

这里还有一个问题，我当时花了不少时间才发现。

Codex 默认生成的网页文件名称，不一定是：

index.html

可能会生成类似：

personal-home.html

my-page.html

website.html

但是 Vercel 部署网站时，会默认寻找首页文件：

index.html

如果文件名不对，部署完成后打开网站，很可能会出现：

· 404 页面找不到

我当时就是一直检查代码、重新部署，以为哪里写错了，最后才发现只是文件名的问题。

把文件改成：

index.html

重新部署之后，网站就正常访问了。

所以这里建议大家，在让 Codex 生成代码时，直接加上一句：

请生成单个 HTML 文件，并将文件命名为 index.html，确保可以直接部署到 Vercel。

这个小细节虽然不起眼，但可以帮你少走很多弯路。对于第一次搭网站的新手来说，很多时候不是代码的问题，而是这些部署细节没有注意。

Codex 生成完成后，一般会直接给你一个完整的 HTML 文件，可以直接使用。

如果你使用的是其他 AI 编程工具，有些可能只会返回一段代码，这时候需要自己新建一个 HTML 文件，把代码复制进去保存。

· 具体操作方式可以参考下面的教程：

你不需要看懂任何一行，只需要：

① 点击代码框右上角的"复制"按钮；

② 在电脑上新建一个文本文件；

③ 粘贴进去；

④ 保存，务必把文件命名为 index.html, vercel 它认这个名字；

新手这里最容易出问题：文件格式和文件名

保存网页文件的时候，一定要确认两个地方：

第一，文件名必须叫：

index.html

注意后缀一定是.html不要保存成：

index.html.txt

否则浏览器会把它当成普通文本文件，而不是网页打开。

如果你使用的是 Windows 自带记事本保存文件，记得把：

“ 保存类型 ” → 选择 “ 所有文件 ”

然后手动输入：

index.html

再点击保存。

保存完成以后，直接双击这个文件，浏览器就会自动打开。

看到的页面，就是你刚刚用 Codex 做出来的网站效果。

当然，第一次生成的网站不一定完全符合你的想法，这很正常。

哪里不满意，直接继续告诉 AI 修改就可以。

比如：

• “把顶部导航栏改成蓝色风格”
• “增加一个个人头像展示区域”
• “项目展示部分改成卡片布局”
• “整体设计更加简洁高级一点”

AI 会根据你的要求重新生成代码。

然后你只需要复制新的代码，替换原来的index.html文件，再刷新浏览器，就能看到新的效果。

整个过程其实很像不断调整一个网页模板，哪里不满意就修改哪里，直到变成自己喜欢的样子。

· 下面给大家看看我刚刚做出来的第一个简单网站效果：

第1版 ———————————————————————————

第2版 ———————————————————————————

第3版 ———————————————————————————

· 再来给大家看看我做的复杂版本的网站效果：

第1版 ———————————————————————————

不得不说，修改之后的效果确实提升不少。

刚开始生成的版本虽然能用，但离自己心里的效果还有一点距离。

所以我又反复调整了几次布局、颜色和内容，最后重新优化了一版。

这也是用 AI 做网站比较有意思的地方——不用一次做到完美，边看边改，慢慢调整到自己满意就可以。

第二步：把刚刚做好的网站传到 GitHub

网站代码已经有了，接下来就是把它放到 GitHub。

你可以把 GitHub 理解成一个专门存放网站文件的地方，后面 Vercel 会直接从这里读取代码，然后帮我们把网站发布出去。

整个过程没有想象中那么复杂。

网站已经做好了，不过现在它还只是保存在你的电脑里，只有你自己能看到。

如果想让别人也能访问，就需要先把网站文件上传到网上。

这里我们会用到 GitHub。

第一次接触的话，你可以不用把它想得太复杂。

在我看来，它更像是一个专门存放代码的云盘。把网站文件放进去之后，后面再配合 Vercel，就可以把它发布成一个真正能访问的网站。

平时很多开发者都会用 GitHub 来保存项目、管理代码、分享作品，所以后面如果继续学习建站或者做其他项目，基本都会接触到它。

接下来，我们一步一步来注册 GitHub 账号。

1、打开你注册好的github页面，点击页面右上角的 "+" 号，选择 New repository

2、仓库名称 可以自己取，不用太纠结，后面想改也可以。像我这里就用 my-website，你也可以根据自己的网站内容来命名。

OK, 到这步你的代码已经安全地储存在云端了。

第三步：把网站部署到 Vercel，这样别人就能正常访问了

Vercel 可以理解成一个网站托管平台。把你的项目上传过去，它会自动帮你部署，并生成一个可以直接访问的网址。整个过程不用自己买服务器，也不用折腾各种配置，对于个人做项目来说，免费版基本就够用了。

2、建议直接选择 Continue with GitHub 登录，这样 Vercel 会自动连接你的 GitHub 仓库，后面部署网站基本都是一键完成。

如果你的 GitHub 和 Vercel 都已经有账号了，直接登录即可，不需要重新绑定。我下面的演示也是按照这种情况进行的。

登录自己 GitHub 账户，选择个人网站项目；

4、进入项目列表后，你会看到刚才在 GitHub 创建的 my-website仓库，点击右侧的 Import 导入即可。

5、进入项目配置页面后，一般不用修改任何参数，保持默认设置，直接点击 Deploy 开始部署。

——————————————————————————————

部署完成后，Vercel 会自动生成一个网站链接，这就是你的网站地址。以后无论是发给朋友、放到社交平台主页，还是写进个人简历，都可以直接使用。

还有一点很方便，如果以后修改了网站内容，只要把新代码更新到 GitHub，Vercel 就会自动检测并重新部署。一般几十秒后，网站就会同步到最新版本，全程基本不用手动操作。

▲ 国内用户需要提前了解的两点：

前面的部署流程到这里就结束了。不过，如果你和我一样主要面向国内用户使用，还有两个问题建议提前了解，后面可以少走不少弯路。

第一，Vercel 默认生成的 vercel.app 域名，在国内部分网络环境下访问可能不太稳定。

不同地区的情况不太一样，有的人可以直接打开，有的人访问速度比较慢，甚至打不开。

我的建议是后面给网站绑定一个自己的域名，域名一年也就几十块钱，再配合 Cloudflare 做 DNS 解析，整体访问体验会好很多。如果你发现自己的手机不开代理就访问不了网站，基本也可以通过这种方式来改善。后面我也会单独写一篇教程，详细讲怎么把自己购买的域名绑定到 Vercel。

第二，如果你准备长期做国内网站，就要考虑国内服务器和 ICP 备案。

如果只是做个人作品、学习项目，或者给国外用户访问，Vercel 基本已经够用了。

但如果网站主要面向国内用户，希望搜索引擎更容易收录，或者打算长期运营、获取自然流量，那么最终大概率还是需要使用国内云服务器，并完成 ICP 备案。这时候像腾讯云、阿里云这类国内云服务商就会派上用场。

这两个部分涉及的内容比较多，包括域名解析、备案流程、服务器配置等，后面我也会分别整理成详细教程，一步一步带大家完成。

总结

整个流程其实没有想象中那么复杂，我再简单回顾一下：

让 AI 生成网页代码 → 上传到 GitHub → 用 Vercel 部署 → 网站正式上线。

整个过程基本不用花钱，成本几乎是 0 元。

我第一次做的时候，大概花了 30 分钟左右，主要是中间踩了一点坑。这里提醒大家一个容易忽略的地方：首页文件一定要命名为 index.html 我当时就是因为这个名字写错了，折腾了好一会儿才发现问题。

至于门槛，其实没有大家想得那么高。只要会打字，会复制、粘贴，跟着教程一步一步操作，大多数人都能完成。

如果今晚正好有半个小时，不妨自己动手试一次。第一次做出来的网站可能没有那么漂亮，功能也比较简单，但当你打开浏览器，看到那个真正属于自己的网站时，那种成就感还是挺特别的。

很多人都是从第一个简单的网站开始，慢慢学会页面设计、AI 编程、部署和优化。真正难的不是技术，而是迈出第一步。