ChatGPT 給了您一個 HTML 檔，接下來呢？三個步驟讓它變成有網址的網站
您手上有一個 .html 檔，但它還不是網站
很多老闆第一次請 ChatGPT 或 Claude 做網頁時，會拿到一個完整的 HTML 檔案。打開檔案，瀏覽器能顯示、功能也能動，看起來「已經做好了」。
但當您想把連結傳給客戶、或是放到公司網站上，才發現：這個檔案還在您的電腦裡，別人根本打不開。
這種情況不是您的問題——AI 工具產出的就是「能在本機瀏覽器執行的檔案」，它還沒變成「有網址、任何人都能開啟的網站」。這篇文章會帶您走完最後這一步。
單一 HTML 檔上線，三種方法由簡到繁
方法一：拖放上傳平台，30 秒拿到網址
<cite index="3-3,6-10">如果您的檔案是單一 HTML、不需要帳號、也不想碰 Git，Netlify Drop、Cloudflare Drop 或 Vercel Drop 都支援直接拖放上傳</cite>。操作流程通常是：
- 打開平台網頁
- 把 .html 檔拖進上傳區
- 平台自動產生一個 HTTPS 網址
<cite index="4-17">在 Supadrop 等類似平台上，您拖入 HTML 檔後 30 秒內就能拿到上線連結</cite>，適合展示原型、內部測試、或是只需要短期分享的情境。
免費方案通常會有流量限制或連結有效期，但對中小企業內部驗證「這個功能能不能動」來說，已經非常夠用。
方法二：GitHub Pages，免費且長期穩定
<cite index="2-7,2-8,2-9">GitHub Pages 是經典選擇：您把檔案推送到 GitHub 倉庫、開啟 Pages 功能，就能得到一個 username.github.io/repo 形式的網址</cite>。這個方法需要您有 GitHub 帳號、稍微懂一點 Git 操作，但優點是：
- 完全免費，<cite index="13-23">每月 100GB 流量額度足以應付絕大多數個人或中小企業專案</cite>
- 網址長期有效，不會因為免費方案到期而失效
- 支援自訂網域，您可以綁定公司自己的域名
<cite index="13-6,13-16">GitHub Pages 的使用條款禁止商業用途、電商交易等營利行為</cite>，如果您的網站是要給客戶下單、或是收費服務的展示頁，就不適合放在這裡。
方法三：商業用途選 Netlify 或 Cloudflare Pages
<cite index="13-15">Netlify 的服務條款允許您託管商業網站、客戶專案或任何需要收費的系統</cite>，而且：
- 支援表單處理、無伺服器函數等進階功能
- 每次 Git 推送都會自動部署，不用手動上傳
- 提供部署預覽功能，讓您在正式上線前先讓客戶或團隊檢查
<cite index="13-24,13-25">Netlify 免費方案每月提供 300 點數、每 GB 流量消耗 10 點，大約等於 30GB 免費流量</cite>，對流量不大的展示型網站已經夠用。若您的網站是要給客戶使用、或是未來可能收費，一開始就選商業友善的平台會省下很多麻煩。
圖片、CSS 分開時，要怎麼打包？
ChatGPT 或 Claude 有時會給您一包檔案：一個 index.html、一個 style.css、幾張圖片放在 images/ 資料夾裡。這種情況下：
- 拖放上傳平台：<cite index="4-1,4-2">您可以把整個資料夾壓縮成 ZIP 檔上傳，平台會自動解壓並將整個資料夾當成網站伺服</cite>
- GitHub Pages：把整個資料夾推送到倉庫即可，不需要壓縮
- Netlify / Cloudflare Pages：同樣支援資料夾或 ZIP 上傳
只要您的 HTML 檔裡圖片路徑寫的是相對路徑（例如 <img src="images/logo.png">），上傳後這些檔案的連結關係就會自動保持正確。
如果您拿到的是「所有 CSS、JavaScript 都內嵌在 HTML 裡的單一檔案」，那更簡單——<cite index="1-1,1-7">這種單一 HTML 檔可以直接部署、不需要靜態網站產生器或任何額外打包</cite>，拖進平台就能用。
什麼時候單一 HTML 檔就夠用？
如果您的需求是：
- 公司介紹頁、活動報名表、產品展示頁等內容固定、不常更新的頁面
- 內部工具的前端介面，後端 API 另外處理
- 展示原型給客戶或團隊確認功能
那麼一個 HTML 檔（或是 HTML + CSS + 幾張圖）就已經足夠。您不需要架設 WordPress、不需要租用虛擬主機、也不需要安裝 Node.js 或 PHP 環境。
但如果您的系統需要：
- 會員登入、資料庫查詢、訂單處理等後端邏輯
- 動態產生內容，例如每次開啟頁面都要從資料庫撈最新資料
- 金流串接、發票開立等台灣上線前常見的最後一關
那麼單一 HTML 檔就不夠了，您需要的是包含後端的完整系統。這時候問題不是「怎麼上傳 HTML」，而是「這個系統能不能安全上線」。
下一步：確認您的檔案真的可以上線
如果您手上的 HTML 檔是 AI 工具產生的、而且裡面包含了 API 串接、表單提交、或任何需要「把資料送出去」的功能，上線前建議先確認：
- API 金鑰有沒有寫死在程式碼裡？（參考這篇檢查清單）
- 表單送出後資料會去哪裡？有沒有做基本的輸入驗證？
- 如果頁面需要載入外部資源（Google Fonts、CDN 上的 JavaScript 函式庫），這些資源的網址在上線環境能不能正常取得？
單一 HTML 檔上線的技術門檻很低，但「能動」跟「能安全地給客戶用」是兩回事。
AI 上線專家專門協助台灣中小企業與小型團隊，把手上做到一半、或是 AI 工具產出的系統安全上線。如果您不確定手上的 HTML 檔上線後會不會出問題、或是需要有人幫您做基本的資安與功能檢查，歡迎預約一次免費程式碼健診，我們會告訴您目前的檔案距離「能安心交給客戶」還有哪些步驟要走。