Hexo 進階調教指南（二）：將網站部署至 Netlify

發表日期： 2022-04-05 分類：教學， Hexo 調教指南字數： 2,232 字閱讀時間 ≈ 4 分鐘

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 設定資訊

此時開啟網域管理頁面並選擇上方的「Advanced DNS」，在 HOST RECORDS 下方新增 yourdomain.com 和 www.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 提供的四個名稱伺服器

回到「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>