---
group: 開發者文件
order: 36
---
# 把純前端 Web 服務部署到網路上

> 用歐噴資料庫做好了純前端 web 服務（單一 index.html）後，想讓其他人也能用？這篇介紹幾種常見的部署方式，從「完全不需要帳號」到「適合長期維護」都有。

---

## 選項比較

| 方式 | 難易度 | 需要帳號 | 適合情境 |
|------|--------|---------|---------|
| Claude Artifacts | ⭐ 最簡單 | Claude 帳號 | 快速分享、互動展示 |
| ChatGPT Sites | ⭐⭐ 簡單 | ChatGPT 帳號與 Sites 權限 | 由 ChatGPT 協助託管與分享 |
| Netlify Drop | ⭐⭐ 簡單 | 不需要（有帳號可保留網址） | 想要固定網址但懶得設定 |
| GitHub Pages | ⭐⭐⭐ 中等 | GitHub 帳號 | 長期維護、想要版本控制 |
| Cloudflare Pages | ⭐⭐⭐ 中等 | Cloudflare 帳號 | 需要高速 CDN、自訂網域 |

---

## 選項一：Claude Artifacts（最快，直接在對話裡分享）

Claude 可以直接把 HTML 渲染成可互動的 app，並產生分享連結。

**做法：**
1. 在 Claude 對話中貼上你的 `index.html` 全部內容
2. 說「請把這段程式碼做成 Artifact」
3. Claude 會在對話旁邊開啟一個互動視窗，可以直接操作
4. 點「分享」產生公開連結，對方不需要 Claude 帳號也能開啟

**限制：**
- 分享連結是 Claude Artifacts 系統提供的網址，不是自己的網域
- 如果程式依賴瀏覽器儲存空間，資料會留在各使用者自己的瀏覽器，不會自動變成多人共用資料

---

## 選項二：ChatGPT Sites（由 ChatGPT 直接託管）

ChatGPT Sites 可以從既有專案建立、託管、修改並分享網站或互動式 Web app。ChatGPT 網頁版的 Work，以及 ChatGPT 桌面版的 Work／Codex，都可以啟動 Sites 工作流程。

**做法：**
1. 在 ChatGPT 開啟 Sites，或在提示中加入 `@Sites`
2. 提供包含 `index.html` 的專案資料夾
3. 對 ChatGPT 說：

   > 請把這個專案部署成網站。先檢查是否相容，必要時做最小修改；確認預覽正常後再發布，最後提供部署網址。

4. 檢查 ChatGPT 產生的預覽與功能
5. 先儲存版本，確認無誤後再發布
6. 設定網站的存取範圍，再把網址分享給其他人

**限制：**
- Sites 目前是公開測試服務，使用量與公開狀態會受到方案及工作區設定影響
- 預設網址是 ChatGPT Sites 提供的網址，不是自己的網域；自訂網域功能視帳號與工作區是否開放而定
- 每次部署都是正式環境，應先檢查預覽，再要求發布
- 如果程式依賴瀏覽器儲存空間，資料會留在各使用者自己的瀏覽器；若要多人共用或跨裝置保存，仍需要資料庫或其他後端儲存服務

---

## 選項三：Netlify Drop（最快的部署選項，不需要帳號）

只要把檔案拖進去就好。

**做法：**
1. 前往 [app.netlify.com/drop](https://app.netlify.com/drop)
2. 把 `index.html` 直接拖到頁面上的拖放區
3. 幾秒後自動取得一個像 `https://amazing-fox-abc123.netlify.app` 的網址
4. 把網址分享給別人即可

**選填（保留網址）：**
- 免費註冊 Netlify 帳號後，可以把這個部署認領到你的帳號，避免到期消失
- 也可以在 Netlify 設定自訂網域

**限制：**
- 沒登入帳號的話，部署可能在一段時間後失效
- 無法直接 push 更新（要更新就重新拖一次）

---

## 選項四：GitHub Pages（推薦給想長期維護的人）

免費、穩定、支援版本控制，適合當作正式發佈的平台。

**做法：**
1. 在 GitHub 建立一個新的 repository（public 或 private + Pages 均可）
2. 把 `index.html` 推上去：

   ```
   git init
   git add index.html
   git commit -m "initial commit"
   git remote add origin https://github.com/你的帳號/repo名稱.git
   git push -u origin main
   ```

3. 到 repo Settings → Pages → Source，選 `Deploy from a branch`，Branch 選 `main`，Folder 選 `/ (root)`
4. 幾分鐘後就可以透過 `https://你的帳號.github.io/repo名稱/` 存取

**優點：**
- 完全免費
- 更新只需要 `git push`
- 可以設定自訂網域（CNAME）
- 有完整的版本歷史

**限制：**
- Public repo 的程式碼是公開的（但 index.html 本來就是純前端，沒有機密）
- 設定比 Netlify Drop 繁瑣一點

---

## 選項五：Cloudflare Pages（適合需要自訂網域的場景）

與 GitHub Pages 類似，但 CDN 速度更快，設定自訂網域更方便。

**做法：**
1. 到 [pages.cloudflare.com](https://pages.cloudflare.com/) 登入（需 Cloudflare 帳號）
2. 建立新 Project → 連結 GitHub repo，或直接上傳檔案
3. 部署後取得 `*.pages.dev` 網址
4. 可在 Cloudflare 設定自訂網域（需把 DNS 托管到 Cloudflare）

---

## 關於 Token 安全性

無論選哪種部署方式，這個追蹤器的 token 都存在使用者自己的瀏覽器 `localStorage`，不會暴露在伺服器或網址上，是安全的做法。不同人開啟同一個網址，各自有各自的 token（各自要完成授權）。

## AI agent 引導使用者的建議台詞

若使用者說「我想讓朋友也能用」：

目前這個追蹤器存在你本機的 `index.html`，你的朋友需要有自己的檔案才能用。若想讓大家都能用同一個網址：

- 最快：把程式碼貼給 Claude，讓它做成 Artifact 並分享連結
- ChatGPT：在 ChatGPT 開啟 Sites，提供這個專案，並說「請把這個專案部署成網站。先檢查是否相容，必要時做最小修改；確認預覽正常後再發布，最後提供部署網址。」
- 不需帳號：到 [netlify.com/drop](https://app.netlify.com/drop) 拖放上傳，幾秒取得網址
- 長期維護：推到 GitHub Pages（需 GitHub 帳號，設定約 5 分鐘）

請問你想用哪種方式？我可以幫你完成操作步驟。