小白AI编程

Appearance

返回7 天 AI 编程入门计划

进阶：把小网页部署上线 ​

Day 07 做出的网页目前只保存在你的电脑里。别人无法打开你电脑中的 index.html，所以还不能把它当成一个真正的网站分享出去。

这一篇，我们把 codex-practice 上传到 GitHub，再让 Vercel 自动发布，最后获得一个可以转发给朋友的网址。

先理解：GitHub 和 Vercel 分别做什么 ​

GitHub 是什么 ​

GitHub 可以理解为“专门保存项目文件的云端仓库”。

电脑里的 codex-practice 是本地项目，上传到 GitHub 后，云端会保存一份代码。以后修改网站，还可以继续把新版本上传上去。

Vercel 是什么 ​

Vercel 是一个网站部署平台。它会读取 GitHub 仓库里的网页文件，把这些文件放到可以被互联网访问的服务器上，并生成一个网址。

三者之间的关系 ​

text
Codex 帮你制作和修改网页
        ↓
GitHub 保存网页项目
        ↓
Vercel 读取 GitHub 项目并发布
        ↓
得到可以转发给朋友的网址

“上传”和“上线”不是一回事

上传到 GitHub，只代表代码已经保存在云端；部署到 Vercel 后，普通访客才可以像访问其他网站一样打开你的网页。

开始前检查 ​

开始前请确认：

  • 已完成 Day 07，codex-practice 中有 index.html、style.css、script.js
  • 已注册并验证 GitHub 账号
  • 已使用 GitHub 账号登录 Vercel
  • 网页中没有密码、API Key、身份证、手机号等不应公开的信息

上线就代表公开

公开 GitHub 仓库和 Vercel 网站中的内容，任何人都可能看到。上传前一定让 Codex 检查敏感信息，但最终仍要由你自己确认。

第一步：让桌面端 Codex 做上线前检查 ​

在桌面端 Codex 中打开 codex-practice，发送：

text
我要把当前网页公开上传到 GitHub，并部署到 Vercel。
请先只检查，不要修改文件，也不要执行上传或部署。

请检查：
1. 是否存在 index.html、style.css、script.js；
2. index.html 是否正确引用 style.css 和 script.js；
3. 是否包含密码、API Key、Token、手机号、身份证或其他隐私信息；
4. 是否使用了只能在我电脑上访问的本地文件路径；
5. 这个项目是否可以作为普通静态网页直接部署到 Vercel。

请用大白话告诉我检查结果。

如果 Codex 发现问题，先让它说明准备修改什么，再确认修改。不要在没有看懂检查结果时直接上传。

第二步：创建 GitHub 仓库 ​

  1. 打开 GitHub 并登录。
  2. 点击页面右上角的 +，选择 New repository。
  3. Repository name 填写 my-first-webpage。
  4. Description 可以填写“我的第一个 AI 编程网页”。
  5. 初学阶段选择 Public，这样 Vercel 连接和朋友查看更直观。
  6. 暂时不要勾选自动创建 README、.gitignore 或 License，避免与本地项目产生重复文件。
  7. 点击 Create repository。

创建完成后，GitHub 会显示这个仓库的网址，格式类似：

text
https://github.com/你的用户名/my-first-webpage

第三步：把项目上传到 GitHub ​

下面使用 Git 和 GitHub CLI 连接账号。它们是运行在终端里的官方工具，Codex 可以帮你执行命令，但 GitHub 登录和授权必须由你本人确认。

1. 先让 Codex 检查工具 ​

在桌面端 Codex 中发送：

text
请检查当前电脑是否已经安装 Git 和 GitHub CLI。
只运行查看版本的命令，不要安装软件，不要修改文件，也不要上传项目。
请告诉我检查结果。

如果缺少工具，分别从 Git 官网 和 GitHub CLI 官网 安装。安装后重新打开 ChatGPT 桌面客户端，再让 Codex 检查一次。

2. 登录 GitHub ​

让 Codex 在当前项目中运行：

text
请在终端运行 gh auth login，帮助我登录 GitHub。
出现需要选择、复制验证码或打开浏览器授权的步骤时暂停，让我自己完成。
不要读取或记录我的验证码，也不要执行其他命令。

按照终端提示选择 GitHub.com 和浏览器登录。浏览器打开后，由你本人确认授权。

验证码只在官方页面填写

不要把登录验证码、密码或 Token 发给 Codex，也不要粘贴到聊天群或陌生网站。

3. 让 Codex 上传当前项目 ​

回到刚创建的 GitHub 仓库，复制仓库网址。然后把下面的“仓库网址”替换成你的真实地址：

text
请把当前 codex-practice 项目上传到这个 GitHub 仓库：
仓库网址：https://github.com/你的用户名/my-first-webpage

要求：
1. 再次确认当前目录是 codex-practice；
2. 检查不要上传密码、API Key、Token 或隐私文件；
3. 初始化 Git 仓库；
4. 创建第一次提交，提交说明写“发布第一个小网页”；
5. 将分支命名为 main；
6. 连接我提供的 GitHub 仓库并上传；
7. 遇到登录、授权、覆盖远程内容或删除文件时必须暂停，等我确认；
8. 完成后告诉我执行结果和 GitHub 仓库地址。

Codex 请求执行命令时，检查操作目录和仓库地址正确后再允许。

上传完成后刷新 GitHub 仓库页面，应该能看到 index.html、style.css 和 script.js。

第四步：让 Vercel 连接 GitHub ​

这一步主要在 Vercel 网页中完成，不需要把 GitHub 密码交给 Codex。

  1. 打开 Vercel 并使用 GitHub 登录。
  2. 点击 Add New… → Project。
  3. 在仓库列表中找到 my-first-webpage。
  4. 如果看不到仓库，点击调整 GitHub 权限，只授权需要部署的仓库即可。
  5. 点击仓库右侧的 Import。

第五步：配置并部署网页 ​

这是普通的 HTML、CSS、JavaScript 静态网页，不需要安装依赖。

在 Vercel 配置页面中：

  • Project Name：可以保留 my-first-webpage
  • Framework Preset：选择 Other，或使用 Vercel 自动识别结果
  • Root Directory：保持默认的项目根目录
  • Build Command：保持为空
  • Output Directory：保持为空
  • Environment Variables：本项目不需要填写

确认后点击 Deploy。

等待 Vercel 显示部署成功，你会得到类似下面的网址：

text
https://my-first-webpage-你的标识.vercel.app

点击网址，确认它能正常打开。

第六步：把网址转发给朋友 ​

不要只在自己的电脑上测试。复制 Vercel 网址，通过微信或其他方式发给朋友，请对方检查：

  • 页面能否打开
  • 文字和图片是否正常显示
  • 按钮是否有效
  • 手机屏幕下是否排版正常

朋友能在自己的手机或电脑上打开，才说明网页真正上线了。

关于 Vercel 默认网址

Vercel 默认提供的是一个类似 xxx.vercel.app 的平台域名。这个网址只是 Vercel 分配给你的测试和分享地址，不等于你已经拥有了自己的独立网站域名。

由于 Vercel 服务和网络环境的原因，在部分地区、部分网络下，打开 .vercel.app 网址可能需要配置科学上网工具（梯子），手机和电脑都一样；如果朋友所在的网络打不开，可以先让对方检查网络环境。

如果以后想让别人通过更稳定、属于你自己的网址访问，可以继续学习“购买域名”和“把自己的域名绑定到 Vercel”。例如把 yourname.com 绑定后，朋友访问的就是你的独立域名，而不是 Vercel 分配的地址。

第七步：修改网站并重新上线 ​

以后仍然在本地 codex-practice 中让 Codex 修改网页。例如：

text
请把网页顶部的一句话介绍改成“我正在用 AI 学习制作网站”。
只修改必要文件，完成后告诉我改了什么。暂时不要上传。

在本地浏览器检查无误后，再发送：

text
请检查本次修改，确认没有敏感信息后提交到 Git，并推送到已经连接的 GitHub 仓库。
提交说明写“更新首页介绍”。
遇到覆盖、冲突、删除或登录授权时暂停让我确认。

GitHub 收到新版本后，Vercel 通常会自动重新部署。稍等片刻，再刷新公开网址查看更新。

text
本地修改 → 推送 GitHub → Vercel 自动部署 → 公开网站更新

常见问题 ​

GitHub 仓库里有文件，但 Vercel 页面是 404 ​

确认 index.html 位于仓库最外层，而不是藏在另一个子文件夹里。可以让 Codex只读检查项目结构，不要让它在没有确认的情况下移动全部文件。

网页打开了，但是没有样式或按钮没反应 ​

通常是 index.html 引用 style.css 或 script.js 的路径不正确。把公开网址和现象告诉 Codex，让它检查相对路径。

Vercel 找不到 GitHub 仓库 ​

在 Vercel 的 GitHub 授权设置中，确认已经允许它访问 my-first-webpage。不需要授权全部仓库。

修改后网站没有立即变化 ​

先确认新代码已经出现在 GitHub，再到 Vercel 项目的 Deployments 页面查看最新部署是否完成。部署完成后刷新网页。

完成检查 ​

  • [ ] 能说清 GitHub 和 Vercel 的区别
  • [ ] Codex 已完成上线前安全检查
  • [ ] GitHub 中能看到三个网页文件
  • [ ] Vercel 已成功导入 GitHub 仓库
  • [ ] 获得了 .vercel.app 公网网址
  • [ ] 朋友可以在另一台设备上打开网页
  • [ ] 知道以后修改网站后要再次推送到 GitHub

上一篇：Day 07：用桌面端 Codex 做出第一个小网页 · 返回课程目录