1.10
第一章 · 第 10 节

上线(一):推到 GitHub

这一节你会拿到

你的代码会躺到 GitHub 上——部署平台只能从那里取货,所以这是上线的前半程。下一节接上平台,就能拿到公开网址了。

回头一题

这道题不考这一节,考前面学过的。想不起来就回去翻一眼再答——记不住的东西,真用的时候一样会卡。

「构建(build)」这一步,做的是把什么变成什么?

你的 Steve's Repair 网站现在只存在于你自己的电脑里。这一节把它放到网上,拿一个公开网址。这是 Phase 1 的毕业作品交付动作。

先搞清楚你要传上去的是什么

上一节 1.9 你把网站从一个个 HTML 文件迁成了 Next.js 项目——文件夹内不再是 .html 文件,而是 .js.tsx 等框架代码,以及 package.jsonnode_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),请复制文字而非截图。

前半程核对(对着真实产物逐项勾):

卡住了?push 这一步最常见的坎

小测:push 这一关

第一次 push 时,终端让你输密码却怎么都不对,最可能是什么原因?

注册卡住、push 要令牌、终端一片红,都不要紧。把当前那一屏截图,或报错日志,原样发到群里问问大家,或者直接向 Abel 或助教提问。

答对了!