零基础小白也能一天上线网站：用 Codex 跑通开发到部署全流程

这篇文章为你拆解如何利用 AI 编码助手 Codex，在一天内从零开始完成网站的策划、编写、调试及上线。即使你完全不懂代码，只要能清晰表达需求，也能拥有属于自己的顶级域名网站。文中涉及的所有提示词都会原样保留，方便你直接复制使用。

一、核心逻辑：Codex 在流程中扮演什么角色

Codex 不仅仅是一个代码生成器，它更像是一个能够直接操作你本地文件夹的“数字开发合伙人”。在整个流程中，分工非常明确：

• 你负责决策：确定网站目标（个人主页、作品集还是起名工具）、确认账号权限（GitHub、Vercel）、对视觉和文案进行审美把关。

• Codex 负责执行：编写 HTML/CSS/JS 代码、启动本地服务器让你预览、根据报错信息进行调试、整理项目文件并推送到云端。

工具清单： Codex 客户端、GitHub 账号、Vercel 账号、域名（可选）。如果只想做一个最简单的页面，让 Codex 用纯 HTML/CSS/JS 就够了；如果想做得更现代、后续也方便扩展，可以让它用 Vite + React 或 Next.js，零基础用户建议优先选 Vite + React，部署到 Vercel 比较省心。

二、实战步骤：从想法到可访问网址

1. 创建项目文件夹

先在电脑上建一个文件夹，比如“沐阳起名”，然后在 Codex 桌面应用里打开这个目录，或者在命令行里进入该目录后启动 Codex。每个网站单独放一个文件夹，不要把多个项目混在一起。

2. 规划先行：别急着写代码

零基础最容易踩的坑，就是一上来就让 Codex“帮我做个网站”，却没说清楚类型、内容、风格和目标用户，做出来的东西往往和预期差一大截。把资料丢进文件夹后，先让它出方案，不要马上写代码。个人网站可以直接用这段提示词：

我想做一个个人网站，请你先不要写代码，先帮我规划网站方案。 网站用途：展示我的个人介绍、项目作品、联系方式。 目标用户：招聘方、合作方、朋友。 视觉风格：简洁、专业、有一点设计感，不要太花。 需要页面：主页、关于我、作品集、联系我。 请输出： 1. 网站结构 2. 每个区块应该放什么内容 3. 推荐使用的技术栈 4. 项目文件结构 5. 开发和部署步骤

如果做的是企业官网，可以换成这个版本：

我想做一个小型企业官网，请你先不要写代码，先帮我规划网站方案。 公司类型：摄影工作室。 目标用户：需要拍婚礼、活动、商业照片的客户。 网站目标：展示服务、案例、价格范围，并引导用户咨询。 视觉风格：高级、干净、图片展示为主。 需要页面：首页、服务、案例、关于我们、联系咨询。 请输出网站结构、页面内容、技术栈建议、文件结构和部署方案。

这一步的目标是先和 Codex 对齐方向，不满意就直接说：整体方向可以，但我希望页面更适合年轻用户，颜色更活泼一些，首页不要太像简历，请重新调整方案。

3. 生成代码：根据复杂度选路径

方案确定后再让 Codex 写代码，有三种常见选择。

选择 A：最简单的纯静态网站，适合个人主页、活动页、简单作品集、课程介绍页：

请按照刚才的网站方案，在当前文件夹创建一个纯静态网站。 要求： 1. 只使用 HTML、CSS、JavaScript，不使用复杂框架。 2. 首页文件必须叫 index.html。 3. 样式写在 style.css。 4. 交互写在 script.js。 5. 页面要适配手机和电脑。 6. 图片先用占位图或渐变色块，后续我再替换真实图片。 7. 完成后请告诉我每个文件的作用，以及如何在浏览器里预览。

这种方式最适合部署到 GitHub Pages。

选择 B：Vite + React 网站，适合更现代的个人网站、产品页、可维护的前端项目：

请在当前文件夹创建一个 Vite + React 网站项目。 网站主题：个人作品集。 页面内容：首页、个人介绍、项目作品、技能、联系我。 视觉风格：专业、清爽、适合技术求职。 要求： 1. 使用 React 组件组织页面。 2. 页面要适配手机和桌面端。 3. 不要做营销落地页，要做一个真正可浏览的网站。 4. 添加基础 SEO：title、description、语义化结构。 5. 完成后安装依赖并启动本地开发服务器。 6. 告诉我本地预览地址。

这种方式最适合部署到 Vercel。

选择 C：Next.js 网站，适合博客、内容站、后续可能加接口和数据库的网站：

请在当前文件夹创建一个 Next.js 网站。 网站类型：个人博客 + 作品集。 要求： 1. 使用 App Router。 2. 包含首页、文章列表页、作品页、关于页。 3. 先用本地静态数据，不接数据库。 4. 页面要适配手机和桌面端。 5. 完成后运行构建检查。 6. 告诉我如何部署到 Vercel。

4. 本地预览与调试

代码生成后不要急着部署，先本地打开预览。调试的核心不是“哪里不对就重新做”，而是形成闭环：看页面、发现问题、告诉 Codex、让它修、再验证。比如觉得首页效果不好，可以这样说：

请优化首页视觉效果： 1. 首屏看起来太空，增加更明确的主标题、副标题和行动按钮。 2. 作品区卡片太散，请改成三列网格，手机端一列。 3. 配色现在太暗，请改成白色背景、深色文字、蓝绿色点缀。 4. 不要改动整体页面结构，只优化样式和排版。

如果不知道怎么描述，直接截图发给它也可以。每次修改后，都建议让 Codex 做一次检查：

请在修改完成后运行项目可用的检查命令，例如 npm run build。如果项目有 lint 或 test，也一起运行。最后告诉我检查结果。

5. 上线前整理项目

部署前，让 Codex 做一次“上线前体检”：

请对当前网站做上线前检查。 请检查： 1. 是否能正常启动本地预览。 2. 是否能成功构建。 3. 是否存在无用文件、临时文件、调试输出。 4. 页面标题、描述、favicon 是否合理。 5. 图片、链接、按钮是否正常。 6. 手机端和桌面端是否都能正常浏览。 7. 是否适合部署到 GitHub Pages 或 Vercel。 检查后请列出问题，并直接修复可以安全修复的问题。

6. 推送到 GitHub

部署前建议先把代码放到 GitHub，好处很直接：代码不容易丢，改坏了能回滚历史版本，而且 GitHub Pages 和 Vercel 都能直接读取仓库。如果已经安装并登录 GitHub CLI，可以让 Codex 直接执行：

请把当前网站项目提交到 GitHub。 要求： 1. 先检查 git 状态。 2. 如果还没有初始化 git，请初始化。 3. 添加合适的 .gitignore。 4. 提交代码，commit message 用：Initial website. 5. 如果当前没有远程仓库，请告诉我如何创建 GitHub 仓库；如果可以使用 gh CLI，也可以帮我创建 public 仓库并推送。 6. 推送完成后告诉我 GitHub 仓库地址。

没有安装 GitHub CLI 的话，也可以手动打开 GitHub，点右上角的 + 选择 New repository，仓库名填 my-website，选择 Public 后创建，再把页面给出的推送命令复制给 Codex 执行。

7. 选择部署方式

方式 A：GitHub Pages，适合纯静态网站，比如 index.html + style.css + script.js 的组合。可以先让 Codex 检查是否适合：

请检查当前项目是否适合部署到 GitHub Pages。 如果是纯静态项目，请确认 index.html 是否在根目录、资源路径是否正确。 如果是 Vite/React 项目，请说明是否需要配置 base、构建目录和 GitHub Actions。 请给我最简单可靠的部署步骤。

之后进入 GitHub 仓库，点 Settings -> Pages，常见设置是 Source 选 Deploy from a branch，Branch 选 main，Folder 选 /root。保存后等几分钟，GitHub 会给出一个类似 https://你的用户名.github.io/my-website/ 的网址。

方式 B：Vercel，更适合 Vite、React、Next.js 等现代前端项目，能连接 GitHub 仓库，每次推送代码后自动部署。登录 Vercel（建议直接用 GitHub 登录）后，点 Add New，选择 Project，找到对应仓库，点 Import，检查一下框架、构建命令和输出目录，点 Deploy 即可。部署成功后会拿到类似 https://my-website.vercel.app 的网址。如果部署失败，进入 Deployments 页面打开失败日志，把错误信息复制给 Codex，修复后重新推送，Vercel 会自动重新部署。

8. 购买域名并绑定到 Vercel

如果想让网站拥有专属地址，比如 https://nameok.xyz，可以在阿里云、腾讯云、Cloudflare Registrar、Namecheap、GoDaddy 等平台购买域名，尽量选短一点、好记好传播的，优先 .com，预算有限也可以选 .xyz。支付、实名、验证码这些操作务必自己完成，不要把敏感信息发给 Codex。

购买后进入 Vercel 项目的 Settings -> Domains，添加域名，Vercel 会给出需要配置的 DNS 记录；再去域名平台的解析设置里对应填好。DNS 生效有延迟，快则几分钟，慢则几个小时，等 Vercel 显示配置有效后，就能用自己的域名访问网站了。

9. 后续更新网站

上线之后更新会很简单：告诉 Codex 想改哪里，它修改代码并本地运行检查，你确认无误后，它提交并推送到 GitHub，GitHub Pages 或 Vercel 会自动发布新版本。如果担心改坏页面，可以先这样约束它：

请先不要直接大改，先阅读项目结构，告诉我需要修改哪些文件、会影响哪些页面，等我确认后再执行。

三、常见问题

看不懂 Codex 写的代码不用太焦虑，先确认三件事：页面能不能打开、内容是不是你想要的、修改后有没有报错。等网站跑起来后，可以让它用通俗的话解释项目结构：

请用零基础能听懂的话解释这个项目的文件结构，每个文件负责什么，我以后想改首页文字应该改哪里。

没有域名也能上线，GitHub Pages 会给 github.io 地址，Vercel 会给 vercel.app 地址，先用默认地址跑起来，后续再买域名完全没问题。至于备案，这取决于域名、服务器所在地、业务用途和当地监管要求，面向中国大陆用户的正式商业网站，建议按域名服务商和云服务商的提示确认合规要求。域名购买涉及付款、实名、验证码，不建议交给 Codex 代办，它可以帮你选域名、解释 DNS、核对配置，但不该接触支付密码和验证码。如果域名绑定后打不开，通常是 DNS 没生效或记录填错，把 Vercel 的 Domains 页面提示和域名后台记录截图发给 Codex 核对即可，注意不要发账号密码。

四、推荐路线

如果完全零基础，建议按这个顺序走：先让 Codex 做一个纯 HTML/CSS/JS 的个人主页，本地打开确认内容，再优化手机端样式，推送到 GitHub 并用 Pages 免费上线；跑通之后再升级为 Vite + React，导入 Vercel，最后购买域名完成绑定。这样不会一开始就被框架、构建、DNS 同时卡住，先让第一个页面跑起来，再慢慢往上叠加复杂度。

整套流程的关键不是让 Codex 一次性做完，而是拆成清楚的小步骤：描述需求、生成方案、写代码、本地预览、反馈问题、修复调试、构建检查、推送 GitHub、部署上线、绑定域名。GitHub Pages 适合免费练手，Vercel 适合正式项目和自定义域名，而账号登录、付款、验证码这类敏感操作，始终应该由你本人完成。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～