web

使用 GitHub Pages 託管網站

用 GitHub Pages、自訂網域與 Cloudflare DNS 免費託管靜態網站。

English繁中
使用 GitHub Pages 託管網站

GitHub Pages 可以把靜態網站發布在預設的 github.io 網址,也可以使用自己擁有的網域。自訂網域要同時完成兩件事:GitHub 要知道哪一個 Pages site 使用這個名稱,DNS 也要把名稱指到 GitHub。

以下用 www.example.com 示範,請改成自己能控制的網域。

先讓 Pages 預設網址能正常發布

在加 DNS 前,先到 repository 的「Settings → Pages」設定發布來源,並確認預設 Pages URL 能開啟。GitHub Pages 可以從 branch 發布,也可以由 GitHub Actions workflow 發布;應依網站實際的建置方式選擇。

你需要一個 GitHub repository,以及已向 DNS provider 註冊的網域。Cloudflare 是管理 DNS 的其中一種選擇,以下 record 類型並不限定 Cloudflare。

先在 GitHub 登記網域,再改 DNS

到「Settings → Pages」的「Custom domain」輸入 www.example.com 並儲存,再設定 DNS。GitHub 建議先完成這一步,讓網域先關聯到自己的 Pages site。也應在 GitHub 帳號中完成 domain verification,降低名稱被其他 Pages site 搶先使用的風險。

若從 branch 發布,儲存設定後 GitHub 會在 source branch 建立 CNAME 檔案。若只用自訂 GitHub Actions workflow 發布,則不依賴這個檔案;兩種情況都應以 repository 的 Pages 設定為準。

建立相符的 DNS record

www.example.comblog.example.com 這類 subdomain 應建立 CNAME,指向 USERNAME.github.ioORGANIZATION.github.ioexample.com 這類 apex domain 則使用 GitHub 文件列出的 ALIASANAME,或完整的 AAAAA records;apex domain 不一定能像 subdomain 一樣使用一般的 CNAME。

請以 GitHub 的自訂網域 record 對照表為準,不要抄用舊文章中的 IP。也不要為 Pages 建立 wildcard DNS record,未被宣告的 subdomain 可能因此有被接管的風險。

網域管理服務的 DNS 設定

Cloudflare DNS 設定

驗證發布結果

DNS propagation 需要時間。自訂網域解析到 GitHub Pages 後,回到「Settings → Pages」完成仍在等待的 verification,並在 GitHub 提供選項時啟用 HTTPS。每次發布後,同時開啟自訂網址與預設 Pages URL,並測試另一個頁面,避免把 base URL 或連結路徑的錯誤誤判成 DNS 問題。