Hexo 進階調教指南(二):將網站部署至 Netlify

Netlify 和 GitHub Pages 都提供靜態網站託管服務,不過 Netlify 擁有更多強大的功能以及易用的介面。所以這次要來教學如何把網站搬到 Netlify 上面

將網站資料推送到 GitHub

我們需要將網站資料全部丟到 GitHub 上面,因此要先新增一個儲存庫,公開或私人都可以

建立 GitHub 儲存庫

進到儲存庫之後複製上方 .git 結尾的的網址,等一下推送的時候會用到

GitHub 儲存庫頁面

開啟終端機並且將目錄切換到網站資料夾,然後依序執行下方的指令

git init # 初始化儲存庫
git add . # 將所有檔案列入索引
git commit -m "first commit" # 設定提交紀錄
git branch -M main # 將目前分支重新命名為 main
git remote add origin <儲存庫內提供的網址> # 連結儲存庫並將名稱設為 origin
git push -u origin main # 將 main 分支的變更推送至 origin

執行完成後就可以在儲存庫內看到檔案了

GitHub 儲存庫頁面

使用 Netlify 部署靜態網站

註冊一個帳號,可以使用 GitHub 帳號登入

註冊 Netlify 帳號

進到主頁之後點選「Import from Git」

從 Git 平台選擇儲存庫來部署網站

選擇儲存庫的來源,點選「GitHub」進行授權

選擇 GitHub 作為儲存庫的來源

在彈出的視窗中點選「Authorize Netlify」

授權 Netlify

選擇「All repositories」,然後點選「Install」

選擇存取所有儲存庫並安裝 Netlify

授權完成後會出現 GitHub 帳號內的所有儲存庫,選擇剛才建立的儲存庫

選擇儲存庫

網站設定維持預設,最後點選「Deploy site」

Netlify 網站部署設定

接著就會開始部署網站。等待兩分鐘左右就能夠完成,同時頁面上也會出現該網站的網址

Netlify Site Overview 頁面

點選網址就能看到網站

瀏覽部署後的網站截圖

更改網站的網域

接下來要來把之前購買的網域套用在網站上面,點選「Domain settings」進入網域設定

Netlify Site Overview 頁面

點選「Add custom domain」

Netlify Domain Setting 頁面

輸入網域之後點選「Verify」

新增並確認網域是否被使用

接著會確認網域擁有者是不是本人,確定的話就點選「Add domain」

確定新增網域

之後會在 Custom domains 下方看到兩個顯示驚嘆號的網域。點選「Check DNS configuration」可以看到 Netlify 提供的 DNS 設定資訊

網站自訂網域列表
DNS 紀錄設定資訊

此時開啟網域管理頁面並選擇上方的「Advanced DNS」,在 HOST RECORDS 下方新增 yourdomain.comwww.yourdomain.com 的 DNS 紀錄

在 Namecheap Advanced DNS 頁面設定 DNS Records

設定完成之後就可以透過自訂網域連線至網站(網站 SSL 憑證需要等待一段時間才會出現)

成功套用自訂網域的網站截圖

如果想要檢查 SSL 憑證的狀態,可以到「Domain settings」的最下方確認

檢視 SSL 憑證狀態

使用 Netlify DNS

點選網域旁邊的「Option」,然後選擇「Set up Netlify DNS」

設定 Netlify DNS

前兩個步驟就跟新增自訂網域一樣,之後看到這個畫面直接點選「Continue」

新增 DNS records 頁面

將 Namecheap 的 NAMESERVERS 換成 Netlify 提供的四個名稱伺服器

Netlify 提供的 Name servers 網域
將 Namecheap BasicDNS 更改為 Netlify DNS

回到「Domain settings」就能看到網域旁邊會有 Netlify DNS 的字樣

成功啟用 Netlify DNS

從舊網站重新導向至新網站

因為 GitHub Pages 不能設定重新導向,因此我們只能從網站那邊動手

首先要安裝 hexo-generator-alias 套件,然後在每篇文章和頁面的 Front-matter 加入 redirect 屬性,並且設定重新導向後的網址

文章和頁面新增 redirect 屬性

接著開啟 public 資料夾內的 index.html,用下方的原始碼取代原本的內容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Redirecting...</title>
    <link rel="canonical" href="https://yourdomain.com/">
    <meta http-equiv="refresh" content="0; url=https://yourdomain.com/">
  </head>
</html>

index.html 內容範例

最後將網站部屬到 GitHub Pages 並且測試能不能自動重新導向

首頁和文章重新導向展示

Console Search 網站遷移

開啟 Google Console Search,點選左上角的資源名稱然後選擇「新增資源」

Google Console Search 頁面

資源類型選擇「網域」,輸入網域之後點選「繼續」(想要使用「網址前置字元」的話看這篇

選擇資源類型

接著要使用 DNS 紀錄來驗證網域

驗證網域資訊

進入 Netlify 的 DNS 設定頁面,點選「Add new record」

Netlify DNS 設定頁面

把記錄類型(Record Type)更改為 TXT,然後將驗證文字貼到值(Value)上面

建立新的 DNS 紀錄

點選「驗證」就會顯示驗證成功

成功驗證網域所有權

在舊資源內點選「設定」→「變更網址」,選擇新的資源之後點選「驗證並更新」

Google Console Search 變更網址頁面

如果有設定好重新導向就會顯示驗證通過,點選「確認遷移」

網址變更前置作業驗證完成

完成後就會開始將原有搜尋結果遷移到新網域了

網址遷移資訊

最後別忘了在新資源裡面新增 Sitemap

新增 sitemap.xml

總結

弄到這裡整個網站的轉移工作也就告一段落了,接下來要來說明如何使用 Google Analytics 4 和 Microsoft Clarity 來統計網站數據,敬請期待。

參考資料

買了網域要怎麼做才能讓網址、網域生效呢?首先你要先了解的是DNS設定!

Netlify + Hexo 快速搭建属于你自己的静态站点 | Carl Jin

重新導向與 Google 搜尋 | Google 搜尋中心  |  說明文件  |  Google Developers

Goodbye, GitHub Pages—Hello, Netlify | Aleksandr Hovhannisyan

Learn how to add custom domains to your Netlify sites!

Git - Book