Codex中文教程
登录
实战

用 Codex 从零搭建个人主页并部署上线：完整实战指南

2026/8/316 分钟阅读

前言：个人主页是 AI 编程的最佳练习场

很多人第一次用 Codex 总是不知道该让它干什么——写个计算器太简单，做一个复杂系统又无从下手。个人主页恰好是一个完美的中间难度项目：你需要它包含基本信息、作品集、联系方式，但又不能做得太复杂。更重要的是，做完之后真的可以用，发给别人一个链接就能看。

下面用 5 个步骤带你从零到上线，全程不需要写一行代码。

第一步：建项目文件夹 + 绑定到 Codex

Codex 没有自己的"工作区"概念——你的电脑上一个普通文件夹就是它的全部世界。

  1. 在电脑上新建一个文件夹，命名为 my-website（建议用英文，避免后续路径问题）
  2. 打开 Codex 桌面应用，点击左侧边栏的「项目」旁边的文件夹图标
  3. 选中刚才新建的 my-website 文件夹

此时 Codex 会自动识别这个文件夹为一个新项目，所有后续操作只会在这个文件夹内发生，不会影响你电脑其他地方。

💡 为什么这一步很重要？ 文件夹就是 Codex 的"信任边界"——它在默认模式下只能读取和修改这个文件夹里的内容，不会乱动你电脑的其他文件。

第二步：创建 AGENTS.md，给 AI 立规矩

这一步是大多数人省略但最关键的一步。AGENTS.md 是 Codex 每次对话都会读取的"行为守则"。

在 my-website 文件夹里新建一个文本文件，命名为 AGENTS.md，写入以下内容：

# AGENTS.md

## 我的身份
我是一个个人创作者，正在搭建自己的数字名片站。

## 工作风格
- 使用中文回复，简洁明了
- 代码要有注释，方便我理解
- 不要删除我现有的文件

## 输出标准
- 页面要响应式，手机也能正常显示
- 配色使用简约风格，参考苹果官网的干净感
- 所有文字用我能看懂的方式解释

保存后，Codex 每次在这个文件夹里开新对话都会先读这个文件，按照里面的规则来工作。

⚠️ 常见坑：AGENTS.md 不要写得太笼统。只写"我是开发者"是不够的，要具体说明你的工作习惯、输出格式要求、禁忌事项。花 15 分钟写好这份文件，能避免后面 80% 的返工。

第三步：用计划模式，先讨论再动手

千万不要直接说"帮我做一个个人主页"——需求太模糊，Codex 会边写边猜，出来的东西往往不是你想要的。

正确的做法是开启计划模式：

  1. 在对话框左下角找到「+」按钮旁边的切换开关
  2. 切换到「计划模式」

进入计划模式后，输入以下提示词：

我想做一个个人主页，以下是我的信息：
- 姓名：[你的名字]
- 职业：[你的职业]
- 简介：[一句话介绍自己]
- 联系方式：[邮箱或社交媒体]

要求：
1. 提供多种风格主题可切换
2. 响应式布局，手机也能正常显示
3. 界面要有设计感，参考苹果官网的简洁风格

发送后，Codex 不会直接写代码，而是会先问你几个问题，比如： - 你希望主页包含哪些板块？ - 你偏好什么风格？ - 需要什么配色方案？

认真回答这些问题，Codex 会生成一份完整的实现计划文档。仔细检查： - 有没有漏掉你想要的功能 - 有没有错误理解你的意思

计划 OK 之后，点「继续执行」，Codex 才开始正式写代码。

第四步：观察 AI 自主执行，随时纠偏

计划确认后，Codex 就开始自己干活了。你可能会看到：

  • 它自动使用内置的图片生成功能创建头像或插画
  • 它编写 HTML/CSS/JS 文件
  • 它在浏览器中打开页面进行自我测试

整个过程通常需要 5–10 分钟，取决于页面的复杂度。

如果中途发现哪里不对，不要打断它的执行。在对话框输入你的修改意见，比如：

这个图片风格不太满意，换成简约线条风格。

然后右侧会出现一个引导按钮：「不打断模型运行，在下次调用工具后发送过去」。点击它，Codex 会在完成当前步骤后立刻采纳你的意见，不会白跑。

第五步：分叉（Fork）与版本回溯

如果在执行过程中发现方向跑偏了，每条 AI 回复下方都有一个 「分叉 / Fork」 按钮。

什么时候用它？ - 前面聊得挺好 - 但聊到后面发现 Codex 理解错了你的意思 - 想保留前面的好上下文，舍弃后面的歪路

点击 Fork，从跑偏之前的那个节点新开一个对话。你保留了之前所有的进展，只是换了一条路继续走。

部署上线：让全世界都能访问你的主页

做完本地页面只是第一步，部署到线上才是真正 usable 的状态。

方案一：Vercel 一键部署（推荐新手）

  1. 在 Codex 对话框输入： 将此项目连接到 GitHub，创建一个私有仓库并推送代码
  2. Codex 会使用 gh CLI 完成认证、创建仓库、推送代码
  3. 然后输入： 将 Vercel 连接到同一个 GitHub 账户，导入此仓库并部署
  4. Codex 会协调整个流程，大约 1–2 分钟即可完成

关键细节：GitHub 和 Vercel 连接后，每次你推送代码到 main 分支，Vercel 会自动重新部署。你只需要在 Codex 里改代码、推送，网站就自动更新了。

方案二：Netlify Drop（零配置）

如果不想折腾 GitHub 和 Vercel： 1. 把 my-website 文件夹压缩成 .zip 2. 访问 app.netlify.com/drop 3. 把 zip 文件拖进去，立刻获得一个在线链接

进阶：把个人主页升级成"一人公司"工作站

个人主页做完后，你可以继续让 Codex 添加更多能力：

功能 提示词示例
添加暗色模式切换 「添加一个暗黑模式切换按钮，使用本地存储记住用户偏好」
接入联系表单 「添加一个联系表单，提交后发送邮件到我的地址」
添加博客功能 「帮我做一个简单的博客系统， posts 用 Markdown 管理」
接入数据分析 「添加 Google Analytics 代码，统计访客来源」

💡 核心认知转变：从零搭建个人主页最重要的不是学会了多少代码，而是理解了"描述需求 → AI 执行 → 验收结果"这个新的工作模式。以后做任何项目，都可以套用这个流程。

来源

来源：奇点AI纪元（微信公众号），《Codex 零基础实战：从零做一个个人主页并部署上线》。原文通过 imqq.com 分享，介绍了完整的 5 步实操流程，包括 AGENTS.md 配置、计划模式使用、Vercel 部署等关键技巧。

资料最后核对日期：2026-08-31 · 内容整理自 CodexGuide 社区公开教程