Skip to content

GitHub Pages 怎麼免費架網站?從檔案到網址的 3 個步驟 ​

程式碼傳上 GitHub 之後,還差哪一步才會變成網站?

上一篇把 Git 和 GitHub 分清楚了。不過,檔案傳上 GitHub,朋友打開儲存庫時,看到的還是一份檔案清單,不會直接變成你設計好的網頁。要讓別人透過網址看到網站,還得把 GitHub Pages 打開。它會把儲存庫裡的靜態網頁檔案發布出去,給你一個可以分享的網址。[1]

先別急著找設定按鈕,得先確認要放上去的是什麼。作品集、活動頁,或是只靠 HTML、CSS、JavaScript 和圖片就能顯示的內容,很適合從 Pages 開始。反過來說,Pages 本身不會替你執行後端程式,也不會自帶資料庫、寄信或會員登入服務。像聯絡表單,畫面可以做出來,但按下送出後,還得有別的服務負責接收資料;光放上 Pages,表單不會自己把信寄出去。[1:1]

影片把「檔案變成網址」拆成三步,你可以跟著檢查:

  1. 把網站檔案放進 GitHub 儲存庫:先確認有首頁檔案,以及它需要的樣式、程式與圖片。
  2. 設定 Pages 的發布來源:到儲存庫的 Settings → Pages,依專案選擇要發布的分支與資料夾;需要先建置的專案,也可以使用 GitHub Actions。設定要對準真正放著網站成品的位置。[2]
  3. 打開網站網址驗證:等部署完成後,實際開啟網站,看看首頁、圖片、連結是否正常。看到「已部署」三個字,還是要自己點開確認。

網址常見有兩種。帳號網站是 https://你的帳號.github.io/,儲存庫名稱要和帳號網站名稱一致;一般專案網站則是 https://你的帳號.github.io/倉庫名稱/。第二種網址多了倉庫名稱,所以本機看起來正常的圖片或樣式,上線後若找錯路徑,就可能變成空白或 404。簡報裡可以自己切換兩種網址,看差別落在哪裡。[1:2]

最後記得看公開範圍。GitHub 免費方案使用 Pages 時,來源儲存庫要公開,別把 API Key、密碼、客戶名單放進去。即使你使用可發布私有儲存庫的方案,Pages 網站預設仍是公開可讀的;「倉庫私有」不等於「網站只有自己看得到」。[2:1]

想自己點一遍「檔案清單 → 發布來源 → 預設網址」,或比較靜態網站能做與不能做的事,可以打開這集的互動式簡報。先搞懂 Pages 幫你處理的是哪一段,下一篇再讓 Codex 實際操作一次,會比較知道每一步要檢查什麼。


  1. GitHub Docs,What is GitHub Pages?。 ↩︎ ↩︎ ↩︎

  2. GitHub Docs,Configuring a publishing source for your GitHub Pages site。 ↩︎ ↩︎

內容持續更新,歡迎透過社群回饋建議。