用 Vercel 綁定自訂網域的實戰筆記
原本是架在免費的 Github Pages 來使用，搭配 Hexo 來完成我的 blog，但後來也想嘗試看看其他方式，最後選擇試試 Vercel。
當然也有很多其他類似的服務可以做選擇，比如說 Netlify、Cloudflare Pages、Render，都有各自的特點及客群。
使用過程中花最多時間的地方在於綁定自訂網域這塊，第一次買網域花了點時間研究，這篇會講述整個過程及需要注意的地方。
ㄧ、購買網域
我選擇使用 Gandi.net 來購入網域。
一樣是選擇有超多，但因為我想要買網域後綴是 tw 的，所以有限縮不少選項，主要是建議挑選支援 DNS 管理的註冊商，會方便很多。
(我原本是打算買 godaddy ，但爬文風評很差就 pass 了，比較起來確實貴)
購買成功後進去到後台內部，裡面有個 DNS 紀錄，選擇新增紀錄選項，
會看到這樣的畫面：
這邊就是新增一筆 CNAME 紀錄。
但目前還沒辦法輸入 value，要等 Vercel 設定完。
關於 DNS Type 可以參考 chat 解說：
這裡做的事情就是因為是在 Gandi 買的網域，所以要到 Gandi 後台設定 DNS。
流程可以想像成：
打網址（例如 blog.viccai.tw）
→
查 DNS 紀錄
→
發現 blog.viccai.tw 是 CNAME → cname.vercel-dns.com(舉例)
→
再查 cname.vercel-dns.com 是哪個 IP
→
導到 Vercel 的伺服器 → 成功載入網站
二、在 Vercel 專案加入自訂網域
到 Project Settings > Domains 去新增最後希望的自訂網域，比如說我這次就會新增 blog.viccai.tw。
設定完後 Vercel 會顯示你需要設定的 CNAME 記錄，這個就是上面提到要在 Gandi 的 DNS 紀錄設定的 value。
三、到 Gandi 新增 DNS 記錄
前面提到的紀錄選項，這邊資訊都到齊了就填上。
類型：CNAME
名稱：blog（子網域 blog.viccai.tw）
主機名稱：從 Vercel 複製貼上
TTL：可以設為 300 秒（或預設值）
要注意的是，這邊可能會需要等待時間，因為 DNS 生效不一定是即時的，有一些方式可以做確認。
用 dnschecker.org 確認 CNAME 是否傳播成功。
用
nslookup或dig看 DNS 回應。
可以到網頁上查自己的網域有沒有打通，或是終端機裡面 nslookup 查查，
比如說 nslookup blog.viccai.tw
失敗會回傳 NXDOMAIN，運氣不好幾個小時是正常的，可能是設定還沒生效，但如果真的太久就有可能子網域拼錯。
四、回到 Vercel 確認有無成功
一樣是在 Domains 那個頁面觀測狀態有沒有成功，成功的話會顯示 Valid Configuration。
沒成功會的話會出現 invalid Configuation，也有一種可能性是網域已被其他 Vercel 帳戶使用，就需要再做其他驗證，正常來說只要看到 Valid Configuration，就能直接打開網址確認綁定的網域有沒有成功。