一、前言

Hexo 是一個基於 NodeJs 博客框架，可以快速的幫我們搭建一個博客系統，Hexo使用的是Markdown（下文簡稱MD）解析文章的，在幾秒內即可利用靚麗的主體生成靜態網頁。

推薦使用 Hexo 有三大理由：

有大量的主題可供人們選擇
使用MD解析文章，MD是現在主流的文章格式
可以快速的生成靜態網頁，對於系統性能要求低

本文將包含的內容：

Hexo安裝
後臺模式啓動Hexo
Hexo主題更換
構建Hexo分類列表頁
添加評論功能
使用Hexo-Admin插件更方便的發佈文章

本文實踐環境：

Ubuntu 16.04

二、Hexo安裝

Setp1：安裝NodeJs環境

下載對應平臺的安裝包

輸入網址：https://nodejs.org/en/download/ 找到對應的平臺進行下載，如果是Windows平臺可以直接使用xxx.msi進行傻瓜式的安裝即可，如果是Linux系統，需要下載安裝包，然後上傳到對應的服務器，等待後續的操作。

解壓

tar -xvf node-v8.11.4-linux-x64.tar.xz

設置全局變量

sudo ln /用戶Node解壓包地址/bin/node /usr/local/bin/node

sudo ln /用戶Node解壓包地址/bin/node /usr/local/bin/npm

進行如上配置之後，nodejs環境已經安裝好了，使用命令查看nodejs版本

node -v

Setp2：安裝Hexo腳手架

npm install hexo-cli -g

所謂的“腳手架”也就是安裝對應的客戶端，使它具備操作自己的能力。這樣說可能有點繞，比如說Hexo腳手架的作用就可以創建Hexo框架的項目，新建頁面，編譯Hexo項目，發佈運行Hexo項目對，腳手架是讓其擁有操作自身的能力。

Setp3：初始化Hexo

使用命令：

hexo init blog

cd blog

npm install

Setp4：啓動Hexo

hexo s

hexo s是hexo server的縮寫，正常啓動之後，在瀏覽器輸入：http://localhost:4000/

這時候就能看到我們已經搭好的Hexo博客了，是不是很方便。

三、後臺模式啓動Hexo

上面我們已經博客搭好了，但是退出控制檯之後發現訪問不了了，這是因爲啓動Hexo訪問的命令終止了，這個時候我們需要使用後臺模式來啓動Hexo了。

和後臺啓動NodeJs一樣，我們有兩種方式可以實現後臺模式啓動：

使用Linux本身自帶的nohup命令啓動；
使用第三方守護線程的方式啓動，比如PM2；

下來我們分別來實現以上兩種方式。

3.1 使用nohup模式啓動

nohup啓動命令：

nohup hexo s -p 80 &

exit

其中“-p 80”是指定端口號。

停止命令：

killall hexo

3.2 使用PM2啓動

Setp1：安裝PM2

npm i pm2 -g

Setp2：編寫啓動腳本

創建app.js，放在博客根目錄，代碼如下：

//run
const { exec } = require('child_process')
exec('hexo server -p 80',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})

Setp3：啓動項目

進入博客根目錄，輸入命令：

pm2 start app.js

更多pm2命令

pm2 stop all #停止所有應用
pm2 restart all #重啓所有應用
pm2 delete all #刪除所有應用
pm2 list #查看所有應用

3.3 總結

nohup和pm2的區別：

nohup比pm2使用更簡單
pm2功能比nohup更強大，有完善的日誌信息，可以查看詳細的運行情況
pm2有相應的管理視圖，可以方便多應用的管理和運行
pm2可以設置多實例運行nodejs程序，可以充分利用系統資源

四、主題更換

Hexo另一個強大之處，在於它有很多的主題可以使用，方法地址：https://hexo.io/themes/

選擇你喜歡的主題，以“MaterialFlow”爲例，更換步驟如下：

Setp1：下載主題

訪問：https://github.com/stkevintan/hexo-theme-material-flow 點擊Clone or download => Download ZIP 下載文件到本地。

Setp2：複製主題到服務器

把下載好的文件進行解壓之後，拷貝到Hexo\themes目錄下。

Setp3：修改配置文件

找到Hexo根目錄的_config.yml修改：

theme: landscape

爲

theme: material-flow

繼續更改根目錄的_config.yml文件爲自己的信息，比如title，author等，可以參照這個配置文件：

https://github.com/stkevintan/hexo/blob/master/_config.yml

而主題material-flow下也有一個_config.yml文件，這個文件是配置使用的過程的，比如分類，標籤的名稱順序等，查找配置文件：

https://github.com/stkevintan/hexo/blob/master/themes/material-flow/_config.yml

Setp4：重啓項目

到目前爲止已經完成了主題的更換，如果你是使用的nohup就是用“killall hexo”停止，在啓動項目即可，如果使用pm2就是用“pm2 restart all”，查看新換的主題吧。

五、構建Hexo分類列表頁

使用Hexo是沒有分類集合頁面的，需要用戶自己創建，步驟如下：

Setp1：創建分類頁面

hexo new page "categories"

Setp2：配置分類導航

打開主題內的_config.yml，注意不是根目錄的_config.yml，配置如下：

menu:
  - name: 首頁
    slug: home
    url: /
  - name: 分類
    slug: categories
    url: /categories

把分類顯示到導航的第二個，如下圖：

Setp3：修改模板

打開文件layout/_partial/article.ejs，找到

<div class="article-entry" itemprop="articleBody">替換div的所有內容爲下面這段代碼：

<div class="article-entry" itemprop="articleBody">
	<% if (page.type === "tags") { %>
		<div class="tag-cloud">
			<div class="tag-cloud-title">
				<%- _p('counter.tag_cloud', site.tags.length) %>
			</div>
			<div class="tag-cloud-tags">
				<%- tagcloud({
					min_font: 12,
					max_font: 30,
					amount: 200,
					color: true,
					start_color: '#ccc',
					end_color: '#111'
					}) %>
			</div>
		</div>
		<% } else if (page.type === 'categories') { %>
			<div class="category-all-page">
				<div class="category-all-title">
					<%- _p('全部分類', site.categories.length) %>
				</div>
				<div class="category-all">
					<%- list_categories() %>
				</div>
			</div>
			<% } else { %>
				<% if (post.excerpt && index){ %>
					<%- post.excerpt %>
						<% } else { %>
							<%- post.content %>
								<% } %>
									<% } %>
</div>

Setp4：修改樣式

以“material-flow”主題爲例，打開文件“themes/material-flow/source/less/_article.less”添加下面樣式，到文件最底部：

/*tag-cloud*/
.tag-cloud {
  text-align: center;
  margin-top: 50px;
}
.tag-cloud a {
  display: inline-block;
  margin: 10px;
}
.tag-cloud-title {
  font-weight: 700;
  font-size: 24px;
}
.tag-cloud-tags {
  margin-top: 15px;
  a {
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: 10px;
    color: #fff;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: relative;
    border-radius: 0 5px 5px 0;
    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
    &:hover {
      opacity: 0.8;
    }
    &:before {
      content: " ";
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: -18px;
      border: 9px solid transparent;
    }
    &:after {
      content: " ";
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
      position: absolute;
      top: 7px;
      left: 2px;
    }
  }
  a.color1 {
    background: #FF945C;
    &:before {
      border-right-color: #FF945C;
    }
  }
  a.color2 {
    background: #F5C7B7;
    &:before {
      border-right-color: #F5C7B7;
    }
  }
  a.color3 {
    background: #BA8F6C;
    &:before {
      border-right-color: #BA8F6C;
    }
  }
  a.color4 {
    background: #CFB7C4;
    &:before {
      border-right-color: #CFB7C4;
    }
  }
  a.color5 {
    background: #7B5D5F;
    &:before {
      border-right-color: #7B5D5F;
    }
  }
}

/*category-all-page*/
.category-all-page {
  margin-top: 50px;
  .category-all-title {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
  }
  .category-list-item:after {
    content: '';
    clear: both;
    display: table;
  }
  .category-list-count {
    float: right;
    margin-left: 5px;
  }
  .category-list-count:before {
    content: '一共 ';
  }
  .category-list-count:after {
    content: ' 篇文章';
  }
}

效果如下圖：

如上的配置設置完之後，還差一步給文章設置了分類之後，纔會顯示出來。

Setp5：設置文章屬性

添加如下屬性在MD的開頭：

---
title: RabbitMQ在Ubuntu上的環境搭建
date: 2018-06-02
tag: "rabbitmq"
categories:
  - [Java]
  - [MQ]
---

其中：

title 文章標題
date 文章發佈日期
tag 文章標籤
categories 文章分類，多個獨立的分類使用上面代碼的格式

設置了文章分類之後，所有文章的分類就會自動顯示出來了。

六、添加評論功能

本文對接的評論爲暢言，暢言微微SOHU出品的，在行業裏面使用的很廣泛，比如17173，人民網，中國新聞網等調用的暢言，優點是對接簡單，國內的速度快，不需要FQ，缺點是嵌套的域名需要備案。

Setp1：註冊暢言賬號

訪問：https://changyan.kuaizhan.com/ 註冊賬號，安裝暢言的引導註冊應用，獲取評論安裝代碼，每個應用的都不一樣，其中appid和conf是獨立的，複製暢言評論安裝代碼。

Setp2：修改主題配置

找到主題下的_config.yml在底部添加：

changyan:
  on: true

Setp3：修改代碼

打開文件“material-flow\layout_partial\article.ejs”替換代碼：

<% if (post.comments && config.disqus_shortname){ %>
		<section id="comments">
			<div id="disqus_thread"></div>
		</section>
	<% } %>

爲：

<% if (post.comments && theme.changyan.on){ %>
	<%- partial('comments/changyan', {
	}) %>
<% } %>

修改完之後，重啓項目。

評論效果如下：

七、使用Hexo-Admin更方便的發佈文章

使用Hexo快是快，但是有一個問題，就是每次發佈文章都要手動發佈到服務器上，並且還要進行服務器重啓，是一件很麻煩的事情，那麼有沒有簡單的方法，可以直接通過後臺進行文章錄入和發佈呢？

這就是Hexo-Admin插件的作用，讓你可以直接通過後臺管理和新增文章，真是太爽了，下來一起來看看實現步驟吧。

Setp1：安裝Hexo-Admin插件

npm install --save hexo-admin

Setp2：啓動插件

經過上面安裝已經挖完成了hexo-admin的安裝了，這個時候只需要重啓項目，訪問http://localhost/admin/ 就可以看到管理後臺了，如下圖：

Setp3：設置密碼

我們發現第一次登錄是沒有密碼的，這可不行，接下來我們要設置一個密碼，點擊管理後臺的Settings，如下圖：

進入頁面之後，輸入用戶名、密碼，保存生成的賬號信息複製到根目錄下的_config.yml文件最底下，配置賬號信息，如下圖：

重啓服務，這個時候，我們重新訪問http://localhost/admin/ 發現生效了，我們只有輸入正常的用戶名或者密碼才能進入系統。

文章的添加和修改和簡書很像，這裏就不過多描述了，更多使用的細節用戶自己慢慢研究吧。

八、總結

到目前爲止，我們已經把整個博客系統搭建起來了，包括和用戶的互動留言，如果需要打賞功能的話，在article.ejs文章下面貼上自己的微信或支付寶的二維碼即可，當然還有很讚的博客搜索功能，也是Hexo也是直接支持的，不用用戶過多的配置，就這樣這個博客系統已經搭建完畢了。

使用Hexo搭建個人博客的終極資料 原