GitHub Page + Google Domain 設定個人化網域

我的 blog 網址變成 dwye.dev 了!

以前在 KK 實習時,跟 RD 們聊過自架 blog 的事情,並聽說了這個很潮的 .dev 網域,就把購買個人網域列為將來想嘗試的事之一。
找工作的事情告一段落了(其實也只是在原本實習的公司轉正職 XD),有了固定收入就可以來養個人品牌了 XD。

需要做的事情

  • 購買一個你喜歡的個人網域,我在 Google Domain 購買
  • 在 Google Domain 設定你的 GitHub Page url
  • 在 GitHub Repo 設定你的個人網域以及 HTTPS
  • 修改 Repo 內相關設定

Google Domain

Google 自家的網域供應商,也提供了 DNS 服務,Google 雖然 do evil 但他們家服務的可靠性還是直得讚賞的,也不會跟你搞奇怪的首年特價第二年漲價。我二話不說直接選了 Google Domain 來購買個人網域。

dwye.dev,就決定是你了!

.dev 網域的一年價格是 12 USD,大約 350 台幣附近,其他網域結尾的價格可以參考 Google 的說明

比較需要注意的是 Google Domain 目前沒有開放台灣地區購買,但也不限制你用外幣結帳,但就要付跨區交易的手續費。

中間會另外需要填寫一次給 ICANN(網際網路名稱與數字位址分配機構)的個人資訊,這些資訊不會被公開,最好填寫真實的(就算跨區了,寫台灣也沒問題)。

Google Domain 設定

購買完成之後,回到 Google Domain 就會出現「my domain」選項,為了連接到 GitHub Page,需要做一些 DNS 資源設定:

Base Domain (Apex Domain)

為了支援 GitHub Page 的 HTTPS 設定,根據官方文件,需要在 DNS 中將 base domain 設定至下列 IP:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

具體做法是在 DNS 頁面中下方 Custom resource records 中,選擇 resource type: A,並新增上述四組 IP:

DNS apex domain setting

DNS 設定需要一段時間生效,Google Domain 算是很快的,只讓我等了幾分鐘而已,下列指令可以確定剛剛的設定是否生效:

$ dig dwye.dev +nostats +nocomments +nocmd

; <<>> DiG 9.10.6 <<>> dwye.dev +nostats +nocomments +nocmd
;; global options: +cmd
;dwye.dev.			IN	A
dwye.dev.		3599	IN	A	185.199.111.153
dwye.dev.		3599	IN	A	185.199.109.153
dwye.dev.		3599	IN	A	185.199.108.153
dwye.dev.		3599	IN	A	185.199.110.153

出現了上面的 IP 代表生效了。

CNAME

CNAME (canonical name) 就是真實名稱的意思,在 DNS 這裡的作用是將個人化網域 map 到真實網域,以我的例子來說,要將 dwye.dev map 到 dwy6626.github.io,因此一樣在 DNS 頁面中下方 Custom resource records 中,選擇 resource type: DNS,並輸入真實名稱 dwy6626.github.io

DNS CNAME setting

GitHub Repo 設定

這邊是架設 GitHub Page 的 repo,以我的例子來說是這個 repo:

https://github.com/dwy6626/dwy6626.github.io

在 Setting 第一頁找到 GitHub Pages 設定,並在 custom domain 填入個人化網域 dwye.dev,就這麼簡單。

不過如果你做得太快,Google Domain 的 DNS 設定還沒生效的話,會暫時無法使用 HTTPS,一樣等個幾分鐘再回來打勾就好。

GitHub Repo Setting Custom Domain

到這邊基本上大致上就完成了,然而修改完了設定之後,code base 以及 CI/CD 也有需要修改的地方,這樣才能保證下次部署後資料是正常的。

Repo 內修改

我是用 Hugo + GitHub Action 產生並透過 CI/CD 自動部署靜態網站,裡面也有相關的設定需要修改:

Hugo

修改 config 中 baseURL 設定:

# config.toml
baseURL = "https://dwye.dev/"

GitHub Action

因為我使用的是 peaceiris/actions-gh-pages@v3 這個 Action,已經內建支援設定 CNAME 了,只需要加上去就好:

# .github/workflows/deploy.yml
- name: Deploy
    uses: peaceiris/actions-gh-pages@v3
    with:
    external_repository: dwy6626/dwy6626.github.io
    deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    publish_dir: ./public
    publish_branch: master
    cname: dwye.dev

最後那行即是 CNAME 設定,部署完成後就會自動產生一個 CNAME 檔案在 GitHub Page Repo 內。

結語

完成上面所有步驟之後,就可以連去你的網誌看看了,網址變短變的有個性,就是爽 XDDD

所以個人化網域,其實就是花錢買個爽(X),當然還有個人品牌經營的部分,但對我來說比較是個人興趣吧。

留一些 TO-DO: