前陣子我把我自己設計的占卜軟體 Miri 用Next.js重構完成。
接著我想既然為了要SEO優化而大陣仗使用Next.js重構整個服務的話，不如也順帶買一個新的網域，讓我的占卜服務成為一個獨立的服務，而不是依附在我原本這個部落格的網域上。
所以我就從Godaddy 買了一個命名很奇妙的網域，很符合我個人奇葩會選擇的網域，而且剛好這個網域太奇葩了，所以送了一年SSL，這樣連第一年的SSL都省了。
接著花了3個小時的時間有點誤打誤撞才完成和已經部署在Github Page上的服務連接。
那麼我們就開始吧，步驟就是這樣的:
- Godaddy
- 購買網域 跟 SSL
- 設定/Activate SSL
- 在 DNS 設定Records
- GitHub 設定
- 新開 Repo:
<user_name>.github.io - 將 Github Repository 轉成 Github Page
- 設置 Custom Page
- 在 Github -> Page -> Custom Page，植入你的新的網域。
- 在 Repo 加入 CNAME 檔案
- 新開 Repo:
Godaddy 購買網域 跟 SSL
進到 Goddady網站後，你可以根據你自己想要的網域名稱去找，某些熱門字可能會比較貴一點，但Godaddy會根據你輸入的domain做其他延伸的推薦。
如紅框所示，在某些比較冷門的網域中，Godaddy會附贈一年SSL，就寫內含SSL，購買後你就可以去獎品區兌換SSL。如果你選擇的網域沒有含，那你可能需要額外購買。
SSL 就是將 http:// 開頭的網站透過加密成 https:// 開頭，現在蠻多網站跟服務都要求要SSL加密，但我不確定host在Github Page上是不是硬性規定。
購買後，你可以去Godaddy 右上方的帳戶 -> 我的產品，去看你已經購買的網域跟SSL證書。
設定 SSL
其實我有點忘記當初 內含的SSL 是從哪邊兌換了，
沒記錯的話，應該可以從 Godaddy 右上方的帳戶 -> 我的產品 -> 其他產品，去看有沒有可兌換的SSL證書。
接下來要去設定SSL 憑證，點選 SSL憑證 -> 管理所有 (這部分也記憶模糊)，不過只需要確保你的SSL憑證是需要手動核發以及確保它連接的是你剛購買的網域、選擇標準版 SSL 憑證，記得把核發時的隱密資訊 (key) 之類的資訊 download下來保存好即可。
如果網域是連接 Github Page，則不需要手動下載憑證安裝在伺服器。
憑證我記得很快就會核發，由於當初折磨了3個小時，所以我覺得至少3小時內都會完成，但每個訂單不一定。
在 DNS 設定Records
接著我們需要在新的網域的DNS做些設定，讓他能夠認得Github Page的網站。
前往 帳戶 -> 我的產品 -> 網域 -> 點選你的網域按DNS，在DNS紀錄做添加跟刪除修改。
你可以按照圖上所存在的紀錄修改。
- 更改或新增一個 CNAME 紀錄-> 指向你Github Page 原本的網址 (通常是
<user_name>.github.io) - 移除 一個 A 紀錄 (Parked)
- 加上四個 Github 的 A 紀錄
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
這個文章裡有寫Github的A Records是什麼，短時間內應該就是我上面寫的四個網址。
填完後進到Github的部分
GitHub 設定
新開 Repo: <user_name>.github.io
如果你要使用你的網域根目錄作為網站的網址，比方說 輸入 test-blog.app 就會連到你的網站，那麼你需要開一個Repository 叫做 <user_name>.github.io，user_name是你的Github使用者名稱 (這個網址同樣需要再上一個Goddady DNS設定中，增加 CNAME 紀錄指向這個網址)
接著，將你的網站輸出成HTML或者任何能run在 Github Page的程式碼新增進這個新開的Repo <user_name>.github.io。
將 Github Repository 轉成 Github Page
進到你的Repository -> Settings -> Pages
接著在 Build and deployment 的區塊 -> Branch 選擇你要部署的Branch，然後點 Save，應該Repo 就會開始執行部署，你可透過上方的區塊得知部署成功了沒。
設置 Custom Page
在 Github -> Page -> Custom Page，植入你的新的網域。
這邊有一個很有趣的訣竅，當然如果你沒有遇到下面我說的這個Error，你就可以直接忽略。
在Custom domain 填上你新買的網域，點選 Save。
接著下面會有一個Check Box 叫做 Enforce HTTPS，如果可以順利打勾，就恭喜你成功設定Custom Domain。
如果你收到以下錯誤
Unavailable for your site because your domain is not properly configured to support HTTPS.
我爬文看到的解決方法是，如同我上面的圖片所示，你先移除剛剛輸入的 custom domain，然後對custom domain 打幾個空格再按 Save 儲存，接著再對著空的custom domain輸入一次你的新網域，儲存，就突然能用了。
每個人在這個步驟遇到的問題不一樣，有些是卡我遇到的Error，有些是寫SSL憑證還沒核發，要確認一下問題，再對症解藥。
在 Repo 加入 CNAME
印象中，當你設定 Custom Domain 時，Github會在你的Repo裡新增一個檔案叫做 CNAME，然候裡面就只有一行你的domain。
CNAME
text-blog.app
如果沒有的話，那你需要自己手動新增一個檔案 (沒有任何副檔名)名稱 CNAME，接著在裡頭打上一行你的網域。
最後，不要忘記，如果是 Custom Domain 幫你加 CNAME，依據不同的網站部署，build成包時可能不會內含 CNAME 檔案，所以你自己本身也要在自己的專案裡，確保你將網站 build 成一包靜態網站或者可運行的網站時，確認根目錄有 CNAME 這個檔案，才不會隨著每次新的網站build出後，推到Github上 CNAME會消失。
那因為中間有卡一些問題，所以我從購買網域+SSL到實際完成設定是3小時左右，正常來說應該可以更短。
也不確定是不是一定要購買SSL憑證，才能使用Github的Custom Domain。
