Codex 实战系列｜ 零代码个人网站搭建
以前做网站，是程序员干的事情。
现在用 Codex，一个人，30 分钟就可以搞定。
在 Build in Public 的当下，个人主页比简历更好用，你的作品，你的项目都可以直观的展示在上面，网站这就是你的个人标签。
先看我的成品：
首页有鼠标浮雕，往下是个人介绍、文章和服务。
流程如下：
买域名、注册账号 → Codex 看参考并做规划 → 放入个人内容，做出第一版 → 在浏览器里逐处修改 → 部署上线。
1. 买一个域名，注册 Cloudflare
打开
，在搜索框里输入想要的名字和后缀。
搜索结果出来后，看三处：名字能不能注册、当前价格是多少、右边哪个按钮加入购物车。首年价格和以后续费的价格可能不同，结算前再看一遍。
点「加入购物车」后，页面会推荐邮箱、建站工具和其他服务。附加服务都不选，直接点底部「继续」。
进入购物车，检查域名、年限和总价。到付款前停下，由本人确认后再购买。
打开
，注册一个免费账号。填写邮箱和密码，完成人机验证，再点 Sign up。
密码、验证码和支付信息都留在官方页面里，不要发给 Codex。域名买好，Cloudflare 账号注册好，先放在这里，等网站做完再用。
2. 在 Codex 里新建一个网站项目
先在电脑上新建一个文件夹，例如：
1 | my-homepage |
打开 Codex，新建一个本地任务，选择这个文件夹。以后网页代码、文章和图片都放在这里，Codex 也会在这个目录里工作。
把准备展示的内容放进去。刚开始可以这样整理：
1 | my-homepage/ |
profile.md 不用写得很正式，把名字、个人介绍、想展示的栏目、公开联系方式写进去即可。文章可以是 Markdown、Word 或 PDF，图片放进 images。
材料放好后，让 Codex 先看一遍文件夹：
先检查这个项目里有哪些个人资料、文章和图片，告诉我哪些内容可以直接放进个人网站，哪些材料还缺。暂时不要写代码。
Codex 会列出已有材料。缺头像就补头像，缺文章封面就补封面，不准备展示的文件先拿出去。
3. 找一个参考网站，让 Codex 实际看一遍
这里参考
，主要看它的浅灰背景、留白、鼠标浮雕和滚动节奏。
把网址发给 Codex，让它使用 Computer Use 或应用内浏览器打开网站。先看首屏，再往下滚动，打开菜单，移动鼠标，点一遍主要按钮。
这一轮只做分析，可以直接说：
用 Computer Use 打开这个网站，从首屏看到页面底部，把滚动、菜单、鼠标经过和主要按钮都试一遍。先整理页面结构、视觉风格、交互方式、需要的素材和制作顺序，不要开始写代码。
等它看完，应该给出一份制作计划，里面至少有这些内容：
- 首页先出现什么，往下还有哪些区域。
- 背景、字体、留白、图片和卡片是什么风格。
- 菜单、鼠标经过、滚动和按钮怎样变化。
- 哪些内容可以用现有资料，哪些素材需要补。
- 第一版先做哪几块，哪一处效果最费时间。
如果当前 Codex 没有 Computer Use，就把网址、几张关键截图和一段操作录屏放进项目，同样让它先分析。
4. 定下自己的版本，让 Codex 开始制作
参考看完后，告诉 Codex 哪些地方保留，哪些地方换成自己的内容。
页面保留浅灰背景、大面积留白、浮雕和鼠标反馈，内容换成这些：
1 | 首页：Miles Ma、个人介绍、文章入口 |
让 Codex 按计划做第一版：
按已经确认的结构制作个人主页。使用项目里的文字和图片，先完成首页、文章入口和联系入口。保留参考站的留白、浮雕和鼠标反馈。完成后启动本地预览，用浏览器打开。
Codex 会创建网页文件、安装组件并启动预览。这个项目使用 Vite，本地预览命令是：
1 | npm run dev |
如果你用的是一个全新的空文件夹，Codex 会先创建项目，再设置对应的预览命令。这里不用自己猜技术栈，等它完成后看浏览器里的页面。
第一版先检查三件事：页面有没有正常打开，自己的文字和图片有没有放对，首页风格和参考方向是不是一致。方向错了就先改方向，不急着做后面的细节。
5. 页面哪里不满意，就让 Codex 改哪里
第一版打开后，从首页开始往下看。一次改一处，句子说清位置、问题和想要的结果。
例如：
- “首页中间的标题太大，缩小一点，其他位置不动。”
- “鼠标经过时浮雕露得太少，把显露范围扩大，移开后慢一点收回。”
- “文章封面被裁了，显示完整图片，卡片宽度不变。”
- “右上角文章按钮不明显，加一圈细边框，颜色沿用现在的灰色。”
Codex 改完会重新加载预览。你看过这一处，再改下一处。已经满意的部分直接说“这里保持不变”。
如果使用应用内浏览器，可以打开批注模式，直接圈住标题、按钮或图片，再写一句修改要求。Codex 能知道你指的是页面上的哪一块。
首页定下来后，再检查菜单、文章列表和正文。文章中心把封面、标题和摘要放在列表里，点进去阅读全文。
按钮要自己点一遍：文章入口是否打开文章中心，文章卡片是否进入正文，返回首页是否正常，联系入口有没有去正确的账号。图片缺失或按钮没反应，就把当时点了哪里、看到了什么告诉 Codex，让它修完再试一次。
6. 页面确认后，让 Codex 部署上线
本地页面确认后，告诉 Codex 你已经注册了 Cloudflare，并把要使用的域名说清楚：
当前页面已经确认。请部署到已注册的 Cloudflare 账号，并使用指定域名。需要账号授权时打开官方页面，其他步骤继续完成。不要覆盖账号里的其他网站。部署后打开正式网址，检查首页、文章、图片和按钮。
第一次连接账号时，Codex 会运行：
1 | npx wrangler login |
浏览器弹出 Cloudflare 授权页面后，由你确认账号。回到 Codex，它会继续设置项目。
项目里已经写好部署脚本，最后执行：
1 | npm run deploy |
Codex 会先生成上线版本，再发布到对应的网站项目。发布完成后，让它接上域名，并打开
检查最终页面。
以后要修改首页，仍然是在原项目里完成：让 Codex 改一处，浏览器确认，再运行 npm run deploy。新的内容会更新到同一个网站。
一个域名，还能继续放什么？
主页上线后，不用每增加一种内容就重新买域名。可以在现有域名前面加一个名字，分出几个独立入口：
1 | immilesma.com 个人主页 |
cv、course 和 tools 都是子域名，日常也常叫二级域名。它们共用
，页面和用途可以分开。
例如在线简历可以比主页更短，只放经历、项目和联系方式；工具页可以放自己做的小应用；课程入口可以放网页课件和课程资料。这些页面仍然可以交给 Codex 制作、修改和部署。
课程不需要一套课建一个新入口。一个 course 子域名下面，可以用不同路径放多套课：
1 | course.immilesma.com/longform-system/ |
以后再增加课程，就在
下加一个新路径。再往前加一层，例如
，属于嵌套更深的子域名，也有人叫三级域名。通常用一个子域名配不同路径就够了。
总结：
先买好域名，注册 Cloudflare； 再找一个喜欢的网站，让 Codex 用 Computer Use 看完整个页面，拆出结构、风格和交互。 把个人介绍、文章、项目和图片放进文件夹，让 Codex 做出第一版，在浏览器里一处处看、一处处改。 页面确认后，让它执行部署命令，把网站接到自己的域名。 以后要增加在线简历、课程或工具，继续使用同一个项目和域名，通过子域名或新路径往里添加即可。
