Vibe Vibe

主题

5.2.3 Zeabur 部署实战：大陆用户首选 ​

Zeabur 是一个由国人团队开发的部署平台，它的免费域名在国内可以正常访问，这是选择它的最重要原因。

经过本节操作，你将获得 ​

  • 一个可以在国内正常访问的网址
  • 自动部署能力：代码更新后自动同步
  • 完整的部署流程经验

Zeabur 的优势 ​

特点说明
大陆可访问免费域名 *.zeabur.app 没有被墙
中文支持界面支持中文，客服也是中文
自动检测自动识别你的项目类型，无需配置
免费额度每月 $5 免费额度，小项目完全够用
支付宝付款如果需要升级，可以用支付宝

准备工作 ​

在开始之前，确认你已经完成：

  • [ ] 第四章的待办清单项目已完成
  • [ ] 按照 5.1 的步骤，项目已上传到 GitHub
  • [ ] 有一个 GitHub 账号

如果还没上传到 GitHub，请先回到 5.1 版本管理 完成这一步。

Step by Step 操作 ​

Step 1：访问 Zeabur 并登录 ​

打开浏览器，访问 zeabur.com。

点击右上角的"登录"按钮，选择"使用 GitHub 登录"。

[配图建议] 画面内容：Zeabur 首页，箭头指向右上角的登录按钮 Prompt：clean screenshot style illustration of a modern web dashboard homepage, login button highlighted, minimal design, light background, soft shadows, 8k --ar 16:9

你应该看到：GitHub 授权页面，询问是否允许 Zeabur 访问你的账号。

点击"Authorize"（授权）。

Step 2：创建项目 ​

登录后，你会看到 Zeabur 的控制台。

点击"创建项目"（Create Project）按钮。

[配图建议] 画面内容：Zeabur 控制台，突出显示"创建项目"按钮 Prompt：minimal dashboard interface illustration, create project button prominently displayed, clean layout, pastel colors, professional look, 8k --ar 16:9

你应该看到：弹出一个对话框，让你选择服务器区域。

Step 3：选择服务器区域 ​

在弹出的对话框中，选择服务器区域。

推荐选择：

  • 如果你在中国大陆：选择 Asia（亚洲）或 Hong Kong（香港）
  • 如果你在其他地区：选择离你最近的区域

选择后点击"创建"。

你应该看到：一个空的项目面板，显示"添加服务"按钮。

Step 4：添加服务 ​

在项目面板中，点击"添加服务"（Add Service）。

在弹出的菜单中，选择"部署你的代码"（Deploy your code）或"Git"。

[配图建议] 画面内容：服务选择菜单，突出"部署代码"选项 Prompt：dropdown menu UI illustration, deploy code option highlighted, modern interface design, clean white background, subtle shadows, 8k --ar 16:9

Step 5：授权并选择仓库 ​

如果是第一次使用，Zeabur 会请求访问你的 GitHub 仓库。

点击"配置 GitHub"，然后选择"授权所有仓库"或仅授权你的待办清单仓库。

授权完成后，你会看到你的 GitHub 仓库列表。

找到并选择你在第四章创建的待办清单仓库（比如 my-todo-list）。

你应该看到：Zeabur 开始检测你的项目类型。

Step 6：等待构建 ​

选择仓库后，Zeabur 会自动开始构建你的项目。

这个过程通常需要 1-3 分钟。你可以看到构建日志实时滚动。

你应该看到：

  • 状态从"Building"变成"Deploying"
  • 最终变成绿色的"Running"

构建需要时间

第一次构建可能需要 2-3 分钟，耐心等待。如果超过 5 分钟还没完成，可能是项目有问题。

Step 7：生成域名 ​

构建成功后，你的服务会显示为"Running"状态。

但此时还没有公开网址。你需要为它生成一个域名。

  1. 点击你的服务（待办清单）
  2. 在服务详情页，找到"网络"（Networking）选项卡
  3. 点击"生成域名"（Generate Domain）

[配图建议] 画面内容：服务详情页的网络选项卡，突出"生成域名"按钮 Prompt：web dashboard networking settings, generate domain button highlighted, clean interface, light theme, professional design, 8k --ar 16:9

你应该看到：系统自动生成一个类似 your-project-abc123.zeabur.app 的域名。

Step 8：访问你的网站 ​

点击生成的域名链接，或者复制链接在新标签页打开。

你应该看到：你的待办清单页面，和在本地看到的一模一样。

恭喜！你的作品现在已经在互联网上了。

成功验证清单 ​

完成部署后，逐项验证：

  • [ ] 服务状态显示绿色的"Running"
  • [ ] 点击域名链接能打开页面
  • [ ] 页面显示正常，样式没有丢失
  • [ ] 可以正常添加、删除、完成任务
  • [ ] 用手机浏览器打开链接，也能正常访问

最后一项尤其重要——这证明了你的网站真的可以从任何设备访问。

常见问题 ​

问题可能原因解决方法
构建失败代码有语法错误先在本地确认项目能正常运行
页面空白入口文件路径不对确保 index.html 在项目根目录
样式丢失CSS 路径使用了绝对路径改用相对路径，如 ./style.css
功能不工作JavaScript 报错打开浏览器控制台查看错误信息

遇到问题？让 AI 帮你 ​

如果部署过程中遇到问题，可以把错误信息发给 AI：

我在 Zeabur 上部署我的待办清单项目，遇到了这个错误：

[粘贴错误信息]

我的项目是一个纯 HTML/CSS/JavaScript 的静态网站。
请帮我分析原因并给出解决方案。

恭喜你

如果你成功看到了自己的待办清单网页，这意味着你已经完成了从"本地开发"到"全球发布"的跨越。这是一个了不起的里程碑。

→ 5.2.4 Vercel 部署实战