把 localhost 网站发布成别人能打开的网址

先准备账户并通过项目检查

这是一条给第一次发布网站的人准备的浏览器优先路径。开始前准备可登录的 GitHub 与 Vercel 账户，并确认能接收各自的验证信息。不要把密码、验证码、API key、部署 token 或私钥交给 Agent。目前还没有真实读者独立走完本教程，因此按钮名称和权限提示仍需继续核验。

1. 准备 GitHub 与 Vercel 账号

   操作

   分别在浏览器登录 GitHub 和 Vercel，确认页面显示的是你准备使用的个人账户或团队；只在服务商自己的登录页面完成验证。

   你应该看到

   两个控制台都能打开，并且你知道仓库和项目将归属于哪个账户。

   如何确认

   刷新两个控制台仍保持登录，账户头像或团队名称与预期一致。

   卡住时

   • 无法登录时先完成邮箱验证或账户恢复，不要把验证码发给 Agent。
   • 团队账户没有创建权限时，改用你有权限的个人账户，或请团队管理员授权。

2. 记录检查证据

   操作

   让 Codex 阅读 package.json、README 或框架文档，解释并运行项目真实存在的 lint、typecheck、test 和 build；保留命令、退出码与最终摘要。

   你应该看到

   项目要求的检查全部退出码为 0，并产生可部署的构建产物。

   如何确认

   修复后重新运行完整检查，不接受“应该通过”作为证据。

   卡住时

   • 失败时先保留完整日志并修复第一个根因，不要删除测试或关闭类型检查。

先在 GitHub 建空仓库，再让 Codex 推送

GitHub 官方网页支持创建新仓库。已有本地项目时，不要预先添加 README、.gitignore 或 license，以免制造不必要的合并冲突。Codex 可以解释并执行本地 Git 命令，但 push 会把文件发到远端，必须先核对目标仓库并由你明确授权。

1. 创建空的 GitHub 仓库

   操作

   在 GitHub 右上角选择 New repository，选择正确 Owner，填写仓库名与可见性；已有本地文件时不要勾选 README、.gitignore 或 license，然后选择 Create repository。

   你应该看到

   浏览器进入新仓库的 Quick Setup 页面，并显示该仓库的 HTTPS 地址。

   如何确认

   页面没有项目文件，只显示把现有仓库推送到 GitHub 的设置提示；Owner、仓库名和可见性都正确。

   卡住时

   • 若误加了初始文件，最简单的首次练习是删除这个空仓库后按正确选项重建；不要在不理解冲突时强制推送。

2. 让 Codex 初始化并提交

   操作

   让 Codex 先解释再依次完成 git init、git status、git add 和 git commit；提交前检查待提交文件，不得包含 .env、密钥、个人资料或大体积无关文件。

   你应该看到

   本地项目有一个 main 分支和至少一个提交，git status 显示没有遗漏的预期改动。

   如何确认

   让 Codex 显示 git status 与最近一次提交摘要，并用普通语言说明哪些文件会被上传。

   卡住时

   • 如果 Git 要求姓名或邮箱，只配置你愿意写入提交记录的信息。
   • 发现敏感文件时先停止，加入忽略规则并确认它没有进入提交历史。

3. 明确授权后推送到 GitHub

   操作

   把 Quick Setup 页的 HTTPS 仓库地址交给 Codex，让它解释 git remote add origin、分支设置和 git push 的影响；核对地址后，明确授权这一次 push。通过浏览器或系统凭据管理器登录，不要把 token 写进代码或聊天。

   你应该看到

   push 成功，GitHub 仓库页面显示本地文件和最近提交。

   如何确认

   刷新 GitHub 页面，核对仓库地址、分支、文件列表和提交信息；确认没有密钥或隐私文件。

   卡住时

   • 出现 authentication failed 时使用 GitHub 提供的浏览器登录或凭据流程，不要把个人访问 token 粘贴给 Agent。
   • 出现 remote already exists 时先让 Codex 显示现有 remote，确认无误后再修改。

从 Vercel 控制台导入 GitHub 仓库

Vercel 当前文档的控制台路径是 Add New… 后选择 Project，再从已有 Git 仓库导入。界面可能随账户、团队和时间变化；看不到仓库时，优先检查当前团队、GitHub 连接和仓库权限。

1. 从 Vercel 导入仓库

   操作

   在 Vercel Dashboard 选择正确团队，点击 Add New…，选择 Project；连接或选择 GitHub，在仓库列表找到刚才的仓库，点击 Import。

   你应该看到

   进入该仓库的新项目配置页面，页面显示仓库名和待部署设置。

   如何确认

   核对 Vercel 团队、GitHub Owner 与仓库名，确保没有导入同名旧仓库。

   卡住时

   • 仓库不可见时检查 Vercel 的 GitHub App 是否获准访问该仓库，以及你是否拥有导入所需权限。
   • 团队选择错误时返回 Dashboard 切换团队，不要重复创建同名项目。

2. 检查构建设置并等待 Ready

   操作

   检查 Framework Preset、Root Directory、Build Command 和 Output Directory。除非项目文档明确要求，否则保留框架检测的默认值；点击 Deploy 后等待状态变为 Ready。

   你应该看到

   Vercel 完成构建并提供一个 https 开头的部署网址。

   如何确认

   打开 Deployment 页面，确认状态为 Ready，所用提交与刚推送到 GitHub 的提交一致。

   卡住时

   • 构建失败时先读 Build Logs 的第一处实际错误，并回到本地修复和重新检查。
   • 若项目在子目录，核对 Root Directory；不要靠反复点击 Deploy 掩盖配置错误。

3. 无痕检查首页和深层链接

   操作

   复制 Vercel 部署网址，在无痕窗口分别打开首页和一个真实深层链接，例如项目已有的 Guide、About 或内容详情页。关闭本地开发服务后再重复一次。

   你应该看到

   两个网址都直接显示正确页面，不要求你的账户登录，也不返回 404。

   如何确认

   核对标题、主要按钮、移动端布局和最新内容；确认地址栏不是 localhost。

   卡住时

   • 首页正常但深层链接 404 时检查框架的静态路由与输出模式。
   • 出现登录页时确认访问的是公开 Deployment URL，而不是需要账户权限的控制台页面。

命令行部署只作为备选

初次发布优先完成上面的 GitHub 与 Vercel 浏览器路径，因为每一步都能在控制台看到归属和状态。只有浏览器导入确实受阻、你理解登录与项目关联后，才按 Astro 与 Vercel 的当前官方文档使用 CLI；不要让 Agent 自行创建账户、替你同意条款或在未核对项目时直接发布。

平台网址正常后再处理自定义域名

平台部署网址通过无痕验收后，再添加你拥有的域名并按 Vercel 当前提示配置 DNS。这样域名打不开时，你仍知道 GitHub 推送和网站构建本身是正常的。

1. 验证域名层

   操作

   在 Vercel 项目中添加域名，按当前提示配置 DNS，并等待平台确认；不要公开域名注册账户、验证码或 token。

   你应该看到

   自定义域名显示配置正确并启用 HTTPS。

   如何确认

   在不同网络或无痕窗口打开域名，核对首页和同一个深层链接。

   卡住时

   • DNS 传播期间不要反复创建冲突记录。
   • 若域名仍指向旧项目，核对项目绑定与 DNS 目标，同时保留已正常的平台网址。