---
title: "5.2.3 Zeabur 部署实战（大陆首选）"
order: 4
---


![05-advanced_5.2-deployment_5.2.3-zeabur.png](/images/Basic/05-advanced_5.2-deployment_5.2.3-zeabur.png)
# 5.2.3 Zeabur 部署实战：大陆用户首选

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

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

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

## Zeabur 的优势

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

## 准备工作

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

- [ ] 第四章的待办清单项目已完成
- [ ] 按照 5.1 的步骤，项目已上传到 GitHub
- [ ] 有一个 GitHub 账号
- [ ] 将html主文件改名为index.html

如果还没上传到 GitHub，请先回到 [5.1 版本管理](../5.1-version-control/) 完成这一步。

## Step by Step 操作

### Step 1：访问 Zeabur 并登录

打开浏览器，访问 [zeabur.com](https://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"

::: tip 构建需要时间
第一次构建可能需要 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：访问你的网站

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

**你应该看到**：你的待办清单页面，和在本地看到的一模一样。注意仓库中html主文件名为index.html，否则可能无法直接访问。

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

## 成功验证清单

完成部署后，逐项验证：

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

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

## 常见问题

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

## 遇到问题？让 AI 帮你

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

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

[粘贴错误信息]

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

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

→ [5.2.4 Vercel 部署实战](./5.2.4-vercel.md)