# Github pages佈置靜態網站 + 透過DNS服務換成自訂的網域

# Date: 2019/March/25


# 60 seconds

# Github官方教學

官方教學分為4個步驟:

  1. 找DNS商買個好聽的網域.

  2. 在DNS上面設定custom domain之前, 先去Github上面把想要的custom domain綁定起來.

  3. 到DNS設定該設定的東西 (apex domain / www or custom domain, 端看你的架構. 支援的列表在此)
    圖片支援

  4. 在Github上, 移除並重新加入custom domain. 這時會觸發HTTPS的申請流程. 等流程結束之後就OK了.


# 60 minutes

# 以Gandi為例

由於還牽扯到DNS上的設定, 下面細分為更多步驟:

  1. Build/deploy static websites

    關於如何在github上架設靜態網站, 網路上已經有相當多的資源了.

    可以參考官方網站的教學, 或是直接到Google搜尋中文教學.

  2. Setup custom domain in Github

    此處有兩種方法:

    A. 在repository的根目錄裡放入CNAME檔(裡面寫入要使用的subdomain)即可.
    
    B. 直接在Settings操作, Custom domain裡填入你的網域並儲存.
    
    1
    2
    3

    Github pages settings

    不論如何, 你的repository 根目錄底下都會多出一個CNAME檔.

  3. Config your DNS - A Records

    這邊我們以Gandi為例, 進到DNS Records進行設定.

    Github的幫助有特別提到, 要先將Github server的ip加進我們的DNS Records裡面

    DNS Records in Gandi

    值得注意的是, 有些網路上的教學所使用的IP已經不支援了( 207.97.227.245 and 204.232.175.78)

    192.30.252.153192.30.252.154 這兩組則是要自行申請HTTPS憑證.

    推薦使用以下4組IP

    • 185.199.108.153
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153

    原因如Github Pages 自訂網域免費升級 https以及官方的trouble shootingResolving problems with mixed content提到的,

    將A record設定成上列的IP以後, 並把repository裡面的assets都改成https之後,

    github會自動幫你申請HTTPS憑證.

  4. Config your DNS - CNAME Records
    這邊要特別注意github gh-pages的網域命名方式, 使用前最好先檢查一下

    img#07

    假設是使用個人帳號mew底下的repository生成網站的話, github上的網站會是:

    mew.github.io/qq-repo
    
    1

    如果想設定成:

    qq.mydomain.io
    
    1

    那我們這邊的CNAME就要填入:

    qq   CNAME   10800  mew.github.io.
    
    1

    記得此處只能username.github.io 或是 orgname.github.io !!

  5. Check DNS entries

    使用dig指令來確認DNS是否有設定成功:

    dig +nostats +nocmd qq.mydomain.io
    
    1

    結果應該會出現:

    qq.mydomain.io.     10800       IN      CNAME       mew.github.io.
    mew.github.io.      3600        IN      A           185.199.110.153
    mew.github.io.      3600        IN      A           185.199.109.153
    mew.github.io.      3600        IN      A           185.199.111.153
    mew.github.io.      3600        IN      A           185.199.108.153
    
    1
    2
    3
    4
    5

    如果沒有的話, 可能是DNS還在處理, 或是上面設定有誤

  6. HTTPS Configuration

    當然, 最後都設定完以後, 不要忘記開啟 Enforce HTTPS.

    (這一步驟就是上面提到的HTTPS的申請流程)

    img#02

    img#03

全部設定都成功的話, 就能連進去自訂的網域啦.

# 轉址失敗/沒有HTTPS

有時候會遇到轉址失敗或沒有憑證的問題, 此時可能是電腦裡的DNS Cache還沒更新,
或是瀏覽器HSTS設定的問題.

換一台電腦/瀏覽器便能確認是不是這個問題. 通常清除設定之後便能正常運作.



# References


# 其他參考資料

卡斯伯. (2018). Github Pages 自訂網域免費升級 https. Casper Blog.

rynop. (2019, January 23). Custom domain for GitHub project pages StackOverflow

Github. Quick start: Setting up a custom domain Github Help

Veru. (2017). 生成 GitHub Pages + GANDI 域名設定 Blog

Last Updated: 4/7/2019, 6:55:59 AM