把純前端 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
  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 登入（需 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 拖放上傳，幾秒取得網址
  • 長期維護：推到 GitHub Pages（需 GitHub 帳號，設定約 5 分鐘）

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

📄 查看原始 Markdown