以前做个人网站，往往要先学 HTML、CSS、JavaScript，再研究服务器、域名和部署。现在有了 Codex，普通人也可以把建站变成一场与 Agent 协作的项目：你负责准备内容、确定方向和验收结果，AI 负责分析参考、生成代码、启动预览并协助部署。
但“零代码”不等于“什么都不管”。真正决定网站质量的，仍然是目标是否清楚、材料是否完整、参考是否选对，以及你能否在浏览器里逐处检查和修改。
这篇文章，赛一把完整过程整理为一套零基础也能执行的六步方法。它不仅适用于个人主页，也适用于在线简历、作品集、课程入口和轻量工具站。
一、先想清楚：为什么现在值得拥有个人网站？
在 Build in Public，也就是“公开构建、持续分享过程”的环境里，个人主页正在成为比传统简历更立体的身份入口。
一份简历通常只展示经历和结论，个人网站却可以持续容纳：
- 你是谁，以及你正在关注什么；
- 做过哪些项目，结果如何；
- 写过哪些文章，形成了什么方法；
- 能提供哪些服务，怎样与你联系。
网站不是一张一次性完成的电子名片，而是可以不断更新的个人资产。文章、案例和工具越积越多，它越能替你建立长期信任。
🎓 CAIE / AIPM 提示： 建站看起来是技术任务，本质上也是产品任务。开始之前先明确目标用户、核心价值、内容结构和完成标准，再选择工具与实现方式。Agent 可以提高执行速度，但不能代替需求判断。
二、整个过程只有六步
从零开始搭一个个人网站，可以拆成以下六步：
- 准备域名与托管账号；
- 整理个人介绍、文章、项目和图片；
- 让 Codex 分析参考网站并形成计划；
- 用自己的内容生成第一版；
- 在浏览器中逐处检查、逐处修改；
- 完成授权、部署和正式域名检查。
关键不是一次给 Codex 一条巨长指令，而是让每一步都有明确输入、可见结果和验收标准。
三、准备域名和 Cloudflare：敏感操作必须由人完成
域名是网站的公开地址。可以在 Spaceship 等正规域名注册平台搜索想要的名称和后缀。结算前重点确认三件事：
- 这个名称是否还能注册；
- 首年价格和后续续费价格分别是多少；
- 购物车里是否加入了不需要的邮箱、建站或附加服务。
托管方面，可以注册 Cloudflare 免费账号，等网站完成后再连接项目和域名。
这里必须划清权限边界：密码、验证码、支付信息和最终授权，应由本人在官方页面完成，不要复制给 Codex，也不要写进项目文件。
Agent 可以负责规划、生成代码、测试和部署操作，人负责账号授权、敏感信息和不可逆决定。边界越清楚，协作越安全。
四、先整理内容，不要一上来就让 Codex 写代码
在电脑上新建一个项目文件夹，把准备展示的材料放进去。例如：
profile.md：姓名、个人介绍、公开联系方式、希望展示的栏目；articles/：准备展示的文章，可以是 Markdown、Word 或 PDF；projects/：项目介绍、成果和相关链接；images/：头像、文章封面、项目截图等图片。
profile.md 不需要写得像正式简历，先把事实说明白即可。不要放身份证、住址、私人电话、账号密码或内部客户资料。
材料整理好后，先让 Codex 盘点，不要马上生成网页：
先检查这个项目里有哪些个人资料、文章和图片，告诉我哪些内容可以直接放进个人网站，哪些材料还缺。暂时不要写代码。
这一步的作用，是把“我想做个网站”的模糊愿望，变成一张可以执行的内容清单。缺头像就补头像，缺项目说明就补项目说明，不准备公开的文件则先移出项目目录。
五、让 Codex 真正看懂参考网站
很多人给 AI 一张截图，然后只说“照这个做”。结果通常只能得到相似配色，却复制不了页面的结构、节奏和交互。
更好的方式，是给 Codex 一个参考网站，让它通过 Computer Use 或应用内浏览器完整体验：看首屏、向下滚动、打开菜单、移动鼠标、点击主要按钮。第一轮只分析，不写代码。
可以这样下达任务：
打开这个参考网站，从首屏看到页面底部，把滚动、菜单、鼠标经过和主要按钮都试一遍。先整理页面结构、视觉风格、交互方式、所需素材和制作顺序，不要开始写代码。
分析结果至少应该回答五个问题：
- 首屏展示什么，往下还有哪些区域；
- 背景、字体、留白、图片和卡片是什么风格；
- 菜单、悬停、滚动和按钮如何变化；
- 哪些内容可以使用现有材料，哪些还需要补充；
- 第一版先完成什么，最费时间的效果在哪里。
如果当前版本没有 Computer Use，也可以把网址、关键截图和一段操作录屏放进项目，让 Codex 基于这些材料分析。不要让它假装访问了实际上没有打开的页面。
六、先做首版，再决定细节
参考分析完成后，要明确哪些视觉语言保留，哪些内容换成自己的。比如保留浅灰背景、大面积留白、浮雕和鼠标反馈，但将栏目替换为个人介绍、作品、文章与联系方式。
然后让 Codex 按确认后的计划制作第一版：
按已经确认的结构制作个人主页。使用项目里的文字和图片，先完成首页、文章入口和联系入口。保留参考站的留白、浮雕和鼠标反馈。完成后启动本地预览，用浏览器打开。
Codex 可能会创建 Vite 等前端项目、安装所需组件并启动本地预览。零基础用户不用急着猜技术栈，先在浏览器里检查结果。
第一版只看三件事：
- 页面是否正常打开；
- 自己的文字和图片是否正确；
- 整体方向是否符合预期。
如果方向错了，先改方向；如果结构没定，就不要过早纠结阴影、圆角和动画。
七、网页修改的关键：一次只改一处
页面打开后，从首页开始往下检查。每次修改都说清四件事：位置、问题、目标，以及哪些内容保持不变。
例如：
- “首页中间的标题太大，缩小一点，其他位置不动。”
- “鼠标经过时浮雕露得太少，把显露范围扩大，移开后慢一点收回。”
- “文章封面被裁剪了，显示完整图片，卡片宽度不变。”
- “右上角文章按钮不明显，加一圈细边框，继续使用当前灰色。”
这类指令比“再高级一点”“再有设计感一点”更容易得到稳定结果。已经满意的部分，要明确告诉 Codex 保持不变，避免修一个细节时把整页重新设计。
如果工具支持页面批注，可以直接圈住标题、按钮或图片，再写修改要求。每次改完立即查看，不要一次积累十几个问题后统一返工。
八、功能验收不能只看首页
首页定下来后，还要检查菜单、文章列表、文章正文和联系入口。所有按钮都应亲自点一遍：
- 文章入口能否进入文章中心；
- 文章卡片能否进入对应正文；
- 返回首页是否正常；
- 联系入口是否指向正确账号；
- 图片是否缺失、变形或被裁剪；
- 手机尺寸下是否能正常阅读和操作。
如果按钮没有反应，不要只说“网站坏了”。告诉 Codex 你点击了哪里、期望发生什么、实际看到了什么，让它定位并修复。
🎓 CAIE 考点提示： 这一过程对应 CAIE Level I PART 5“AI 工作流与商业成果落地”，该模块在官网最新版大纲解析中占 25%，掌握层次为“应用”。重点不只是会写 Prompt，而是能把目标、输入、执行、检查和交付连成完整工作流。
九、部署上线：让 Agent 执行，让人确认授权
本地页面验收通过后，再让 Codex 部署到已经注册的 Cloudflare 账号，并说明要使用哪个域名：
当前页面已经确认。请部署到已注册的 Cloudflare 账号，并使用指定域名。需要账号授权时打开官方页面，其他步骤继续完成。不要覆盖账号里的其他网站。部署后打开正式网址，检查首页、文章、图片和按钮。
第一次连接账号时，浏览器会打开官方授权页面。由本人确认账号后，Codex 才继续配置和发布。具体命令取决于项目环境，不要照搬陌生命令；以当前项目中已经确认的脚本和官方页面为准。
上线后还要重新检查一遍正式网址。因为“本地能打开”不等于“线上一定正常”，域名、图片路径、跳转链接和移动端样式都可能在部署后暴露问题。
十、一个域名，可以继续扩展多个入口
个人主页上线后，不必为每一种内容重新购买域名。可以通过子域名或路径继续扩展：
cv.example.com：在线简历；tools.example.com：个人工具；course.example.com：课程入口；course.example.com/ai：某一套具体课程。
通常，一个课程子域名配合多个路径就已经够用，不需要为每套课程再建立更深层的子域名。结构越简单，后续维护越轻松。
十一、零代码建站真正练的是什么？
表面上看，这是一篇 Codex 建站教程；更深一层，它训练的是人与 Agent 的协作能力：
- 把模糊想法变成明确目标；
- 把个人材料整理为 Agent 可读取的上下文；
- 让 Agent 先观察、再规划、后执行；
- 用可见页面完成逐处验收；
- 对敏感信息、账号和支付保持人工控制；
- 把部署脚本和网站内容沉淀为可持续迭代的项目。
这也是 CAIE 学习中很重要的一条主线：AI 工具的价值不在于“替你点了多少按钮”，而在于能否把一个真实目标稳定地转化为可验收成果。
写在最后
如果你第一次搭网站，不要先追求复杂动画、完美设计或完整内容。先准备一份个人介绍、一篇文章和一个项目，让 Codex 做出能打开、能阅读、能访问的第一版。
再从首页标题开始，一处一处修改；从本地预览开始，一步一步上线。等第一个闭环真正跑通，你不仅拥有了一个个人网站，也掌握了把 Agent 用进真实项目的方法。
如果你喜欢这类 AI 工具实操、Agent 工作流和企业落地教程，欢迎关注「CAIE 人工智能工程师」。
你最想在个人网站上展示什么：作品、文章、简历，还是自己的小工具？