2026 用 Codex 从零搭建个人网站：需求梳理、AI 生成、国内部署全流程实录

本文由 辛梓煜@词元2号站（www.ciyuanerhao.com）撰写，转载请注明出处。

快速摘要：个人网站这件事，2026 年的门槛已经被 AI 编码智能体 Codex 拉到了"一个下午"的级别。我全程实测了一遍：先花 10 分钟写清楚"网站给谁看、要哪些页面"的需求文档，再让 Codex 出方案、确认后再生成代码，本地预览改 5 轮，最后部署上线——核心流程就四步：定需求 → 出方案 → 生成迭代 → 部署上线。技术栈建议选纯 HTML/CSS/JS 静态站，零后端、零服务器成本。部署环节特别提醒：2026 年 Vercel 自带域名在国内访问受限，实操更推荐 Gitee Pages、腾讯云 COS、阿里云 OSS 这类国内方案，速度稳、还省去备案的麻烦。全文 1.3 万字，包含我用的全部 prompt、踩过的坑和可直接照抄的部署命令。想看完整拆解，往下翻。

第1章 为什么我决定把个人网站这件事提上日程

先交代一下背景。前阵子有个做技术招聘的朋友找我，让我发一份作品集过去看看。我翻遍手机和网盘，发现自己这几年做过的项目、写过的总结、折腾过的工具，散落在各个角落——聊天记录里、网盘文件夹里、甚至某个早就忘了密码的旧博客里。简历倒是有一份，可那份 Word 文档里全是干巴巴的列表，发出去之后对方打开率能有多少，我心里其实没底。

那一刻我意识到一件事：我缺的不是"做过的东西"，而是一个能把它们系统展示出来的地方。

我的第一反应和大多数人一样：建站这件事，想想就头大。 脑子里立刻跳出三座大山：

• 要学 HTML/CSS？我平时不怎么碰前端，早就忘得差不多了，重新捡起来少说一个月。
• 要买服务器？每年续费不说，还得折腾环境配置、安全加固这些杂活。
• 要备案？流程长、材料多，光想想就劝退。

所以我拖了很久，一直没动手。直到后来我把 OpenAI 的 Codex 真正用起来，才意识到自己之前对"建站"的理解，还停留在 2015 年的旧模式里。

2026 年的现实是：建个人网站这件事，已经不需要你亲自写一行前端代码，也不需要你为服务器和备案发愁。

我自己完整走了一遍流程，从定需求到网站上线，大概一个多小时；如果算上后面几天陆续的打磨，也就两三天的事。成品不是我之前想象的那种"模板味很重"的页面，而是有明确设计语言、能自适应手机端、随时可以改内容的真网站。这个体验对我触动挺大，所以我决定把完整过程写下来，从需求怎么想、prompt 怎么给、到国内环境怎么部署，一步步拆开讲。

这篇文章里你会看到：

• 动手前那 10 分钟的需求梳理到底要写什么（有可直接抄的模板）；
• 让 Codex 先出方案、再写代码的正确姿势，以及我实际用过的完整 prompt；
• 本地预览和多轮调试的方法，包括"发现问题→描述问题→让 AI 修→再验证"这套循环怎么跑；
• 2026 年国内环境下部署方案怎么选，Gitee Pages、腾讯云 COS、阿里云 OSS 这些怎么操作；
• 上线后我踩过的坑：字体加载、中文文件名、导航点击没反应、图片太大拖慢首屏，每个坑都有解决办法。

先声明一句：我是辛梓煜，词元二号站（www.ciyuanerhao.com）的站长，平时就爱折腾这类效率工具，也习惯把折腾过程写成文章。我这套流程是基于自己的学习实践整理出来的，方法偏"够用就好"的实用主义路线，不是唯一答案，更不是什么标准教程。你要是看完觉得哪里能做得更好，欢迎在评论区聊。

另外说明一下，我这篇文章里说的"建站"，核心目标是个人品牌展示：让别人（招聘方、合作伙伴、同行）在一个页面里快速了解你是谁、会什么、做过什么、怎么联系你。它不需要复杂的后台、不需要用户登录、不需要数据库。如果你的需求是电商、社区这类重业务系统，那本文的方案不适用，你得另找路子。

个人网站的好处，我自己用下来感受最深的三点：

1. 它是你的数字名片。简历是给 HR 看的压缩包，网站是给所有人看的完整版。别人想了解你，一个链接比一个附件体面得多。
2. 它是内容沉淀的地方。写过的文章、做过的项目、踩过的坑，统一放上去，越攒越值钱，还能反向帮你梳理自己的成长轨迹。
3. 它是完全属于你的地盘。平台账号随时可能因为规则变化受影响，但自己的网站，只要域名和托管在，内容就一直在。

想清楚"为什么做"之后，接下来就是"怎么做"。别急着打开 AI 工具——先花几分钟认识一下 2026 年的 Codex，它已经不是我印象里那个"聊天里写代码"的东西了，有几个新形态，用对了差别很大。

第2章 2026年的Codex到底是什么：先认识这个新工具

在动手之前，我花了点时间搞明白 Codex 到底是个什么定位的工具，因为这直接决定了我后面怎么用它。如果你只是听说过"AI 写代码"但没实际用过，这一章值得仔细看。

2.1 一句话定位：它不是一个"聊天写代码"的助手，而是一个"编码智能体"

普通 AI 对话工具是"你问一句、它答一段"；Codex 不一样，它是代理式的：你给它一个任务目标，它会自己读代码库、自己改文件、自己跑命令、自己验证结果，干完再向你汇报。它基于针对软件工程场景专门优化的模型训练而来，通过强化学习在海量真实编程任务上打磨，能生成贴近人类工程师风格的代码，还会反复执行测试直到通过为止。

对建站这件事来说，这个区别很关键：你不需要把整个网站代码一段段"要"出来，而是把需求讲清楚，让它自己去搭文件结构、写样式、补交互，然后你验收就行。

2.2 2026 年的 Codex 有哪几种用法

我整理了一下目前主流的三种形态，各有各的适用场景：

三种形态底层是同一套能力，区别主要在"入口"和"工作流"。我个人建站用的是第一种：在 ChatGPT 里选 Codex，把需求讲清楚，让它干活。全程不需要装任何本地环境，对新手极其友好。

2.3 2026 年值得注意的新变化：Sites 发布功能

这里要特别提一个 2026 年的新东西：Codex 推出了 Sites 功能，可以直接把生成的网页发布成托管在线的站点，并且和 Wix、Replit、Lovable、Figma 等一批建站生态做了打通。也就是说，AI 生成的网页不再只是"本地的一堆文件"，而可以一键变成别人能访问的网址。

我自己的判断是：Sites 这类能力适合"快速验证一个想法、临时分享一个页面"的场景；但如果你想要一个长期稳定、域名可控、内容可随时编辑的个人主页，我还是更推荐"本地生成 + 部署到自己的托管平台"这条路。原因很简单：发布权和数据掌握在自己手里，不受单一平台约束，而且国内访问体验也更可控。这也是本文后面重点讲"部署"的原因——建站的最后一步，往往比生成代码更影响实际体验。

2.4 我第一次用 Codex 的真实体感

坦白说，第一次让它干活的时候，我心里是打鼓的。我把需求文档丢过去，它先给我列方案，我确认后它开始生成文件——浏览器里能看到它一步步执行的进度：读取目录、创建文件、写样式、跑检查。大概几十秒到一两分钟，一份完整的网站文件就摆在眼前了。

我当时的反应是：原来"写一个网站"可以是这样一种体验。 不是一行行敲代码，而是像带一个实习生：把需求讲清楚，它动手，我验收，不满意就让它改。

不过我也要提醒一句：工具再强，需求不清楚，出来的东西一定跑偏。Codex 特别擅长"按指令执行"，但它不会替你思考"你的网站到底要表达什么"。所以动手前，先把最前置的问题解决掉——把需求想明白。这一步做好了，后面全是顺风局；这一步偷懒，后面就是无穷无尽的返工。

第3章 动手前先想清楚：网站给谁看、放什么内容

我见过太多人用 AI 建站的翻车现场：上来就是一句"帮我做个网站"，结果 AI 反问"你想做什么样的网站"，两边扯皮十分钟，最后生成一个花里胡哨但完全不知道给谁看的页面。问题不在 AI，在于提问的人自己都没想清楚。

所以建站的第一步，不是打开任何工具，而是坐下来，花十分钟回答一个问题：我的网站到底给谁看？

3.1 目标用户决定网站的一切

我给自己的网站列了三个核心目标用户，每个用户关心的事情完全不同：

把这个表填完，网站的骨架其实就出来了——每一个页面都是为某一类用户准备的：

• 首页：一句话说清楚"我是谁、我做什么、我能提供什么价值"。
• 关于我：个人经历、技术栈、工作轨迹，让陌生人快速建立信任。
• 作品集：项目卡片，每个项目配标题、一句话描述、截图和链接。
• 联系我：邮箱、社交账号，最好再加一个简单的留言入口。

我自己是程序员背景，所以视觉上选了深色主题，显得专业克制；如果你做设计、摄影、内容创作，完全可以换成更活泼的配色。风格没有标准答案，但"给谁看"必须有答案。

3.2 把想法落成一份需求文档

想清楚之后，我做的第二件事是把它写成一份正式的需求文档。这份文档不需要很长，但要把关键信息写全，因为它后面会直接喂给 Codex，相当于它的"设计稿"。

我用的模板大概是这样的（你可以直接抄，改改内容就行）：

网站用途：个人品牌展示
目标用户：招聘方、潜在客户、同行
视觉风格：简洁、专业、深色主题
需要页面：首页、关于我、作品集、联系我
技术偏好：纯前端静态站，不需要后端
部署方案：国内可访问、免费优先
特殊要求：适配手机端，加载要快

这份文档我强烈建议你用纯文本写，别搞花里胡哨的格式。因为 AI 读纯文本最不容易产生歧义，而且你自己后期改起来也方便。

3.3 为什么"先写需求"比"先写代码"重要

这里多说两句。很多人觉得写需求文档浪费时间，不如直接让 AI 生成再改。但我的实测经验是：需求阶段花的每一分钟，都能省下后面十分钟的返工。

原因有三：

1. AI 是"按图施工"的。需求写得越具体，它生成的东西越接近你想要的样子，改动的次数就越少。
2. 需求文档是双方沟通的锚点。你和 AI 聊到一半，需求文档可以随时拉回来对齐方向，避免越聊越偏。
3. 需求文档本身就有价值。哪怕网站做完了，这份文档也是你后续迭代的参照系——加什么、不加什么，翻出来看看就知道。

说实话，写需求这一步，我自己一开始也觉得麻烦，但做完之后发现它其实是整个流程里"性价比"最高的一环。十分钟的思考，换来的是后面几乎不用推倒重来。

3.4 需求文档写完，先别急着生成代码

还有一个很多人会踩的坑：需求写完，直接就命令 AI"开始写代码"。我的建议是中间多一步：先让它出方案。这一步看着不起眼，却是后面少走弯路的关键。

第4章 让AI先出方案再写代码：一次正确的开场

用 Codex 建站，最常见的误区就是上来就让它写代码。我第一版就是这么干的，结果它闷头生成了一堆文件，我打开一看，结构完全不是我想的那样——不是它写得不好，是我没说清楚。后来我改成"先出方案、确认后再动手"，效率立刻翻倍。

4.1 让 Codex 先出方案的 prompt

把需求文档丢给 Codex 之后，我会在后面加上一段话，明确要求它先规划、不要写代码：

我想做一个个人网站，请你先不要写代码，先帮我规划网站方案。

网站用途：展示个人介绍、项目作品、联系方式
目标用户：招聘方、潜在客户、同行
视觉风格：简洁、专业、深色主题，有设计感但不花哨
需要页面：首页、关于我、作品集、联系我

请输出：
1. 网站的整体结构
2. 每个区块应该放什么内容
3. 推荐使用的技术栈及理由
4. 项目文件结构
5. 开发和部署的步骤建议

这个 prompt 的关键词是"先不要写代码"。别小看这句话，它把 AI 的模式从"执行"切到了"规划"，让它先展示思考过程，你才有机会在花钱花时间之前纠正方向。

4.2 方案里最值得看的三个点

Codex 给出的方案通常很长，但真正值得你花时间看的，我总结下来就三个点：

第一，技术栈建议。 我的方案里给了两条路：纯 HTML + CSS + JavaScript（简单够用），或者 Vite + React（更现代但更重）。我选了前者。理由很朴素：个人展示站没有复杂交互，纯静态站加载快、部署简单、任何托管平台都能跑，后期维护成本几乎为零。能用简单方案解决的事，就不要引入复杂度，这是我建站的一条原则。

第二，页面区块设计。 方案里把每个页面拆成了具体的区块，比如首页有 Hero 区（首屏大标题区）、简介、核心技能、行动按钮；作品集是卡片网格。这种"区块化"的设计思路对我很有启发——它让整个网站的改版变得特别容易，想调整哪块就动哪块。

第三，文件结构。 一个清晰的目录结构，是后期维护的基础。我最后用的结构长这样：

my-website/
├── index.html          # 首页
├── about.html          # 关于我
├── portfolio.html      # 作品集
├── contact.html        # 联系我
├── css/
│   └── style.css       # 全部样式
├── js/
│   └── main.js         # 交互逻辑
└── images/             # 图片资源

4.3 方案评审：别全信，要有自己的判断

方案出来后，我习惯性做一遍"评审"，重点问自己三个问题：

1. 这个结构覆盖了我的目标用户吗？ 招聘方想看的东西（项目、技术栈）有没有对应的模块？
2. 复杂度可控吗？ 有没有引入我根本不需要的框架或依赖？
3. 后续好改吗？ 我想加一篇新文章、一个新项目，改动是不是够简单？

评审通过，才进入下一步：让它正式生成代码。如果你对方案某一部分不满意，直接告诉它改哪里，改到满意再开工——在方案阶段改，成本几乎为零；在代码阶段改，成本翻倍。

这一章的最后，把 Codex 给我方案里的"部署建议"说一下：它当时推荐了 GitHub Pages 和 Vercel 这类平台。但我实际落地的时候，发现 2026 年的国内网络环境下，这些平台的使用体验和几年前已经不太一样了——部署方案这一环，值得单独花一章好好对比。

第5章 第一次生成：把需求变成能跑的真网站

方案确认之后，就到了整个流程里最有"爽感"的一步：让 Codex 正式生成代码。这一章我把当时用的完整 prompt 和实际产出过程都摊开讲，包括我第一次看到成品时的真实反应。

5.1 生成代码的完整 prompt

方案通过后，我用的 prompt 是这样写的：

请按照刚才确认的网站方案，在当前文件夹创建一个纯静