HTML 檔案上線|
DeployPages Team
/2026-05-11/9 min read

HTML 檔案託管怎麼做:把 index.html 變成可分享的 HTTPS 連結

從 index.html、靜態網站資料夾或 ZIP 開始,把 HTML 檔案上線成可分享的 HTTPS 公開連結,不必先建立 Git repo 或研究傳統主機控制台。

搜尋「HTML 檔案託管」的人,多半不是想研究一整套雲端架構。你手上可能只有一個 index.html,旁邊放著 style.css、幾張圖片,或是一個從設計工具、AI 工具、課堂作業匯出的資料夾。你要的第一件事很簡單:產生一個別人打得開的公開連結。

這和「挑一間網站主機」不是同一個問題。HTML 檔案上線的第一步,是把檔案放到正確位置,確認瀏覽器能載入 CSS、圖片和 JavaScript,再保留之後接自訂網域的空間。

從瀏覽器上傳 HTML 檔案並產生 DeployPages 公開連結的流程

什麼樣的檔案可以當成 HTML 網站?

對靜態網站來說,常見輸入大概有這幾種:

類型上傳內容常見用途
單一 HTML 檔案index.html線上履歷、活動頁、快速原型
靜態網站資料夾index.html、CSS、JS、圖片線上作品集、小型官網、登陸頁
框架建置輸出distbuildoutpublicVite、React、Astro、Next.js static export
ZIP 壓縮檔包含網站檔案的資料夾客戶交付、AI 生成網站、下載模板

最重要的是根目錄。一般靜態網站會期待上傳資料夾的最上層有 index.html。如果你的 ZIP 打開後是 my-site/index.html,就要上傳 my-site 這個資料夾,或確認平台能正確處理這層巢狀結構。

最快的路徑:先上傳完成檔案

小型靜態網站通常不需要一開始就接 Git、CI 或複雜的部署流程。先把完成檔案上傳,反而最能抓出真正問題。

  1. index.html 放在資料夾最上層。
  2. 將 CSS、JavaScript、圖片整理到 cssjsimagesassets 這類清楚的資料夾。
  3. 上傳資料夾或 ZIP。
  4. 開啟產生的 HTTPS 公開連結。
  5. 點過每個頁面、按鈕和圖片路徑。
  6. 確認要保留後,再登入認領專案或接上自訂網域。

最後一步很實際。很多網站一開始只是臨時工作:客戶預覽、課堂作業、登陸頁草稿、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.jsfile:// 只在本機預覽時有效。
href="/about.html"href="./about.html"根目錄相對路徑依賴部署後的網站根目錄。

如果網站有多個頁面,不要只看首頁。從公開連結逐頁點進去,通常第一個壞掉的是導覽列、圖片或下載連結。

什麼時候瀏覽器上傳比 Git 更適合?

Git 很適合長期開發、多人審閱、重複上線的專案。但它不一定適合第一個公開連結。

瀏覽器上傳更適合這些情境:

  • 你收到的是設計師、客戶、產生器或 AI 工具給的靜態資料夾。
  • 你需要先發一個預覽連結,再決定要不要建立 repo。
  • 你只是發佈一次性活動頁、線上履歷、課堂作品或測試頁。
  • 你想先檢查建置輸出,再決定是否接 CI。
  • 負責上線的人不是寫程式的人。

這也是為什麼成熟平台仍然保留直接上傳。Netlify Drop 文件明確處理資料夾或 ZIP 的上傳情境,也提到 AI 程式碼生成工具產生的專案。Cloudflare Pages Direct Upload 文件則說明如何從本機上傳預先建置好的靜態資源。市場訊號很清楚:很多人只是需要把網站檔案放上線,先拿到網址。

常見工具該上傳哪個資料夾?

不同工具會把最後輸出放在不同資料夾:

工具或技術上傳這個
純 HTML/CSS/JS包含 index.html 的資料夾
Vitenpm run build 後的 dist
Create React Appnpm run build 後的 build
Astronpm run build 後的 dist
Next.js static exportexport 後的 out
下載的 HTML 模板解壓縮後、根目錄有 index.html 的模板資料夾
AI 生成靜態網站匯出的網站資料夾,不是提示詞對話紀錄

如果不確定哪個資料夾才對,先找有 index.html 和編譯後 assets 的那個。src 這類原始碼資料夾通常不是要直接發佈的內容。

什麼樣的 HTML 公開連結比較值得信任?

一次性測試連結可以很簡單。要寄給客戶、招募主管、投資人或廣告受眾的連結,就需要多檢查幾件事:

  • 預設使用 HTTPS,而不是不安全的 http://
  • 預覽 URL 穩定,對方之後還能再打開。
  • 修正後可以快速替換成新版本。
  • 之後能接自訂網域。
  • 新版本出錯時,可以還原到先前版本。
  • 有基本統計資料,不必猜對方到底有沒有打開。

DeployPages 的路徑是先快速上傳,再視需要加入 自訂網域全球 edge 傳遞統計資料還原到先前版本。網站從測試頁變成正式頁時,不需要重新換一套工具。

上傳前兩分鐘檢查清單

上傳前做這些事,通常比多比較三家平台更有用:

  1. 打開資料夾,確認 index.html 在最上層。
  2. 如果 HTML 會引用檔名,避免空白、罕見符號和大小寫混亂。
  3. 盡量使用小寫檔名。Logo.PNGlogo.png 在不少正式環境不是同一個檔案。
  4. 搜尋 HTML 裡是否還有 file://localhost 或你的電腦使用者名稱。
  5. 確認根目錄結構後,再壓縮成 ZIP。
  6. 發佈後用手機打開,不只用開發用筆電看。

什麼時候該進一步使用 CLI 或 Git?

如果網站大多是靜態檔案,而且更新不頻繁,直接上傳就很夠用。當專案開始有固定建置流程、多人協作、審核規則或頻繁上線,再改用 CLI 或 Git-based deploy 會更合理。

DeployPages 不會把專案卡在第一種流程裡。第一次可以從瀏覽器上傳;專案變成熟後,可以改走 CLI 部署,內容確認後再接自訂網域。

很多真實專案就是這樣開始。第一步不是部署管線,而是一個真的打得開的連結。

參考資料

#HTML 檔案託管#靜態網站上線#發佈網站#無 Git 部署

準備發佈你的網站?

上傳靜態檔案,取得 HTTPS 連結;專案需要時再加入自訂網域或還原到先前版本。

免費開始部署