文/林芳老师
上一篇（03）我们把三件套认全了：GitHub 是档案室，Next.js 是网站主体框架，Codex 是随叫随到的 AI 技术工人。工具都装好了，但很多人卡在下一个问题上：这三样东西我都有账号了，然后呢？它们到底怎么一起干活？
这一篇不讲概念，直接动手。我们用一节课的时间，让三个账号第一次联动，完成一件事：Codex 写出一个网页，代码存进 GitHub，再通过部署平台发布到一个真实网址上，你用手机能打开。 走完这一遍，后面 14 篇所有的操作都是在这条流水线上反复加东西，原理完全一样。
一、先把三个账号准备齐（注册清单）
动手前，确认你手里有三个账号。注册全程免费，都用同一个邮箱，方便后期授权。
| 账号 | 网址 | 注册要点 | 它在流水线里的角色 |
|---|---|---|---|
| GitHub | github.com | 用常用邮箱注册，用户名用公司英文名缩写（会出现在网址里） | 存放网站全部代码文件的档案室 |
| Vercel（部署平台） | vercel.com | 直接用 GitHub 账号一键登录，不用单独注册 | 把 GitHub 里的代码变成线上网站 |
| Codex（AI编程助手） | 在 ChatGPT 或对应编程客户端内开通 | 用同一邮箱登录 | 听你指挥写代码、改代码的技术工人 |
为什么部署平台选 Vercel？因为它是 Next.js 的官方团队做的，GitHub 里的代码一更新，它自动重新部署，全程不用你管服务器。 这也是 03 篇说的"别再自己搭服务器"的落地方式------服务器、域名解析、HTTPS 证书，平台全包了。
实操 A： 现在就把三个账号注册好。注册完在 GitHub 首页点右上角 "+" → New repository，建一个仓库，名字就叫 company-website，选 Public，勾选 Add a README file，点创建。这个空仓库，就是你网站的第一块地基。
二、第一步：让 Codex 帮你在电脑上准备好"施工队"
Codex 写代码需要在你电脑上有一个干活的地方。别紧张，这一步不需要你写一行代码，你要做的只是把指令说清楚。
登录 Codex 后，新开一个对话，把下面这段话原样发给他（把括号里的内容换成你自己的）：
"我是一家做（你的产品，比如不锈钢厨具）外贸出口的公司，要做一个企业官网。请帮我在本地准备好 Next.js 项目环境：在我电脑上创建一个名为 company-website 的项目文件夹，初始化 Next.js 工程，并且关联到我的 GitHub 仓库（github.com/你的用户名/company-website）。每一步需要我在终端执行什么命令，请直接给我可复制的命令，并说明这条命令是干什么的。"
Codex 会给你两到三条命令，通常长这样：安装 Node.js 环境、用脚手架创建项目、把项目和 GitHub 仓库连起来。你要做的，就是复制一条、粘贴到终端、按回车，等它跑完再复制下一条。
这里有一个新手最容易犯的错：看到终端里刷出一堆英文就慌。记住一个判断标准------只要最后没有出现红色的 error 字样，就是成功了。 过程中那些白色滚动文字是它在正常干活，跟你发货时仓库里叉车来回跑是一个道理。
实操 B： 跟着 Codex 给的命令走完，跑完后你会在电脑上看到一个 company-website 文件夹，里面有一堆自动生成的文件和文件夹。看不懂没关系，让 Codex 给你解释每个文件夹是干什么的，他会告诉你：app 文件夹放页面，public 放图片，你 90% 的时间只需要碰这两个地方。
三、第二步：用中文提需求，让 Codex 写出第一个网页
环境搭好，正式开工。你的第一个网页不是首页（首页留到 10-14 篇的内容篇精修），而是一个最简单的"公司介绍"页面，目的是跑通流程，不是追求好看。
在 Codex 对话里发：
"在 app 目录下创建一个 about 页面（about/page.tsx）。页面内容：顶部一行大标题'关于我们'，下面三段话，分别介绍我们是谁（2015年成立、专注不锈钢厨具出口、主要市场欧洲和东南亚）、我们做什么（OEM/ODM代工、月产能50万件、BSCI认证）、为什么选择我们（8年外贸经验、45天交期、最小起订量灵活）。页面用 Next.js 标准写法，样式简洁，手机端能正常显示。写好后告诉我怎么在本地预览。"
Codex 会直接生成完整代码，并告诉你在终端运行 npm run dev，然后用浏览器打开一个本地地址（通常是 localhost:3000/about）。打开你就能看到一个真实的网页------标题、三段文字、排版整齐，手机模拟器里看也是自适应的。
这一步是整个系列里最值得停下来体会的时刻：你没写一行代码，只是用中文把"我是谁、我做什么、凭什么信我"说清楚，一个网页就出现了。 这就是 01 篇反复强调"先想清楚定位再建站"的原因------AI 能写代码，但不能替你想清楚你的卖点。你讲得越具体，网页就越像你；你只说"帮我做个公司介绍"，出来的就是谁都能用的空话。
实操 C： 故意提一个修改需求，体会流水线的响应速度。比如发："把'为什么选择我们'那一段改成三行带图标的列表，45天交期用橙色加粗强调。" 等 Codex 改完，刷新浏览器，看页面是不是立刻变了。这种"说一句话、改一个地方、马上看到结果"的循环，你后面会重复几百次。
四、第三步：代码进 GitHub，Vercel 一键上线
本地能看到网页，还不算完------那个地址只有你自己电脑能打开。现在把它变成全世界都能访问的真网址。
第一步，代码存进 GitHub。 在项目文件夹里，Codex 会指导你执行三条命令：把改动"登记"（add）、写一句"提交说明"（commit，比如"新增关于我们页面"）、"上传"到 GitHub（push）。你可以让 Codex 给你解释这三条命令，也可以先记住：以后每次做完一块内容，就是这三条命令，重复一万次都是它。
第二步，Vercel 接管部署。 打开 vercel.com（用 GitHub 账号登录的状态），点 "Add New Project"，它会列出你 GitHub 里的仓库，选中 company-website，点 Deploy。然后你什么都不用做，等大约两分钟。
第三步，拿到网址。 部署完成后，Vercel 会给你一个网址，形如 company-website-xxx.vercel.app。用你的手机打开这个网址------恭喜，你的第一个外贸网页正式上线了，任何人、在任何国家都能访问。
到这里，三个账号完成了第一次完整联动，整条流水线是这样跑的：
| 步骤 | 你做什么 | 哪个账号在干活 | 产出 |
|---|---|---|---|
| 1 | 中文说清页面要什么 | Codex | 生成页面代码 |
| 2 | 本地预览确认效果 | 你的浏览器 | 看得见的网页 |
| 3 | 三条命令提交 | GitHub | 代码归档、版本留痕 |
| 4 | Vercel 点一次部署 | Vercel | 公开网址，全球可访问 |
| 5 | 以后每次更新 | GitHub→Vercel 自动联动 | push 后约1分钟自动重新上线 |
五、这一篇的三个方法论提示
走完流程，有三件事建议你记住，后面全靠它们省时间：
第一，提交说明要写人话。 commit 那句"新增关于我们页面"看似小事，但等你的网站有了几十个页面、改了上百次，你想回退到"上周那个版本"时，靠的就是这些说明。写"修改"两个字的人，三周后一定后悔。
第二，改坏了不要慌，GitHub 就是后悔药。 任何时候你觉得"这次改得还不如原来"，让 Codex 帮你回退到上一个 commit，网站立刻恢复。这也是 03 篇说"档案室"的真正含义------你的每一次改动都有记录，你永远不会把网站改死。 敢放手试错，是新手和老手最大的区别。
第三，内容先于美化。 你刚上线的这个页面很朴素，没关系。这个系列的顺序是故意的：先跑通从"说话"到"上线"的完整链路（04-09），再精修内容和转化（10-14），最后做 SEO/GEO 让客户找得到你（15-18）。很多人建站失败，是因为第一天就纠结按钮颜色，三个月网站还没上线。
课后作业
- 三个账号注册完毕，GitHub 建好 company-website 仓库。
- Codex 帮你搭好本地 Next.js 环境，about 页面本地能打开。
- 代码 push 到 GitHub，Vercel 部署成功，手机能打开你的 vercel.app 网址。
- 把这个网址发到你自己的聊天工具文件传输助手里，随手记一句提交说明------从今天开始，你就是一个有"线上资产"的外贸人了。
卡住超过 20 分钟的地方，把报错信息原样发给 Codex 让他帮你解决；解决不了的，大概率是网络环境问题，换个稳定网络重试即可。
下一篇（05），我们开始给网站"盖房子"：Next.js 项目的目录结构到底怎么看，导航栏、页脚、页面模板怎么搭一次、所有页面共用------也就是让网站从"一个页面"长成"一个像样的公司官网"的骨架。
本系列基于外贸圈集团《AI建站手册》（GitHub + Next.js + Codex 篇），面向零基础外贸人，不讲代码原理，只带你把能获客的网站亲手做出来。
关于作者
林芳老师，国际商法硕士，外贸圈集团创始人，销售SOP方法论与战略成交方法论创始人，100家亿级企业战略顾问，10余年外贸辅导经验，帮助5000多家企业完成销售体系落地，著有《销售SOP》（中国铁道出版社）。外贸圈集团专注为年出口额1.5亿元以下的B2B外贸企业提供销售体系建设与GEO优化服务，覆盖培训、SOP搭建与陪跑全链路。