使用Hexo搭建個人部落格的終極資料

王磊的部落格發表於2018-09-07
Hexo

一、前言

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

推薦使用 Hexo 有三大理由：

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

本文將包含的內容：

  • Hexo安裝
  • 後臺模式啟動Hexo
  • Hexo主題更換
  • 構建Hexo分類列表頁
  • 新增評論功能
  • 使用Hexo-Admin外掛更方便的釋出文章

本文實踐環境：

  • Ubuntu 16.04

二、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部落格了，是不是很方便。

三、後臺模式啟動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程式，可以充分利用系統資源

四、主題更換

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”，檢視新換的主題吧。

五、構建Hexo分類列表頁

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

Setp1：建立分類頁面

hexo new page "categories"

Setp2：配置分類導航

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

menu:
  - name: 首頁
    slug: home
    url: /
  - name: 分類
    slug: categories
    url: /categories
複製程式碼

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

使用Hexo搭建個人部落格的終極資料

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: ' 篇文章';
  }
}
複製程式碼

效果如下圖：

使用Hexo搭建個人部落格的終極資料

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

Setp5：設定文章屬性

新增如下屬性在MD的開頭：

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

其中：

  • title 文章標題
  • date 文章釋出日期
  • tag 文章標籤
  • categories 文章分類，多個獨立的分類使用上面程式碼的格式

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

六、新增評論功能

本文對接的評論為暢言，暢言微微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', {
	}) %>
<% } %>
複製程式碼

修改完之後，重啟專案。

評論效果如下：

使用Hexo搭建個人部落格的終極資料

七、使用Hexo-Admin更方便的釋出文章

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

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

Setp1：安裝Hexo-Admin外掛

npm install --save hexo-admin

Setp2：啟動外掛

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

使用Hexo搭建個人部落格的終極資料

Setp3：設定密碼

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

設定密碼1

進入頁面之後，輸入使用者名稱、密碼，儲存生成的賬號資訊複製到根目錄下的_config.yml檔案最底下，配置賬號資訊，如下圖：

設定密碼2

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

文章的新增和修改和簡書很像，這裡就不過多描述了，更多使用的細節使用者自己慢慢研究吧。

八、總結

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

相關文章