前言
很多人都有搭建博客或知識庫站點的想法，可自己買雲服務器太不划算，部署管理也是個問題；基於免費又熱門的 GitHub Pages 來搭建博客站點倒是省錢省力省事的好辦法，於是上網一搜，滿屏都是關於使用 Jekyll 來搭建站點的文章，這個 Jekyll 是基於 Ruby 開發的，上手得先裝一大坨東西、各種啰嗦各種坑，看的一點欲望都沒有了。
神器出現
平地一聲雷，炸出了 Hexo (https://hexo.io/zh-cn) 這個神器。它只需要 NodeJS 即可，完全不依賴其他亂七八糟的玩意，安裝部署超級簡單，功能完善、漂亮主題也很多，妥妥的就是它了。
- __Hexo __官網：https://hexo.io/zh-cn/
安裝簡單，並且官網上提供了很多主題可供選擇。
- 我喜歡的一款主題 (Archer)
http://firework.studio/archer-demo/
https://github.com/fi3ework/hexo-theme-archer
建站步驟
有關一般建站步驟，請參考本文后面的“參考文章”部分，在進行后續操作之前，請按照 Hexo 官網的安裝指引，確保 NodeJS 和 Hexo 已經成功安裝。
友情提示：在此之前請務必詳讀 Hexo 官網中的文檔。
我們的站點源碼：https://github.com/Zongsoft/zongsoft.github.io，沒必要把 Hexo 運行環境和使用的主題文件都保存在站點倉庫中，所以需要將這些不需要的目錄和文件加入到 .gitignore 文件中；站點的 Hexo 基本配置(hexo.config.yml)和相應主題配置文件(hexo.config-theme.archer)需要保留，以便下次或別人構建時將其覆蓋還原為默認配置。
站點構建
在首次 clone 獲取我們站點源碼后，按順序執行下列命令，__注意：__推薦在 Git Bash 中進行操作。
- 初始化 Hexo 站點目錄：
hexo init site && cd site
- 安裝相關插件：
npm i hexo-generator-json-content --save && npm i hexo-wordcount --save
- 獲取 Archer 主題：
git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer
- 覆蓋 Hexo 默認配置文件：
cp ../hexo.config.yml _config.yml
- 覆蓋 Archer 主題默認配置文件：
cp ../hexo.config-theme.archer.yml themes/archer/_config.yml
- 加入定制的頁面布局：
cp ../post-footer.ejs themes/archer/layout/_partial/post-footer.ejs
- 安裝 Hexo 站點：
npm install
文章寫作
上面的構建過程稍微需要花點時間，但只要構建一次之后就不用管它了。
- 通過
hexo new [layout] <title>命令來創建一個文章，也可以手動把寫好的文章拷貝到源目錄(/docs/_posts/)中。 - 執行
hexo generate命令生成靜態頁面(/blog)，生成之后，可以使用hexo server命令來查看實際效果。 - 最后，執行相關 Git 命令將這些改動提交到遠程倉庫中。
__注意：__創建了一篇新文章后，務必要設置好文章的元信息（即標題、創建時間、所屬分類、Tags等），具體定義請參考 Hexo 官網的這篇文章：https://hexo.io/zh-cn/docs/front-matter.html
__提示：__如果生成有問題，可以執行 hexo clean 命令來清空輸出目錄，之后再把項目所需的資源文件手動拷貝到輸出目錄的相應子目錄中。
其他備注
- 修改 post.ejs (site/themes/archer/layout/) 模板，增加對 post-footer.ejs 局部模板的引用：
<main class="main post-page">
<article class="article-entry">
<%- page.content %>
</article>
<%- partial('_partial/post-footer') %>
- 修改 post.ejs 模板中的分頁指示的標簽：
<div class="nextSlogan">Next Post</div>> <a class="nextSlogan" href="<%- url_for(page.prev.path) %>">Next Post</a>>
<div class="prevSlogan">Previous Post</div>> <a class="prevSlogan" href="<%- url_for(page.next.path) %>">Previous Post</a>
- 調整了 Archer 主題的 _post_page.scss (site/themes/archer/src/scss/_partial/) 中的部分樣式：
// ========== paginator ========== //
.post-paginator {
li {
max-width:18rem;
}
.nextTitle,
.prevTitle{
font-size:1.2rem; //remove this line
}
}
// ========== content ========== //
.abstract-content,
.article-entry {
> p {
text-indent:2em;
}
}
參考文章
-
《使用 Hexo & GitPage 搭建博客》
https://yuque.com/skyrin/coding/tm8yf5 -
《從多說到跟帖：推薦網易雲跟帖》
https://blog.vadxq.com/dstogentie/ -
《集成gitment或者gitalk評論系統》
http://www.huyanbing.me/2017/10/20/46383.html
提示：
本文可能會更新，請閱讀原文： https://zongsoft.github.io/blog/zh-cn/misc/github-site，以避免因內容陳舊而導致的謬誤，同時亦有更好的閱讀體驗。