啓用Hexo開源博客系統
首發於 樊浩柏科學院
前段時間博客一直使用 FireKylin，整體感受挺好，可是擴展開發和社區是弱點。而 Hexo 最大特色爲純靜態博客系統，同時社區支持也比較好， 故我轉而投向了 Hexo 的懷抱。php
安裝
Hexo 如官方介紹同樣，安裝方便快捷。安裝前請確保 Node 和 Nginx 環境已經存在，須要安裝能夠參考 CentOS 6 安裝 Node 和 Nginx 安裝。css
只需使用以下命令便可安裝 Hexo。html
$ npm install hexo-cli -g $ hexo init blog $ cd blog $ npm install $ hexo server
安裝完成後目錄結構以下：node
├── _config.yml # 主配置文件 ├── package.json # 應用程序的信息 ├── scaffolds # 模版文件夾，新建文章時根據這些模版來生成文章的.md文件 ├── source # 資源文件夾 | ├── _drafts | └── _posts └── themes # 主題文件夾
Hexo 默認啓動 4000 端口，使用瀏覽器訪問 http://localhost:4000，便可看見 Hexo 美麗的面容。git
說明：Nginx 配置站點根目錄爲public。github
使用
關於 Hexo 更詳細的使用技巧，見官網文檔，這裏只列舉經常使用的使用方法。shell
更換主題
Hexo 提供的可選 主題 比較多，總有一款你如意的，我這裏主題選擇了 hexo-theme-yilia，沒有爲何，就是看起來舒服而已，後續相關配置也是基於該主題。npm
找到喜歡的一款後，使用以下命令安裝主題：json
# 進入博客目錄 $ cd yourblog # 克隆主題源碼到hexo的themes文件夾下 $ git clone https://github.com/fan-haobai/hexo-theme-yilia.git themes/hexo-theme-yilia
最後一步，在_config.yml配置中啓用新主題。api
theme: hexo-theme-yilia
關於主題的相關配置，參考主題源碼中的 README.md 文檔。
hexo-theme-yilia 主題我作了較多的修改，若是你以爲個人修改也適合你，那麼你只要 pull 下來便可，而不須要再作 自定義修改 部分的修改。
寫文章
這裏只列舉我使用過的方法，更多文章的使用方法，見這裏。
1） 新建文章
當須要寫文章時，使用以下命令新建文章，會在資源文件夾中生成與 title 對應的 md 文件。
$ hexo new [layout] <title>
md 文件就是 Markdown 格式的文章表述。格式大體爲：
title: Hello World date: 2013/7/13 20:46:25 --- # 分隔符 # 如下爲文章的Markdown內容
文件最上方以---爲分隔符，分隔符以上爲 Front-matter，用於指定與文章相關的基本信息，分隔符如下才爲文章的內容區域。
2） Front-matter
Front-matter 內容以下：
layout 佈局 title 標題 date 創建日期 updated 更新日期 comments 是否開啓文章的評論功能 tags 標籤 categories 分類 permalink 覆蓋文章網址
其中 title、date、tags、categories 這 4 項，在新建文章時須要進行設置，其餘項採用默認值便可，不須要在每篇文章中進行設置，故能夠將這 4 項基本設置移到模板文件scaffolds\post.md中，以下：
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---
這樣在新建文章時，就會自動在文章 md 文件中加入 4 項基本設置。
特別說明，文章中添加了分類和標籤後， Hexo 會自動生成分類頁面和統計分類的文章數。關於分類和標籤的使用，以下：
categories: # 分類存在順序關係 - 語言 # 1級分類 - PHP # 2級分類 - PDO # 3級分類 tags: # 標籤爲無序 - PHP # 標籤1 - PDO # 標籤2
3） 正文
文章正文使用 Markdown 格式便可，我使用的 Markdown 編輯器主要有 Typora — Win版 和 馬克飛象 — 網頁版。
Typora 和 馬克飛象 的對比：
- Typora 能夠在本地使用相對路徑預覽文章圖片，文章中插入圖片方法，見配置部分。
- 馬克飛象在線編輯，能夠同印象筆記時時同步，可是想預覽圖片，就必須是線上圖片地址。
使用編輯器預覽編輯完文章後，導出 md 文件替換新建文章時生成的同名 md 文件便可。
編輯完文章後，使用hexo s命令便可實時預覽到文章效果。
發佈
文章的新增和編輯都是在資源文件夾下（source）操做，完成後須要發佈才能生成靜態文件（public），進而才能經過瀏覽器直接訪問。
發佈更新命令以下：
$ hexo generate # 能夠簡寫爲 $ hexo g
發佈後，public文件夾更新到最新狀態，此時便可直接訪問。
插件
搜索
安裝 hexo-generator-search，在_config.yml中添加以下配置代碼：
search: path: search.xml field: all
RSS
安裝 hexo-generator-feed，並按照說明配置（atom.xml 的連接寫在source/_data/link.json的 social 項中，通常無需更改）
jsonContent
安裝 hexo-generator-json-content，便可生成全部文章的 json 描述。需在_config.yml中添加以下配置代碼：
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
Sitemap
安裝 hexo-generator-sitemap，並在_config.yml中添加以下配置代碼：
sitemap: path: sitemap.xml
在使用 Hexo 生成器時會自動生成最新的站點地圖 sitemap.xml文件。
配置
更多的配置信息，見這裏。我這裏只列舉比較重要的配置。
打開文章資源文件夾功能
在 Hexo 中，相對路徑是針對資源文件夾source來說，因此文章的靜態圖片應放置於資源文件夾下。
能夠將全部文章的靜態圖片統一放置於source/images下，可是這樣不方便於管理，推薦方法是將每篇文章的圖片放置於與該文章同名的資源文件下，而後使用相對路徑引用便可。
在配置文件_config.yml中開啓post_asset_folder項，即更改成：
post_asset_folder: true
開啓該項配置後，Hexo 將會在你每一次經過hexo new [layout] <title>命令建立新文章時自動建立一個文件名同 md 文件的文件夾。將全部與你的文章有關的資源放在這個關聯文件夾中以後，就能夠經過相對路徑來引用它們。
寫文章時你只需在 Markdown 中插入相對 md 文件的 相對路徑 的圖片便可，hexo-asset-image 自動轉化爲網站 絕對路徑。此時，能夠直接使用 Hexo 提供的標籤asset_img來插入圖片，可是這樣違背了 Markdown 語法，沒法及時預覽，不便於編輯文章。
能夠經過如下 Markdown 語法在文章中插入圖片，這種方式同時也支持本地 Markdown 編輯器實時預覽。
 # post_title爲與文章.md同名的資源文件夾名 # image_name爲圖片的文件名
URL靜態化
Hexo 默認 URL 地址爲year/month/day/title/形式，而這種形式並不友好，需更改成year/month/title.html形式。這裏我已經將source目錄下的 md 文件按year/month手動歸檔了，因此 Hexo 發佈時只須要title.html這部分。配置以下：
permalink: title.html
去除代碼塊行號
修改_config.yml配置項以下：
highlight: line_number: false
部署
若是採用本地編輯博客，博客部署在遠程服務器上，那麼你就須要部署，才能同步本地更新到遠程服務器。
官方推薦
Hexo 提供了 5 種部署方案，見這裏，這裏只介紹如下 2 種：
1） Git
_config.yml配置以下：
deploy: type: git repo: <repository url> # 庫地址 branch: [branch] # 分支名稱 message: [message] # 提交信息
該方案適用於採用 Github Pages 託管博客的用戶，固然使用服務器搭建博客的用戶可使用 Webhook 方案來實現。
2） Rsync
_config.yml配置以下：
deploy: type: rsync host: <host> # 遠程主機的地址 user: <user> # 使用者名稱 root: <root> # 遠程主機的根目錄 port: [port] # 端口，rsync監聽端口 delete: [true|false] # 是否刪除遠程主機上的舊文件 verbose: [true|false] # 顯示調試信息 ignore_errors: [true|false] # 忽略錯誤
顯然，該方案適用於使用服務器搭建博客的用戶，可是須要在本地安裝 Rsync 客戶端（cwRsync）。同時，須要在服務器搭建和配置 Rsync 服務，見這裏。
我嘗試在 Win10 下實現這種方案，可是遇到了不少問題，例如 rsync 服務端採用 SSH 認證方式，可是 cwRsync 使用的 SSH 客戶端呆板的從
/home/.ssh目錄查找 SSH 配置和公鑰，很悲劇 Win10 下沒法識別這個路徑，致使沒法免密登陸 SSH，Rsync 同步也沒法進行。
總之，部署的目的，就是將發佈生成的靜態文件public更新到服務器上，若是能實現這個目的，途徑卻是無所謂了。
個人方案
上述推薦部署方案，明顯的缺點是本地須要部署 Hexo 環境，沒法實現隨時隨地的更新博客。爲了方便寫做，個人部署方案見 個人博客發佈上線方案 — Hexo。
自定義修改——非必須
在文章摘要中加入預覽圖
需修改文件node_modules/hexo/lib/plugins/filter/after_post_render/excerpt.js，內容修改成以下：
// 此處有更改
content.replace(rExcerpt, function(match, index) {
data.excerpt = content.substring(0, index).trim();
data.more = content.substring(index + match.length).trim();
// 去掉img標籤
data.content = data.excerpt.replace(/<img(.*)>/, '') + data.more;
return '<a id="more"></a>';
});
說明：文章摘要預覽圖不會在文章正文中顯示。
更好地支持Shell代碼高亮
因爲 highlight.js 對 Shell 語法高亮解析效果並不理想，爲此我對 languages/shell.js 部分作了修改來更好地支持 Shell，你只須要 pull 並替換掉原 languages/shell.js 文件便可。
$ git clone https://github.com/fan-haobai/highlight.js.git $ cp highlight.js/src/languages/shell.js node_modules/highlight.js/lib/languages/shell.js
並將 shell.js 中的以下部分：
function(hljs)
修改成：
module.exports = function(hljs)
評論
因爲後來多說的關站，就再也找不到合適的第三方評論服務了。換來換去，最後仍是以爲只有 Disqus 合適，可是須要先解決被牆的問題，不過 fooleap 已經提供了一個較好的解決方案—— disqus-php-api。你只須要 pull 代碼到境外服務器，部署一個 PHP 服務便可。
我部署後域名爲 disqus..com。首先在layout/_partial/article.ejs文件中追加如下內容：
<% if (!index && post.comments){ %>
<% if (theme.disqus || theme.disqus.shortname){ %>
<%- partial('post/disqus', {
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
<% } %>
而後，在layout/_partial/post目錄下建立disqus.ejs文件，內容以下：
<div id="disqus_thread"></div>
<link rel="stylesheet" href="/disqus.css">
<script src="/disqus.js"></script>
<script>
(function () {
var disqus = new iDisqus('disqus_thread', {
forum: '<%= theme.disqus.shortname %>',
site: '<%= config.url %>',
api: '<%= theme.disqus.api %>',
url: '<%= url %>',
mode: 2,
timeout: 3000,
init: true,
autoCreate: true,
relatedType: false
});
disqus.count();
})();
</script>
最後，在_config.yml增長以下配置：
disqus: shortname: '' api: '//disqus..com'
有關 Disqus 更詳細的配置，見 Disqus 設置 部分。
百度統計
首先，在layout/_partial/after-footer.ejs文件中追加以下代碼：
<%- partial('baidu-analytics') %>
並在layout/_partial目錄下建立baidu-analytics.ejs文件，內容爲：
<% if (theme.baidu_analytics){ %>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<% } %>
而後，在配置文件_config.yml中，增長以下配置信息：
# 百度分析Uid，若爲空則不啓用 baidu_analytics: 9f0ecfa73797e6a907d8ea6a285df6a5
百度主動推送
爲了更好的收錄本站文章，這裏引進了百度 主動推送功能，只需添加以下 JS代碼，每當文章被瀏覽時都會自動向百度提交連接，這種方式以用戶爲驅動，較爲方便和實用。
在主題模板文件layout/_partial/article.ejs中，追加如下代碼：
<% if (!index){ %>
<script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js'
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s)
})();
</script>
<% } %>
到這裏，也終於算是搭建結束了。至於 404 頁面打算採用 騰訊的公益404頁面 來作，見這裏。
更新 »
- 主題更換爲 hexo-theme-yilia（2017-10-30）
- 自定義分享（2017-11-28）
- 去除百度統計（2018-07-04）
- 科學使用 Disqus（2018-07-04）
- 更好地支持 Shell 代碼高亮（2018-09-09）
相關文章 »
- 個人博客發佈上線方案 — Hexo（2018-03-03）
- 1. 搭建Hexo博客系統
- 2. 搭建hexo博客系統
- 3. T8開源博客系統
- 4. 用Django構建博客（二）：開啓博客系統之旅
- 5. 推薦一款PHP開源博客系統：TQBlog開源博客系統
- 6. 更換博客系統——從jekyll到hexo
- 7. 【博客系統】Hexo的目錄結構
- 8. 在Linux系統中搭建hexo博客
- 9. Hexo博客開發之——博客加密
- 10. Hexo博客開發之——博客升級
- 更多相關文章...
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • 系統定義的TypeHandler - MyBatis教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 搭建Hexo博客系統
- 2. 搭建hexo博客系統
- 3. T8開源博客系統
- 4. 用Django構建博客（二）：開啓博客系統之旅
- 5. 推薦一款PHP開源博客系統：TQBlog開源博客系統
- 6. 更換博客系統——從jekyll到hexo
- 7. 【博客系統】Hexo的目錄結構
- 8. 在Linux系統中搭建hexo博客
- 9. Hexo博客開發之——博客加密
- 10. Hexo博客開發之——博客升級