GitHub Pages 自定義域名實踐整理

qiwihui發表於2019-01-27

這篇部落格將整理在配置部落格以及專案 Pages 的自定義域名過程,遇到的問題以及解決方法。Github 的文件對於如何配置自定義域名有詳細的介紹,這裡不會全部翻譯,只重點記錄實踐的過程,內容涉及為使用者網站,公司網站,以及專案網站新增 Apex 域名(qiwihui.com),二級域名(www.qiwihui.com)以及開啟 HTTPS。最後,所有指向 www.qiwihui.com 的請求將會被重定向至 https://qiwihui.com

一些注意

Github 支援的自定義域名型別

支援的自定義域名型別 域名例子
www subdomain www.example.com
one apex domain & one www subdomain example.com & www.example.com
apex domain example.com
custom subdomain blog.example.com

GitHub Pages 站支援的域名

GitHub Pages 站型別 在 Github 上 Pages 的預設域名和主機地址 頁面被如何重定向 自定義域名舉例
User Pages 站 username.github.io 自動重定向到設定的自定義域名 user.example.com
Organization Pages 站 orgname.github.io 自動重定向到設定的自定義域名 org.example.com
使用者擁有的 Project Pages 站 username.github.io/projectname 自動重定向到 User Pages 站自定義域名的子目錄(user.example.com/projectname project.example.com
公司擁有的 Project Pages 站 orgname.github.io/projectname 自動重定向到 Organization Pages 站自定義域名的子目錄(org.example.com/projectname project.example.com

以個人 Pages 專案為例子

開啟 Github Pages 功能

在專案 Settings 中,找到 GitHub Pages 這一區域,選擇 Source 為對應的要部署的分支,這裡我選擇 gh-pages branch

gh-pages

其中,選擇 master branch 會視 /README.md 為 web 的 index.html,選擇 master branch /docs folder 會視 /docs/README.md 為 web 的 index.html

在專案配置中自定義域名

Custom domain 中新增自己的域名並儲存:

custom-domain

或者,在專案分支中新增 CNAME 檔案,CNAME 檔案的內容為

qiwihui.com
複製程式碼

這裡推薦第二種,尤其對於有設定 CI 的專案,因為 CI 上將第一種設定覆蓋。 這一步是比較重要卻又容易忽視的一步:

  • 如果新增到 GitHub Pages 中的是 qiwihui.com,那麼 www.qiwihui.com 會被重定向到 qiwihui.com
  • 如果新增到 GitHub Pages 中的是 www.qiwihui.com,那麼 qiwihui.com 會被重定向到 www.qiwihui.com

這裡我選擇重定向到 www.qiwihui.com,所以設定為 qiwihui.com

新增 DNS 記錄

為了能設定Apex 域名,需要在 DNS 中配置 A 記錄指向 github 的 IP:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
複製程式碼

a-record

同時,設定 CNAME 記錄將 www.qiwihui.com 指向 qiwihui.github.io,即 <你的 github 使用者名稱>.github.io。對於公司來說,這個地址是 <公司名稱>.github.io

www-record

確認 DNS 記錄

以下是設定好之後的 DNS 記錄情況:

$ dig +noall +answer qiwihui.com
qiwihui.com.            60      IN      A       185.199.111.153
qiwihui.com.            60      IN      A       185.199.110.153
qiwihui.com.            60      IN      A       185.199.108.153
qiwihui.com.            60      IN      A       185.199.109.153
複製程式碼
$ dig www.qiwihui.com +nostats +nocomments +nocmd 

; <<>> DiG 9.10.6 <<>> www.qiwihui.com +nostats +nocomments +nocmd
;; global options: +cmd
;www.qiwihui.com.               IN      A
www.qiwihui.com.        28      IN      CNAME   qiwihui.github.io.
qiwihui.github.io.      28      IN      A       185.199.110.153
qiwihui.github.io.      28      IN      A       185.199.108.153
qiwihui.github.io.      28      IN      A       185.199.111.153
qiwihui.github.io.      28      IN      A       185.199.109.153
複製程式碼

SSL(HTTPS)配置,強烈推薦開啟

勾選 Enforce HTTPS

enfore_https

Github 會自動保持 HTTPS 證照的有效。

專案 Pages

當給專案設定 Pages 時,一般都已經有一個個人或者公司的 Pages 了,如果沒有,就可以按以上的過程新增。如果已經設定了,則只需要很簡單的兩步即可:

以下以個人專案 [qiwihui/fullstackpython.com](https://github.com/qiwihui/fullstackpython.com),設定地址為 fullstackpython.qiwihui.com

  1. 在專案中開啟 Github Pages,並新增 CNAME 檔案指向 fullstackpython.qiwihui.com

fullstackpython

  1. 在 DNS 記錄中新增 CNAME 記錄將 fullstackpython.qiwihui.com 指向 qiwihui.github.io,即 <你的 github 使用者名稱>.github.io。對於公司來說,這個地址是 <公司名稱>.github.io

fullstackpython-record

一段時間後即可。

參考

相關文章