一、前言

Hexo 是一個基于 NodeJS 的博客框架，能夠快速搭建博客系統。它采用 Markdown（簡稱 MD）來解析文章內容，并在幾秒內生成美觀的靜態網頁。

推薦使用 Hexo 的三大理由：

1. 提供了豐富的主題選擇
2. 使用 MD 解析文章，MD 是當前主流的文章格式
3. 可以快速生成靜態網頁，對系統性能要求低

本文將涵蓋以下內容：

• Hexo 安裝
• 以后臺模式啟動 Hexo
• Hexo 主題更換
• 構建 Hexo 分類列表頁
• 添加評論功能
• 使用 Hexo-Admin 插件更方便地發布文章

本文的實踐環境為 Ubuntu 16.04。

二、Hexo 安裝

步驟1：安裝 nodejs 環境

下載對應平臺的安裝包，訪問網址：https://www.php.cn/link/ca491b18f3ec94170f37a9b561f2060c Windows 平臺，可以直接使用 .msi 文件進行傻瓜式安裝；如果是 Linux 系統，需要下載安裝包并上傳到服務器，進行后續操作。

解壓并設置全局變量后，NodeJs 環境即已安裝完畢。使用命令查看 NodeJs 版本：

node -v

步驟2：安裝 Hexo 腳手架

所謂的“腳手架”就是安裝對應的客戶端，使其具備操作自身的能力。例如，Hexo 腳手架可以創建 Hexo 框架項目、新建頁面、編譯和發布運行 Hexo 項目。

步驟3：初始化 Hexo

使用命令進行初始化：

hexo init

步驟4：啟動 Hexo

hexo s 是 hexo server 的縮寫。正常啟動后，在瀏覽器輸入 http://localhost:4000/ 即可查看搭建好的 Hexo 博客，非常便捷。

三、后臺模式啟動 Hexo

雖然我們已經搭建好了博客，但在退出控制臺后發現無法訪問，這是因為啟動 Hexo 的命令終止了。此時，我們需要使用后臺模式來啟動 Hexo。

與后臺啟動 NodeJs 類似，我們有兩種方式可以實現后臺模式啟動：

1. 使用 Linux 自帶的 nohup 命令啟動
2. 使用第三方守護線程的方式啟動，比如 PM2

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

3.1 使用 nohup 模式啟動

nohup 啟動命令如下，其中 -p 80 指定端口號：

nohup hexo server -p 80 &

停止命令：

killall hexo

3.2 使用 PM2 啟動

步驟1：安裝 PM2

npm install pm2 -g

步驟2：編寫啟動腳本

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

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}`); });

步驟3：啟動項目

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

pm2 start app.js

更多 PM2 命令：

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

3.3 總結 nohup 和 PM2 的區別：

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

四、主題更換

Hexo 的另一個優勢在于它有許多主題可供選擇。方法地址：https://www.php.cn/link/3fc19681d9d74f31286a182d200b9e7f

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

步驟1：下載主題

訪問：https://www.php.cn/link/b0e54e59a9fb43e43620e7174d30c2d0 or download” => “Download ZIP”下載文件到本地。

步驟2：復制主題到服務器

將下載好的文件解壓后，拷貝到 Hexo 的 themes 目錄下。

步驟3：修改配置文件

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

theme: material-flow

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

https://www.php.cn/link/6b1209c215bc00acef87a8e84a67e62f

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

https://www.php.cn/link/6fd6b19f1b2a8d3f9f402df3c5e05d30

步驟4：重啟項目

到目前為止已經完成了主題的更換。如果使用 nohup，使用“killall hexo”停止，然后重新啟動項目；如果使用 PM2，使用“pm2 restart all”重啟項目，查看新換的主題吧。

五、構建 Hexo 分類列表頁

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

步驟1：創建分類頁面

步驟2：配置分類導航

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

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

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

步驟3：修改模板

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

<div class="article-entry" itemprop="articleBody">

替換 div 的所有內容為下面這段代碼：

<div class="article-entry" itemprop="articleBody">   <%- page.content %> 

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

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

changyan:   on: true