我如何打造我的部落格
有這個部落格也已經一年有餘了，簡單分享一下我打造這個部落格比較不一樣的地方與簡單的教學
這篇文章將會教導你使用免費的 Hexo、Github Actions 以及 Github Pages 來做出你現在看到的部落格
其中只有 domain name 是需要付費的，而這也是選擇性，你也可以使用免費的 domain name
Hexo
在這裏我選擇老牌的 Hexo 來打造我的部落格
原因是因為它發展了很久，有許多的主題可以選擇，而且還有許多的插件可以使用
而且開發者是台灣人，中文的文件和資源都相當豐富
一些大型主題也都有持續在更新 (重要)
至於 Hugo 標榜的是速度，但其實 Hexo 其實也不會差到哪裡去，就是幾秒鐘的差距
所以在這裏，我選擇具備社群與廣度的 Hexo
安裝 npm
簡單下載安裝即可 😀
安裝 Hexo
接著，我們需要安裝 Hexo，使用剛剛安裝的 npm 來安裝 Hexo
1 | npm install -g hexo-cli |
建立部落格
接著，我們需要初始化部落格
1 | hexo init blog |
接著你就可以看到你的部落格最一開始的樣子了
選擇你的主題
接著，我們需要選擇一個主題，因為我相信你絕對不會滿足於這個樣子
一開始，你可以先到 Hexo Themes 看看有沒有你喜歡的主題
或者你也可以到 Github 搜尋 hexo theme 來找到你喜歡的主題
又或者你可以選擇我目前使用的主題 NexT
註: NexT 換了好幾次 Github owner，小心不要搞混了，目前是 next-theme
安裝 NexT
我們直接從 Github 安裝最新版本
1 | cd blog |
修改 _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 | hexo new "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
最後
如果你有任何問題，你知道怎麼找到我 😀