從 2018 年註冊了第一個網域 - steveyigame.com 後
我嘗試架設了第一個 WordPress 部落格
當時也正好學習使用 Linux 系統,順帶了解到 雲端硬碟(像是 Google Drive) 及 檔案伺服器 的差異
為什麼要換成 Hugo? WordPress 不好嗎?
我認為沒有好或不好這件事,一切憑個人感覺
但由於逐漸學習到後端,會覺得說 如果可以靜態網頁就靜態 XD
PS. 其實 WordPress 也可以優化到很好,但我純粹不想優化
而且由於 WordPress 是動態網頁,且連接上了資料庫
一般用戶訪問網站時,網站會先到資料庫抓資料處理後再回應給用戶
WordPress 載入速度
Hugo 載入速度
很明顯的可以看到,WordPress 網站初次載入需要花費 4.11 秒,而 Hugo 網站只需 1.41 秒,差異非常大
在 GitHub 部署並搭配 GitHub Pages
由於 Hugo 是靜態網頁,所以想到可以將其部署在 GitHub,並搭配 GitHub Pages 使用
於是我開了兩個 Repositories,一個用來放網站的原始檔案(其實可以直接開不同的分支)
Hugo 原始碼
產生後的網站原始碼
那我們就來講一下設定過程
首先,我們先在電腦中裝好 Hugo
Hugo 官方提供了以下系統預先編譯版,這代表這些系統不需要自行編譯!!
- macOS (Darwin) for x64, i386, and ARM architectures
- Windows
- Linux
- OpenBSD
- FreeBSD
可以直接下載官方編譯好的檔案直接使用
https://github.com/gohugoio/hugo/releases
若你是 macOS 使用者,也可以安裝 Homebrew 並使用以下指令來安裝 Hugo
brew install hugo
接著,我們使用以下指令來建立一個新的網站
hugo new site 路徑
接著,我們會看到這些檔案
打開 config.toml 檔案,會出現這些,我們可以自定義為我們的網站
- baseURL
- languageCode
- title
接著可以使用這個指令來新增新文章/頁面
hugo new post/hello.md
大致熟悉 Hugo 後,我們就來設定 GitHub 的部分吧!
PS. 如果想更了解 Hugo 的操作方式,可以參考官方文件
首先,我們建立一個 Repository
接著,新增一個 GitHub Action 檔案在部落格原始碼的 .github/workflows 目錄中
我在這邊使用了三個 Action,分別是以下三個
- actions/[email protected]
- peaceiris/[email protected]
- peaceiris/[email protected]
name: Hugo Build and Deploy
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/[email protected]
with:
submodules: true
- name: Setup Hugo
uses: peaceiris/[email protected]
with:
hugo-version: '0.64.1'
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/[email protected]
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
external_repository: 你的 username/你的儲存庫
publish_dir: ./docs
publish_branch: gh-page # 分支名稱
cname: blog.steveyi.net # 若不使用自定義網域,則不需要
接著,我們將其 commit 上去
這時一定會遇到 Error,這是因為我們沒有提供 ssh-key 給 GitHub Action 使用
我們先建立一組 ssh-key
接著,進入 Repository 的設定中,選擇 Deploy keys
新增一組 Key,記得要勾選 Allow write access
接著到 secrets 的部分,將 SSH Key 的 Private Key 上傳上去
完成後會像這樣
最後,我們重新 commit 一次。
就不會有錯誤了!
同時,我們也可以訪問看看網站能不能瀏覽!
PS. 有自定義網域的話,記得解析一個 CNAME 到 yourusername.github.io 哦!