基於Hexo搭建博客

06-02

基於Hexo搭建博客

最近想搭建自己的博客，在網上查了攻略之後決定使用Hexo+github來搭建，搭建過程中也遇到了一些問題，所以本文一方面是讓大家有一個參考，還有就是記錄一下方便自己以後查看。廢話不多說啦，下面就來詳細介紹具體步驟。

PS：我博客的地址：https://summerrouxin.github.io/

2、環境配置

Hexo是基於NodeJs的靜態博客框架，具有快速、簡潔、高效等特點。使用Markdown（或其他渲染引擎）解析文章，生成的靜態網頁可以託管在Github和Heroku上。

2、環境配置

2.1 安裝git

看到這篇博客的應該大部分都是程序員，所以git一定不會陌生，所以這裡只給出官網上操作步驟，供大家參考。

Windows：下載並安裝 git 。
Mac：使用 Homebrew, MacPorts ：brew install git;或下載安裝程序安裝。
Linux (Ubuntu, Debian)：sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

檢驗是否安裝成功：

$ git version

2.2 安裝nodejs

去 nodejs 官網下載所需系統的安裝包，並根據提示安裝即可。檢驗是否安裝成功：

$ node -v

2.3 安裝hexo

上述兩個必備程序安裝成功之後，只需要通過npm便可以完成Hexo的安裝了。

$ npm install -g hexo-cli

至此，環境配置就完成了，可以開始搭建博客啦！

3、新建博客 rouxin

3.1 創建github倉庫

進入GitHub新建repo，注意這裡的倉庫名稱要和你的username對應，這邊很容易出問題，所以一定要注意，如下圖所示：

3.2 hexo操作

$ hexo init rouxin$ cd rouxin$ npm install

上面三步主要完成初始化hexo的文件夾，安裝依賴。新建完成後，可以看到文件夾的結構如下：

.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes

其中，_config.yml是配置文件，這個文件我們會經常用到，後面也會介紹具體可以配置哪些信息。

source是資源文件夾，用來存放我們的markdown文件。

themes文件夾是用來放置主題的，後面主題部分我們將詳細介紹。

下面我們修改配置文件_config.yml中以下幾個欄位，完成部署的相關配置：

其中，

type欄位對應的是部署的伺服器類型，我們在這邊填寫git即可
repo是我們在3.1中創建的github倉庫的地址
branch是文件的分支，默認是master

完成上述配置後，在終端執行npm install hexo-deployer-git --save，這個操作主要是為了把我們寫好的文章部署到github伺服器上並可以被別人瀏覽。

4、發文章

當然啦，我們新建博客的目的肯定是為了自己寫文章，通過命令

$ hexo new test_md

就可以新建文章，此時會在source/_posts目錄下生成test_md.md文件，在test_md.md中輸入內容後，保存一下。

運行以下命令（以下我們稱為三步走），訪問localhost:4000就可以看到效果啦。

$ hexo clean$ hexo g$ hexo s

其中hexo clean是為了清除緩存，和已經生成的靜態文件(publish文件夾)；hexo g是命令hexo generate的簡寫，生成靜態文件；hexo s是命令hexo server的簡寫。默認情況下，訪問網址為：http://localhost:4000/

在本地看到效果後，可以通過命令$ hexo d(即hexo deploy)將網站進行部署。

完成以上步驟之後，我們訪問鏈接https://summerrouxin.github.io/就可以看到博客啦~~~手機也可以查看哦

5、個性化定製

完成以上步驟，其實我們的基礎功能已經完成啦，可是為了博客能更好看一些我還想做一些個性化的定製，首先肯定是想換下主題

5.1 更換主題

默認的主題實在有些不能忍啊啊，所以在博客跑起來之後我第一件事就是去更換主題，關於主題網上有很多介紹，有一些來自於 hexo官方的主題，也有一些是自己開發的，這邊我們為了能夠快速搞定，就在官方主題上進行選擇

首先我們在官網上找到自己喜歡的主題，可是我不得不吐槽一下，官方的主題真的有些太man了，我們這些女碼農真的很難找到自己喜歡的主題。。。我把列表來回看了三遍，勉強選擇了Anodyne，所以下面我們都以Anodyne為例。把主題的地址克隆到博客目錄的themes下，執行

$ git clone https://github.com/klugjo/hexo-theme-anodyne

然後我們還是要到配置文件_config.yml中，修改theme欄位，如下圖所示

接著執行三步走的代碼，就可以在本地看到更換主題的效果。

5.2 修改導航欄

修改導航欄，這次我們要修改的仍然是配置文件_config.yml，不過不是之前修改的全局的配置文件，而是主題下的配置文件themes/anodyne/_config.yml，在主題中找到menu欄位，因為這邊我們主要有兩個頁面，一個是首頁還有是一個是歸檔頁面，About和Contact沒有對應頁面，所以將About和Contact的路由都改為了首頁，即/。如下圖所示：

5.3 設置標籤與分類

給文章貼標籤

首先需要確認全局的配置文件_config.yml中有tag_dir: tags，確認過之後就可以新建tags頁面啦。命令為：

$ hexo new page tags

此時會在全局的source文件下新建文件夾tags文件夾，修改tags/index.md文件

title: tagsdate: 2018-05-23 19:52:31type: "tags"

全局設置好標籤之後就可以給文章貼標籤了，在文章的.md文件中添加：

tags: - tag1 - tag2

添加過之後，頭部如下：

title: test_mddate: 2018-05-23 20:10:12tags: tag1

設置文章分類

給文章設置分類與上面介紹的設置標籤類似，也需要首先確認一下全局的配置文件_config.yml中有category_dir: categories，接著新建categories文件

$ hexo new page categories

此時會在全局的source文件下新建文件夾categories文件夾，修改categories/index.md文件

title: 文章分類date: 2018-05-23 20:19:38type: "categories"

設置好全局的分類之後，就可以設置文章的分類了，在文章的.md文件中添加：

categories: - category1 - category2

添加過之後，頭部如下：

title: test_mddate: 2018-05-23 20:10:12categories: cate1

5.4 設置代碼高亮、行號

代碼高亮

完成了基本中能之後，可以正式開始寫博客了，可是在寫的過程中又發現了新問題：博客內的代碼沒有高亮。為了解決這個問題，在網上查了一些資料，hexo默認已經實現了代碼高亮，但是它存在一些局限性，某些情況下無法高亮，而且界面也比較丑，所以最後還是選擇了 highlight.js 這個庫。這個庫的使用也很簡單，具體步驟如下：

我們上面介紹了hexo自帶高亮，所以需要先關閉自帶高亮，在全局配置文件_config.yml中將highlight的enable欄位設置為false。
接著要引入highlight.js的css和js，具體的引入位置在主題模版中的<head></head>之間，我使用的Anodyne風格寫在了主題的layout文件夾中的layout.ejs文件內，具體代碼如下：

<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.2.0/styles/github.min.css"><script src="//cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>

在highlight.js官方文檔可以看到，它有很多代碼風格，我們可以根據自己的喜好來選擇，因為平時經常看github的代碼，所以我這邊選擇的是github風格。

3. 最後，還要對highlight進行初始化，位置在</body>之前的<script></script>中引入，代碼如下：

hljs.initHighlightingOnLoad();

上述步驟的具體代碼截圖如下圖所示：

添加代碼行號

處理完代碼高亮之後，很自然的想讓插入的代碼帶有行號，所以我們接下來就介紹一下怎樣添加代碼行號。這邊我們使用庫 highlightjs-line-numbers.js ，具體步驟如下：

首先是引入庫，這裡有兩種方式：
第一種是，執行命令 $ npm install highlightjs-line-numbers.js
第二種是，通過script的方式引入，<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>。
其實比較規範的操作應該是通過npm install的方式來引入，這樣作者有更新，我們可以拉到最新代碼，但是這裡我為了跟highlight保持一致，使用了第二種方式。
在highlight之後對行號插件進行初始化，代碼為：

hljs.initLineNumbersOnLoad();

上述步驟以及highlight的具體代碼截圖如下圖所示：

如果行號的樣式我們不喜歡，可以通過更改CSS的方式來改變，這邊仍然以Anodyne風格為例，我在anodyne/source/css/partial/_highlight文件中加入了如下代碼：

td.hljs-ln-numbers -webkit-touch-callout: none -webkit-user-select: none -khtml-user-select: none -moz-user-select: none -ms-user-select: none user-select: none text-align: center color: #ccc border-right: 1px solid #CCC vertical-align: top padding-right: 5px width: 20pxtd.hljs-ln-code padding-left: 10px.content table tr:not(:last-child) td border-bottom: 0px solid #eee

注意這邊要是styl的格式來編寫代碼，可是.styl貌似不支持高亮，好尷尬啊，這個有待進一步學習。

另外，還有一個小功能，就是如何將文字縮進，這邊我常用的方法就是輸入兩個 &emsp; 或者 &ensp; 。

以上，就是我們創建博客的一些基本功能的介紹，接下來我還會在博客中加入用戶量統計、評論框、插入表情等功能，敬請期待。

這篇文章寫的有點快，不清楚的地方大家可以提出來，因為非常捉急寫後面的Babylon-AST系列，大家可以過來圍觀下哈。