搜尋「HTML 檔案託管」的人,多半不是想研究一整套雲端架構。你手上可能只有一個 index.html,旁邊放著 style.css、幾張圖片,或是一個從設計工具、AI 工具、課堂作業匯出的資料夾。你要的第一件事很簡單:產生一個別人打得開的公開連結。
這和「挑一間網站主機」不是同一個問題。HTML 檔案上線的第一步,是把檔案放到正確位置,確認瀏覽器能載入 CSS、圖片和 JavaScript,再保留之後接自訂網域的空間。

什麼樣的檔案可以當成 HTML 網站?
對靜態網站來說,常見輸入大概有這幾種:
| 類型 | 上傳內容 | 常見用途 |
|---|---|---|
| 單一 HTML 檔案 | index.html | 線上履歷、活動頁、快速原型 |
| 靜態網站資料夾 | index.html、CSS、JS、圖片 | 線上作品集、小型官網、登陸頁 |
| 框架建置輸出 | dist、build、out、public | Vite、React、Astro、Next.js static export |
| ZIP 壓縮檔 | 包含網站檔案的資料夾 | 客戶交付、AI 生成網站、下載模板 |
最重要的是根目錄。一般靜態網站會期待上傳資料夾的最上層有 index.html。如果你的 ZIP 打開後是 my-site/index.html,就要上傳 my-site 這個資料夾,或確認平台能正確處理這層巢狀結構。
最快的路徑:先上傳完成檔案
小型靜態網站通常不需要一開始就接 Git、CI 或複雜的部署流程。先把完成檔案上傳,反而最能抓出真正問題。
- 把
index.html放在資料夾最上層。 - 將 CSS、JavaScript、圖片整理到
css、js、images或assets這類清楚的資料夾。 - 上傳資料夾或 ZIP。
- 開啟產生的 HTTPS 公開連結。
- 點過每個頁面、按鈕和圖片路徑。
- 確認要保留後,再登入認領專案或接上自訂網域。
最後一步很實際。很多網站一開始只是臨時工作:客戶預覽、課堂作業、登陸頁草稿、AI 生成的 mockup。要求使用者在第一個網址之前就先建立完整流程,會把力氣花在錯的地方。
DeployPages 的首頁上傳區就是為這種情境設計。你可以先上傳靜態檔案並發佈網站,拿到可開啟的 HTTPS 連結,再決定要不要把專案保存在帳號裡。需要更細的步驟,可以看 HTML 部署指南。
上線前先檢查檔案路徑
許多「本機可以,放上網就壞掉」的問題,不是託管平台壞了,而是路徑原本就只在你的電腦上成立。
上傳前先搜尋這些模式:
| 本機常見寫法 | 上線後較安全的寫法 | 原因 |
|---|---|---|
C:\Users\you\Desktop\logo.png | ./images/logo.png | 上線後的瀏覽器讀不到你的硬碟。 |
/Users/you/site/style.css | ./style.css | 電腦上的絕對路徑不會存在於網站上。 |
file:///.../script.js | ./script.js | file:// 只在本機預覽時有效。 |
href="/about.html" | href="./about.html" | 根目錄相對路徑依賴部署後的網站根目錄。 |
如果網站有多個頁面,不要只看首頁。從公開連結逐頁點進去,通常第一個壞掉的是導覽列、圖片或下載連結。
什麼時候瀏覽器上傳比 Git 更適合?
Git 很適合長期開發、多人審閱、重複上線的專案。但它不一定適合第一個公開連結。
瀏覽器上傳更適合這些情境:
- 你收到的是設計師、客戶、產生器或 AI 工具給的靜態資料夾。
- 你需要先發一個預覽連結,再決定要不要建立 repo。
- 你只是發佈一次性活動頁、線上履歷、課堂作品或測試頁。
- 你想先檢查建置輸出,再決定是否接 CI。
- 負責上線的人不是寫程式的人。
這也是為什麼成熟平台仍然保留直接上傳。Netlify Drop 文件明確處理資料夾或 ZIP 的上傳情境,也提到 AI 程式碼生成工具產生的專案。Cloudflare Pages Direct Upload 文件則說明如何從本機上傳預先建置好的靜態資源。市場訊號很清楚:很多人只是需要把網站檔案放上線,先拿到網址。
常見工具該上傳哪個資料夾?
不同工具會把最後輸出放在不同資料夾:
| 工具或技術 | 上傳這個 |
|---|---|
| 純 HTML/CSS/JS | 包含 index.html 的資料夾 |
| Vite | npm run build 後的 dist |
| Create React App | npm run build 後的 build |
| Astro | npm run build 後的 dist |
| Next.js static export | export 後的 out |
| 下載的 HTML 模板 | 解壓縮後、根目錄有 index.html 的模板資料夾 |
| AI 生成靜態網站 | 匯出的網站資料夾,不是提示詞對話紀錄 |
如果不確定哪個資料夾才對,先找有 index.html 和編譯後 assets 的那個。src 這類原始碼資料夾通常不是要直接發佈的內容。
什麼樣的 HTML 公開連結比較值得信任?
一次性測試連結可以很簡單。要寄給客戶、招募主管、投資人或廣告受眾的連結,就需要多檢查幾件事:
- 預設使用 HTTPS,而不是不安全的
http://。 - 預覽 URL 穩定,對方之後還能再打開。
- 修正後可以快速替換成新版本。
- 之後能接自訂網域。
- 新版本出錯時,可以還原到先前版本。
- 有基本統計資料,不必猜對方到底有沒有打開。
DeployPages 的路徑是先快速上傳,再視需要加入 自訂網域、全球 edge 傳遞、統計資料 和 還原到先前版本。網站從測試頁變成正式頁時,不需要重新換一套工具。
上傳前兩分鐘檢查清單
上傳前做這些事,通常比多比較三家平台更有用:
- 打開資料夾,確認
index.html在最上層。 - 如果 HTML 會引用檔名,避免空白、罕見符號和大小寫混亂。
- 盡量使用小寫檔名。
Logo.PNG和logo.png在不少正式環境不是同一個檔案。 - 搜尋 HTML 裡是否還有
file://、localhost或你的電腦使用者名稱。 - 確認根目錄結構後,再壓縮成 ZIP。
- 發佈後用手機打開,不只用開發用筆電看。
什麼時候該進一步使用 CLI 或 Git?
如果網站大多是靜態檔案,而且更新不頻繁,直接上傳就很夠用。當專案開始有固定建置流程、多人協作、審核規則或頻繁上線,再改用 CLI 或 Git-based deploy 會更合理。
DeployPages 不會把專案卡在第一種流程裡。第一次可以從瀏覽器上傳;專案變成熟後,可以改走 CLI 部署,內容確認後再接自訂網域。
很多真實專案就是這樣開始。第一步不是部署管線,而是一個真的打得開的連結。