我如何打造我的部落格

Posted on 2023-01-15

有這個部落格也已經一年有餘了，簡單分享一下我打造這個部落格比較不一樣的地方與簡單的教學

這篇文章將會教導你使用免費的 Hexo、Github Actions 以及 Github Pages 來做出你現在看到的部落格

其中只有 domain name 是需要付費的，而這也是選擇性，你也可以使用免費的 domain name

Hexo

在這裏我選擇老牌的 Hexo 來打造我的部落格

原因是因為它發展了很久，有許多的主題可以選擇，而且還有許多的插件可以使用
而且開發者是台灣人，中文的文件和資源都相當豐富
一些大型主題也都有持續在更新 (重要)

至於 Hugo 標榜的是速度，但其實 Hexo 其實也不會差到哪裡去，就是幾秒鐘的差距

所以在這裏，我選擇具備社群與廣度的 Hexo

安裝 npm

確定選擇 Hexo 之後，我們要來安裝 npm

簡單下載安裝即可 😀

安裝 Hexo

接著，我們需要安裝 Hexo，使用剛剛安裝的 npm 來安裝 Hexo

1	npm install -g hexo-cli

建立部落格

接著，我們需要初始化部落格

1
2
3

hexo init blog
cd blog
hexo server

接著你就可以看到你的部落格最一開始的樣子了

選擇你的主題

接著，我們需要選擇一個主題，因為我相信你絕對不會滿足於這個樣子

一開始，你可以先到 Hexo Themes 看看有沒有你喜歡的主題
或者你也可以到 Github 搜尋 hexo theme 來找到你喜歡的主題

又或者你可以選擇我目前使用的主題 NexT

註: NexT 換了好幾次 Github owner，小心不要搞混了，目前是 next-theme

安裝 NexT

我們直接從 Github 安裝最新版本

1 2	cd blog git clone https://github.com/next-theme/hexo-theme-next themes/next

修改 `_config.yml`

接著，我們需要修改 ./_config.yml 來套用我們的主題

1	theme: next

啟動部落格

好，現在我們重新啟動部落格，來看看有沒有成功套用

1	hexo server

太美了，成功！

修改主題

這邊可以注意的地方是 ./_config.yml 主要是管理部落格的設定
而 ./themes/next/_config.yml 則是管理 themes 的設定

剩下就是修改主題的設定了，這裏我就不多贅述了，你可以參考 NexT 的文件

Github

在這裡我選擇讓編譯出網頁的動作，在 Github Actions 上完成

在這邊有一個小細節需要注意一下

就是你需要把 theme/next/.git 資料夾刪除，將整包 theme 上傳到 Github 上

這樣可以避免每次跑 cicd 的時候，都要重新 clone 一次主題
除了可以節省一些時間，也可以確保部落格無論在電腦上或者 Github 上都是一致的

這裡有一個比較簡單的做法是 hexo generate 產生完所有靜態網頁，直接把靜態網頁上傳到 blog repo
但這樣的做法沒辦法讓你在 Github 上編輯 md，接著編譯出靜態網頁
如果可以接受只在自己電腦上編輯部落格，那這樣的做法會稍微簡單一點
建立好 repo 之後，就可以直接跳到設定 Github Pages 這個章節

建立 Github Repo

接著，我們需要在 Github 上建立一個 blog repo，並命名為 [your username].github.io

並且將整個部落格上傳到 Github 上

建立 Github Actions

就可以來寫 Github Actions 了

你可以看看我是怎麼寫的傳送門

建立 deploy key

接著，我們需要設定 deploy key，讓 Github Actions 編譯完新文章之後可以直接 push 回你的 blog repo 上

首先，我們需要在本機上產生一組 deploy key

1	ssh-keygen -t ed25519 -C "your email"

接著，什麼都不用填，一路按 enter 到底

設定 deploy key

接著，我們需要把產生的 deploy key 設定到 Github 上

首先，我們需要到你的 blog repo 的 Settings 頁面，有個 Deploy keys 的選項

接著，我們需要點選 Add deploy key，並且把 public key 貼上去

1	cat ~/.ssh/id_ed25519.pub

注意，我們需要把 Allow write access 打勾，這樣 Github Actions 才能 push 回你的 blog repo 上

接下來，我們需要把 private key 設定 Settings 頁面，有個 Secret and variables 的選項
選擇 New repository secret，並且把 private key 貼上去

1	cat ~/.ssh/id_ed25519

測試 Github Actions

接著，我們需要測試一下，看看 Github Actions 是否可以正常 push 回你的 blog repo 上

1 2	hexo new "test" git add -A && git commit -m "test"

接著，我們需要把 publish 分支 push 上去，這樣 Github Actions 才會被觸發

1	git push origin publish

這時，如果看到 Github Actions 有正常執行，並且你的 blog repo 有正常 push 回去，那就代表你的 Github Actions 設定成功了

設定 Github Pages

如果你是直接將靜態結果 push 到你的 blog repo 上，你可以直接選擇 main 分支，接著將 public 資料夾當作 root

接著，我們需要把 Github Pages 設定到 hexo 分支上，這樣才能正常顯示你的部落格

首先，我們需要到你的 blog repo 的 Settings 頁面，有個 Pages 的選項

接著，我們需要把 Source 設定為 hexo 分支，並且把 Save 按下去

過幾分鐘之後，如果看到 [your username].github.io 有正常顯示你的部落格，那就代表你的 Github Pages 設定成功了

到這裡，一個基本的部落格就設定完成了！

Domain Name (Optional)

接著，我們可以來設定自己的 Domain Name，讓你的部落格可以用自己的 Domain Name 來存取

以我的例子來說就是 CodingMan.cc

以目前來說，大宗的組合都是 Cloudflare + Github Pages + Godaddy

設定上我就不多著墨，因為我也是採用這樣的步驟來設定

詳細設定你可以參考這篇文章
如何替 Github Pages 設定個人網域與 CloudFlare SSL 設定？使用 GoDaddy、CloudFlare、Github

最後

如果你有任何問題，你知道怎麼找到我 😀