搭建 github.io 博客站點

時間 2019-12-11

原文原文鏈接

前言

不少人都有搭建博客或知識庫站點的想法，可本身買雲服務器太不划算，部署管理也是個問題；基於免費又熱門的 GitHub Pages 來搭建博客站點卻是省錢省力省事的好辦法，因而上網一搜，滿屏都是關於使用 Jekyll 來搭建站點的文章，這個 Jekyll 是基於 Ruby 開發的，上手得先裝一大坨東西、各類囉嗦各類坑，看的一點慾望都沒有了。css

神器出現

平地一聲雷，炸出了 Hexo (https://hexo.io/zh-cn) 這個神器。它只須要 NodeJS 便可，徹底不依賴其餘亂七八糟的玩意，安裝部署超級簡單，功能完善、漂亮主題也不少，妥妥的就是它了。html

Hexo 官網：https://hexo.io/zh-cn/

安裝簡單，而且官網上提供了不少主題可供選擇。

我喜歡的一款主題 (Archer)

http://firework.studio/archer-demo/
https://github.com/fi3ework/hexo-theme-archer

建站步驟

有關通常建站步驟，請參考本文後面的「參考文章」部分，在進行後續操做以前，請按照 Hexo 官網的安裝指引，確保 NodeJS 和 Hexo 已經成功安裝。git

友情提示：在此以前請務必詳讀 Hexo 官網中的文檔。github

咱們的站點源碼：https://github.com/Zongsoft/zongsoft.github.io，不必把 Hexo 運行環境和使用的主題文件都保存在站點倉庫中，因此須要將這些不須要的目錄和文件加入到 .gitignore 文件中；站點的 Hexo 基本配置(hexo.config.yml)和相應主題配置文件(hexo.config-theme.archer)須要保留，以便下次或別人構建時將其覆蓋還原爲默認配置。npm

站點構建

在首次 clone 獲取咱們站點源碼後，按順序執行下列命令，注意：推薦在 Git Bash 中進行操做。json

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

文章寫做

上面的構建過程稍微須要花點時間，但只要構建一次以後就不用管它了。bash

經過 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 命令來清空輸出目錄，以後再把項目所需的資源文件手動拷貝到輸出目錄的相應子目錄中。hexo

其餘備註

修改 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;
    }
}