自架部落格(6) 發佈到 GitHub Pages 上

發佈到 GitHub Pages 其實很簡單，而且還可以順便看看 GitHub Action 是在做什麼。

建立 GitHub Pages

GitHub Pages 官網上的說明其實都說得很清楚，而且每一個步驟都說得很清楚，我就在這簡單說明一下流程和一些注意事項。

GitHub Pages 官網：https://pages.github.com/

說明文件：https://docs.github.com/en/pages

步驟

1. 註冊 GitHub
2. 建立一個新的 Repository
3. Repository 名稱請使用<username*>*.github.io，是你在 GitHub 的 UserName
4. 這是 GitHub 提供免費託管靜態網站的服務，一個帳號只能開一個網站

幾個關於 GitHub Pages 的注意事項

1. repository 的空間最多 1GB
2. 網站每個月流量最高 100GB
3. 每個小時最多建置 10 次
4. 有限的網站速度

其他限制可以看這裡：https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#limits-on-use-of-github-pages

部署

當註冊好和開好 Repository 之後，就差最後兩個步驟了。

設定 Hexo

在之前的文章中有提到，可以先調整好部屬到 GitHub Pages 的設定，我們來複習一下：

1. 先找到 Hexo 配置檔（_config.yml）
2. 到 # URL，設定 url: 為你的 GitHub pages 的網址

# URL
url: # 這裡放剛剛申請好的 GitHub Pages 連結，如果沒有改過路徑，應該會是這樣 https://<username>.github.io

3. 然後到 # Deployment，設定部署方式

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git' # 我們使用 git 的方式部署
  repo: <repository url> # <username*>*.github.io
  branch: [branch] # 分支
  message: [message] # commit 的訊息，可以不填，預設值是 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}

指令

安裝套件可以只要一個指令就能部署。

hexo-deployer-git

打開終端機，到專案目錄底下，然後輸入

npm install hexo-deployer-git --save

安裝完之後，以後就只要依序執行以下兩個指令就可以部署到 GitHub Pages 啦。

hexo clean

會需要先執行 clean 是因為會要先清除快取檔案（db.json）和靜態檔案（publish 下的檔案），避免部署到先前的版本。

hexo deploy

看到最後一行 INFO Deploy done: git 就代表部屬成功。

恭喜，經歷千辛萬苦，終於搭建好了自己的部落格，接下來就輪到你們了。

參考

• Deployment GitHub Pages - Hexo
• GitHub Pages
• GitHub Pages - GitHub Docs