# 一、前言

Hexo 是一個(gè)基于 NodeJs 博客框架，可以快速的幫我們搭建一個(gè)博客系統(tǒng)，Hexo使用的是Markdown（下文簡稱MD）解析文章的，在幾秒內(nèi)即可利用靚麗的主體生成靜態(tài)網(wǎng)頁。

推薦使用 Hexo 有三大理由：

• 有大量的主題可供人們選擇
• 使用MD解析文章，MD是現(xiàn)在主流的文章格式
• 可以快速的生成靜態(tài)網(wǎng)頁，對于系統(tǒng)性能要求低

本文將包含的內(nèi)容：

• Hexo安裝
• 后臺(tái)模式啟動(dòng)Hexo
• Hexo主題更換
• 構(gòu)建Hexo分類列表頁
• 添加評(píng)論功能
• 使用Hexo-Admin插件更方便的發(fā)布文章

本文實(shí)踐環(huán)境：

• Ubuntu 16.04

二、Hexo安裝

Setp1：安裝NodeJs環(huán)境

• 下載對應(yīng)平臺(tái)的安裝包

輸入網(wǎng)址：https://nodejs.org/en/download/ 找到對應(yīng)的平臺(tái)進(jìn)行下載，如果是Windows平臺(tái)可以直接使用xxx.msi進(jìn)行傻瓜式的安裝即可，如果是Linux系統(tǒng)，需要下載安裝包，然后上傳到對應(yīng)的服務(wù)器，等待后續(xù)的操作。

• 解壓

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

• 設(shè)置全局變量

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

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

進(jìn)行如上配置之后，nodejs環(huán)境已經(jīng)安裝好了，使用命令查看nodejs版本

node -v

Setp2：安裝Hexo腳手架

npm install hexo-cli -g

所謂的“腳手架”也就是安裝對應(yīng)的客戶端，使它具備操作自己的能力。這樣說可能有點(diǎn)繞，比如說Hexo腳手架的作用就可以創(chuàng)建Hexo框架的項(xiàng)目，新建頁面，編譯Hexo項(xiàng)目，發(fā)布運(yùn)行Hexo項(xiàng)目對，腳手架是讓其擁有操作自身的能力。

Setp3：初始化Hexo

使用命令：

hexo init blog

cd blog

npm install

Setp4：啟動(dòng)Hexo

hexo s

hexo s是hexo server的縮寫，正常啟動(dòng)之后，在瀏覽器輸入：http://localhost:4000/

這時(shí)候就能看到我們已經(jīng)搭好的Hexo博客了，是不是很方便。

三、后臺(tái)模式啟動(dòng)Hexo

上面我們已經(jīng)博客搭好了，但是退出控制臺(tái)之后發(fā)現(xiàn)訪問不了了，這是因?yàn)閱?dòng)Hexo訪問的命令終止了，這個(gè)時(shí)候我們需要使用后臺(tái)模式來啟動(dòng)Hexo了。

和后臺(tái)啟動(dòng)NodeJs一樣，我們有兩種方式可以實(shí)現(xiàn)后臺(tái)模式啟動(dòng)：

使用Linux本身自帶的nohup命令啟動(dòng)；

使用第三方守護(hù)線程的方式啟動(dòng)，比如PM2；

下來我們分別來實(shí)現(xiàn)以上兩種方式。

3.1 使用nohup模式啟動(dòng)

• nohup啟動(dòng)命令：

nohup hexo s -p 80 &

exit

其中“-p 80”是指定端口號(hào)。

• 停止命令：

killall hexo

3.2 使用PM2啟動(dòng)

Setp1：安裝PM2

npm i pm2 -g

Setp2：編寫啟動(dòng)腳本

創(chuàng)建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：啟動(dòng)項(xiàng)目

進(jìn)入博客根目錄，輸入命令：

pm2 start app.js

更多pm2命令

pm2 stop all #停止所有應(yīng)用 pm2 restart all #重啟所有應(yīng)用 pm2 delete all #刪除所有應(yīng)用 pm2 list #查看所有應(yīng)用

3.3 總結(jié)

nohup和pm2的區(qū)別：

• nohup比pm2使用更簡單
• pm2功能比nohup更強(qiáng)大，有完善的日志信息，可以查看詳細(xì)的運(yùn)行情況
• pm2有相應(yīng)的管理視圖，可以方便多應(yīng)用的管理和運(yùn)行
• pm2可以設(shè)置多實(shí)例運(yùn)行nodejs程序，可以充分利用系統(tǒng)資源

四、主題更換

Hexo另一個(gè)強(qiáng)大之處，在于它有很多的主題可以使用，方法地址：https://hexo.io/themes/

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

Setp1：下載主題

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

Setp2：復(fù)制主題到服務(wù)器

把下載好的文件進(jìn)行解壓之后，拷貝到Hexo\themes目錄下。

Setp3：修改配置文件

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

theme: landscape

為

theme: material-flow

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

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

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

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

Setp4：重啟項(xiàng)目

到目前為止已經(jīng)完成了主題的更換，如果你是使用的nohup就是用“killall hexo”停止，在啟動(dòng)項(xiàng)目即可，如果使用pm2就是用“pm2 restart all”，查看新?lián)Q的主題吧。

五、構(gòu)建Hexo分類列表頁

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

Setp1：創(chuàng)建分類頁面

hexo new page “categories”

Setp2：配置分類導(dǎo)航

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

menu:- name: 首頁slug: homeurl: /- name: 分類slug: categoriesurl: /categories

把分類顯示到導(dǎo)航的第二個(gè)，如下圖：

Setp3：修改模板

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

<div class="article-entry" itemprop="articleBody">替換div的所有內(nèi)容為下面這段代碼：

<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: ' 篇文章';} }

效果如下圖：

如上的配置設(shè)置完之后，還差一步給文章設(shè)置了分類之后，才會(huì)顯示出來。

Setp5：設(shè)置文章屬性

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

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

其中：

• title 文章標(biāo)題
• date 文章發(fā)布日期
• tag 文章標(biāo)簽
• categories 文章分類，多個(gè)獨(dú)立的分類使用上面代碼的格式

設(shè)置了文章分類之后，所有文章的分類就會(huì)自動(dòng)顯示出來了。

六、添加評(píng)論功能

本文對接的評(píng)論為暢言，暢言微微SOHU出品的，在行業(yè)里面使用的很廣泛，比如17173，人民網(wǎng)，中國新聞網(wǎng)等調(diào)用的暢言，優(yōu)點(diǎn)是對接簡單，國內(nèi)的速度快，不需要FQ，缺點(diǎn)是嵌套的域名需要備案。

Setp1：注冊暢言賬號(hào)

訪問：https://changyan.kuaizhan.com/ 注冊賬號(hào)，安裝暢言的引導(dǎo)注冊應(yīng)用，獲取評(píng)論安裝代碼，每個(gè)應(yīng)用的都不一樣，其中appid和conf是獨(dú)立的，復(fù)制暢言評(píng)論安裝代碼。

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', {}) %> <% } %>

修改完之后，重啟項(xiàng)目。

評(píng)論效果如下：

七、使用Hexo-Admin更方便的發(fā)布文章

使用Hexo快是快，但是有一個(gè)問題，就是每次發(fā)布文章都要手動(dòng)發(fā)布到服務(wù)器上，并且還要進(jìn)行服務(wù)器重啟，是一件很麻煩的事情，那么有沒有簡單的方法，可以直接通過后臺(tái)進(jìn)行文章錄入和發(fā)布呢？

這就是Hexo-Admin插件的作用，讓你可以直接通過后臺(tái)管理和新增文章，真是太爽了，下來一起來看看實(shí)現(xiàn)步驟吧。

Setp1：安裝Hexo-Admin插件

npm install –save hexo-admin

Setp2：啟動(dòng)插件

經(jīng)過上面安裝已經(jīng)挖完成了hexo-admin的安裝了，這個(gè)時(shí)候只需要重啟項(xiàng)目，訪問http://localhost/admin/ 就可以看到管理后臺(tái)了，如下圖：

Setp3：設(shè)置密碼

我們發(fā)現(xiàn)第一次登錄是沒有密碼的，這可不行，接下來我們要設(shè)置一個(gè)密碼，點(diǎn)擊管理后臺(tái)的Settings，如下圖：

進(jìn)入頁面之后，輸入用戶名、密碼，保存生成的賬號(hào)信息復(fù)制到根目錄下的_config.yml文件最底下，配置賬號(hào)信息，如下圖：

重啟服務(wù)，這個(gè)時(shí)候，我們重新訪問http://localhost/admin/ 發(fā)現(xiàn)生效了，我們只有輸入正常的用戶名或者密碼才能進(jìn)入系統(tǒng)。

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

八、總結(jié)

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

總結(jié)

以上是生活随笔為你收集整理的使用Hexo搭建个人博客的终极资料的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。