先明确你要上线的是什么：上一节
1.9 你把网站从一个个 HTML 文件迁成了
Next.js 项目——文件夹内不再是
.html 文件，而是
.js、
.tsx 等框架代码，以及
package.json、
node_modules 等配置文件。打个比方：Next.js 源码如同未经加工的食材，浏览器只接受成品。
构建就是将框架代码加工为成品的过程——让工具对你的源码执行一次处理，输出的产物才是浏览器能够识别并运行的普通
.html、
.css、
.js 文件。部署平台仅托管构建产生的网页文件，不直接托管你的源码。换言之，你不能直接将项目文件夹上传部署。这一步的具体操作由 Agent 处理，你无需掌握细节；你只需理解它比直接上传多了一道构建步骤。
GitHub:云端代码仓库
上线之前，代码需要先存到一个云端仓库里。GitHub 就是做这件事的——将代码同步到云端存放。
一句话：Git 在你电脑本地存档，GitHub 将这些存档同步到云端。你可以把它理解为一个专门存放代码的云端仓库。它在本课程中有两个作用：第一，替你云端备份代码；第二，作为部署平台的代码来源——部署平台会连接到你的 GitHub 仓库，读取代码进行发布。
第一次用 GitHub：注册账号
▸ 操作：打开 github.com，点 Sign up 注册账号。五分钟即可完成，只需要一个邮箱。
打开浏览器，地址栏输入 github.com 回车,点页面上的 Sign up(注册)。它会让你依次填邮箱、设一个密码、起一个用户名,然后发一封验证邮件到你邮箱,你去邮箱点一下确认链接,账号就成了。注册界面大致长这样:
GitHub · Sign up
you@example.com
至少设个你记得住的强密码
steve-repair
Continue
这是仿界面示意,不是真页面。真实的 GitHub 注册页样式，以你打开 github.com 看到的界面为准。卡在任意一步，可以试着将问题发给agent。注：deepseek目前没有视觉，如果使用其他模型可以直接发送截图。
把代码推上去（交给 Agent）
账号有了。现在你的项目代码只在你自己的电脑里，接下来把它同步到 GitHub，部署平台才能拿到。这个同步动作叫推（Push）——把本地代码上传到 GitHub 上的仓库（Repository），即存放一个项目全部代码的云端空间。
▸ 操作：在终端里对 Agent 说 —"帮我把这个项目推到 GitHub 上一个新仓库。" 以下是真实会话中会发生的事情，按顺序走就行：
第 1 步 — Agent 安装 GitHub CLI。Agent 会先检查你的电脑上有没有 gh（GitHub 的命令行工具）。没有的话它会自动安装。这一步不需要你做任何事。
第 2 步 — Agent 让你登录 GitHub。安装完成后，Agent 需要你授权它操作你的 GitHub 账号。它会在终端里显示一行命令，类似：gh auth login。你复制这行命令，在终端里回车运行。
第 3 步 — 浏览器认证。运行登录命令后，终端会显示一串验证码（Device Code），并提示你打开一个网址：https://github.com/login/device。打开这个网址，输入验证码，点击确认授权。完成后回到终端，Agent 会自动继续。
第 3 步可能出现的其他情况：如果你看到的不是验证码，而是弹出一个浏览器窗口让你直接点击 Authorize（授权），那更简单——用刚注册的 GitHub 账号登录、点同意就行。两种情况都是正常的认证方式，取决于你的系统环境。不管哪种，跟着屏幕提示做即可。
第 4 步 — 推送成功。认证完成后，Agent 替你创建仓库、关联本地项目、执行推送。终端最后会输出仓库的公开地址，形如：https://github.com/你的用户名/steves-repair。在浏览器里打开这个地址，能看到你的项目文件，说明推送成功。
以下是一次真实推送的完整终端输出（仿输出示意，你那边的用户名和项目名不同是正常的）：
终端 · steves-repair
steves-repair $ 帮我把这个项目推到 GitHub 上一个新仓库
检查 gh 是否已安装...
未检测到 gh，正在安装 GitHub CLI...
安装完成。
$ gh auth login
! First copy your one-time code: 880F-8315
Open this URL to continue in your web browser:
https://github.com/login/device
✓ Authentication complete.
✓ Logged in as 你的用户名
正在创建仓库 steves-repair 并推送...
Enumerating objects: 42, done.
Writing objects: 100% (42/42), done.
已推送到 https://github.com/你的用户名/steves-repair
分支 master 已建立。
最后一行看到带自己用户名的 github.com/... 网址，就到这步了。
提前确认：静态导出已在 1.9 配置完成
上一节迁移到 Next.js 时，你已经让 Agent 配置了静态导出并跑通了 build。如果构建曾成功（终端无红色报错），可以跳过这一步，直接进入下方部署平台的操作。
如果 1.9 的构建失败了，或不确定是否配置过，在终端中对 Agent 说："帮我检查这个项目是否已配置静态导出，如果没有就帮我配上，然后跑一次 build。"
如果构建失败（终端出现一整片红字）：不要自己猜测原因。将报错信息原样复制下来，发给 Agent，说"构建失败了，这是报错日志，帮我看怎么处理。" Agent 会根据具体报错给出修复方案。注意：如果你的 Agent 模型不支持识别图片（如 DeepSeek），请复制文字而非截图。
选择部署平台并连接仓库
▸ 操作：选择一个平台 → 登录 → 导入仓库 → 等待部署完成。以下为具体步骤：
本课程使用 Netlify 或 Cloudflare Workers，二选一即可。两个平台的操作流程完全相同，全部在网页上完成，Mac 和 Windows 没有区别。
- 打开你选择的平台网站，注册或登录账号。
- 找到"从 Git 导入项目"（Import from Git）的入口。平台会跳转到 GitHub 让你点击 Authorize（授权）——用刚注册的 GitHub 账号登录并同意授权。授权完成后回到平台，在仓库列表里选中你刚才 push 的那个仓库（例如 steves-repair）。这一步每个平台只做一次，之后再次推送代码时平台会自动重新构建和发布。
如果仓库列表为空、显示"No repositories found"：这是因为部署平台尚未获得该仓库的访问权限。打开 github.com/settings/installations，点击列表中的部署平台名称，在 "Repository access" 中选择 "Select repositories"，勾选你刚才 push 的仓库，点 Save。然后回到部署平台重新搜索即可。
- 平台自动开始构建并部署。由于你前面已配置了静态导出，构建过程通常很顺畅。构建完成后，平台会提供一个公开网址。
- 在浏览器里打开这个网址，确认 Steve's Repair 页面正常显示。
两个平台的默认网址格式：
- Netlify：
你的站名.netlify.app
- Cloudflare Workers：
你的站名.workers.dev
如果卡在某一步操作上，将当前界面的提示文字复制下来，发给 Agent，让它根据实际内容给你指路。
两个容易踩的坑，提前注意：
- 如果选择 Cloudflare，请使用 Workers，不要选 Cloudflare Pages。选错产品会导致部署流程不同，增加不必要的排查成本。
- 域名暂时使用平台提供的默认域名（
*.netlify.app 或 *.workers.dev）。购买并使用自定义域名（如 stevesrepair.com）留到后续阶段再处理。
上线成功长什么样
学员最常遇到的困惑是"我不确定是否已经算上线了"。给你两张对照小样(下面是仿界面示意,不是真网页)。左边是在电脑浏览器里打开那个公开网址该有的样子:地址栏是 *.netlify.app 或 *.workers.dev、前面有把小锁(https)、页面把 Steve's Repair 的内容显示出来了。右边是手机上打开同一个网址的样子。能看到,就真的是公网可访问了。对着判断就行。
🔒 steve-repair.netlify.app
地址栏是平台给的公开网址、有把小锁,页面正常显示 Steve's Repair。这就是上线了。
把网址发到手机点开,同样能看到。别人也一样能打开。
练习:把它真的发布出去
请真的去做。下面每一项都对着你真实的产物核对(GitHub 网页、平台界面、打开的网址、手机),诚实地勾。勾不上的那条,就是你还没真做到的地方。最后一项是手机自检,过了才算上线。
部署进度(对着真实产物逐项核对再勾):
勾完第一步,进度就往前走。
卡住了?三个最常见的坎,各一句解法:
- 第一次 push 让我输密码,输了又说不对:那不是要网页密码,是要个人访问令牌。在 GitHub 网页设置里生成一个,粘进终端当密码。拿不准就问 Agent:"push 要令牌,带我生成一个。"
- 平台连接仓库时列表里找不到我的仓库:多半是授权时没勾到这个仓库的权限。回到平台的 GitHub 授权设置,把这个仓库加进可访问范围,再回来刷新列表。
- 构建失败一片红(Next.js 没打包成功):先走路 A 让 Agent 配静态导出 output: 'export';还红,就把构建日志整段截图发给 Agent,让它对着报错改。
小测
部署平台在第 3 步对你的 Next.js 项目做了什么?
第一次 push 时,终端让你输密码却怎么都不对,最可能是什么原因?
注册卡住、push 要令牌、平台找不到仓库、构建失败一片红、手机打开是空白页,都不要紧。把当前那一屏截图,或报错日志,原样发到群里问问大家,或者直接向 Abel 或助教提问。