前陣子我把我自己設計的占卜軟體 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。
