使用Hexo搭建我的博客的終極資料

1、前言

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

推薦使用 Hexo 有三大理由：

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

本文將包含的內容：

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

本文實踐環境：

• Ubuntu 16.04

2、Hexo安裝

Setp1：安裝NodeJs環境

• 下載對應平臺的安裝包

輸入網址：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博客了，是否是很方便。

3、後臺模式啓動Hexo

上面咱們已經博客搭好了，可是退出控制檯以後發現訪問不了了，這是由於啓動Hexo訪問的命令終止了，這個時候咱們須要使用後臺模式來啓動Hexo了。

和後臺啓動NodeJs同樣，咱們有兩種方式能夠實現後臺模式啓動：

1. 使用Linux自己自帶的nohup命令啓動；
2. 使用第三方守護線程的方式啓動，好比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程序，能夠充分利用系統資源

4、主題更換

Hexo另外一個強大之處，在於它有不少的主題可使用，方法地址：hexo.io/themes/

選擇你喜歡的主題，以「MaterialFlow」爲例，更換步驟以下：

Setp1：下載主題

訪問：github.com/stkevintan/… 點擊Clone or download => Download ZIP 下載文件到本地。

Setp2：複製主題到服務器

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

Setp3：修改配置文件

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

theme: landscape

爲

theme: material-flow

繼續更改根目錄的_config.yml文件爲本身的信息，好比title，author等，能夠參照這個配置文件：

github.com/stkevintan/…

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

github.com/stkevintan/…

Setp4：重啓項目

到目前爲止已經完成了主題的更換，若是你是使用的nohup就是用「killall hexo」中止，在啓動項目便可，若是使用pm2就是用「pm2 restart all」，查看新換的主題吧。

5、構建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 文章分類，多個獨立的分類使用上面代碼的格式

設置了文章分類以後，全部文章的分類就會自動顯示出來了。

6、添加評論功能

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

Setp1：註冊暢言帳號

訪問：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', {
	}) %>
<% } %>
複製代碼

修改完以後，重啓項目。

評論效果以下：

7、使用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/ 發現生效了，咱們只有輸入正常的用戶名或者密碼才能進入系統。

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

8、總結

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