基於Hexo的matery主題搭建博客並優化

本文來自悟塵紀，獲取更新內容可查看原文： https://www.lixl.cn/2019/092856736.html

對於有一定技術背景的同學，自己動手搭建博客網站是一個很不錯的選擇。選擇喜歡的主題，按需進行個性化配置，隨時在本地用自己喜歡的工具寫文章，一鍵發佈到多個博客託管平臺，使用自己喜歡的圖牀/CDN來加速…

演示站點（悟塵記）基於 Hexo 的 hexo-theme-matery 主題構建，部署在騰訊雲COS中並使用CDN進行內容加速，通過 PicGo + 阿里雲OSS 作爲圖牀進行靜態資源加速。

安裝hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

前提

安裝 Hexo 相當簡單，只需要先安裝下列應用程序即可：

Node.js (Node.js 版本需不低於 8.10，建議使用 Node.js 10.0 及以上版本)
Git

安裝

所有必備的應用程序安裝完成後，即可使用 npm 安裝 Hexo。

$ npm install -g hexo-cli

安裝以後，可以使用以下兩種方式執行 Hexo：

npx hexo
將 Hexo 所在的目錄下的 node_modules 添加到環境變量之中即可直接使用 hexo：
```
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
```

建站

安裝 Hexo 完成後，請執行下列命令，Hexo 將會在指定文件夾中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成後，指定文件夾的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

啓動

此時，通過 hexo s 命令即可在本地啓動您的博客站點了。

~ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

接下來將安裝主題，配置博客託管平臺，實現一鍵發佈並刷新CDN緩存。

配置主題

下載主題

hexo-theme-matery 是一個採用 Material Design 和響應式設計的 Hexo 博客主題，點擊這裏可以查看示例效果。點擊這裏下載 master 分支的最新穩定版的代碼，解壓縮後，將 hexo-theme-matery 的文件夾複製到 Hexo 的 themes 文件夾中即可。

切換主題

修改 Hexo 根目錄下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

`_config.yml` 文件的其它修改建議:

請修改 _config.yml 的 url 的值爲你的網站主 URL（如：http://xxx.github.io）。
建議修改兩個 per_page 的分頁條數值爲 6 的倍數，如：12、18 等，這樣文章列表在各個屏幕下都能較好的顯示。
如果是中文用戶，則建議修改 language 的值爲 zh-CN。

新建分類 categories 頁

categories 頁是用來展示所有分類的頁面，如果 source 目錄下還沒有 categories/index.md 文件，那麼就需要新建一個，命令如下：

hexo new page "categories"

編輯你剛剛新建的頁面文件 /source/categories/index.md，至少需要以下內容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建標籤 tags 頁

tags 頁是用來展示所有標籤的頁面，如果 source 目錄下還沒有 tags/index.md 文件，那麼就需要新建一個，命令如下：

hexo new page "tags"

編輯剛剛新建的頁面文件 /source/tags/index.md，至少需要以下內容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建關於我 about 頁

about 頁是用來展示關於我和我的博客信息的頁面，如果 source 目錄下還沒有 about/index.md 文件，那麼就需要新建一個，命令如下：

hexo new page "about"

編輯剛剛新建的頁面文件 /source/about/index.md，至少需要以下內容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建友情連接 friends 頁（可選的）

friends 頁是用來展示友情連接信息的頁面，如果 source 目錄下還沒有 friends/index.md 文件，那麼就需要新建一個，命令如下：

hexo new page "friends"

編輯剛剛新建的頁面文件 /source/friends/index.md，至少需要以下內容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同時，在 source 目錄下新建 _data 目錄，在 _data 目錄中新建 friends.json 文件，文件內容如下所示：

[{
    "avatar": "https://www.lixl.cn/medias/avatar.jpg",
    "name": "悟塵記",
    "introduction": "人生就是一場修行，上善若水，厚德載物。",
    "url": "https://www.lixl.cn/",
    "title": "前去參觀"
}, {
	"avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
	"name": "Fabric",
	"introduction": "A Blockchain Platform for the Enterprise",
	"url": "https://hyperledger-fabric.readthedocs.io/en/master/",
	"title": "前去學習"
}, {
	"avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
	"name": "BootCDN",
	"introduction": "穩定、快速、免費的前端開源項目 CDN 加速服務。",
	"url": "https://www.bootcdn.cn/",
	"title": "前去加速"
}]

代碼高亮

由於 Hexo 自帶的代碼高亮主題顯示不好看，所以主題中使用到了 hexo-prism-plugin 的 Hexo 插件來做代碼高亮，安裝命令如下：

npm i -S hexo-prism-plugin

然後，修改 Hexo 根目錄下 _config.yml 文件中 highlight.enable 的值爲 false，並新增 prism 插件相關的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

搜索

本主題中還使用到了 hexo-generator-search 的 Hexo 插件來做內容搜索，安裝命令如下：

npm install hexo-generator-search --save

在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：

search:
  path: search.xml
  field: post

修改頁腳

頁腳信息可能需要做定製化修改，而且它不便於做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主題文件的 /layout/_partial/footer.ejs 文件中，包括站點、使用的主題、訪問量等。

修改社交鏈接

在主題的 _config.yml 文件中，默認支持 QQ、GitHub 和郵箱的配置，可以在主題文件的 /layout/_partial/social-link.ejs 文件中，新增、修改需要的社交鏈接地址，增加鏈接可參考如下代碼：

<a href="https://github.com/blinkfox" class="tooltipped" target="_blank" data-tooltip="訪問我的GitHub" data-position="top" data-delay="50">
    <i class="fa fa-github"></i>
</a>

其中，社交圖標（如：fa-github）可以在 Font Awesome 中搜索找到。以下是常用社交圖標的標識，供參考：

Facebook: fa-facebook
Twitter: fa-twitter
Google-plus: fa-google-plus
Linkedin: fa-linkedin
Tumblr: fa-tumblr
Medium: fa-medium
Slack: fa-slack
新浪微博: fa-weibo
微信: fa-wechat
QQ: fa-qq

修改打賞的二維碼圖片

在主題文件的 source/medias/reward 文件中，可以替換成你的的微信和支付寶的打賞二維碼圖片。

一鍵部署

通過 hexo-deployer-git 插件可以實現一鍵將博客同時部署到多個git倉庫中。如同時發佈到github及gitee提供的pages服務。安裝：

npm install hexo-deployer-git --save

修改 Hexo 根目錄下的 _config.yml 文件中的如下內容:

## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: git
    repo: https://gitee.com/lxl80/lxl80.git
    branch: master
    ignore_hidden: false

也可以如本站一樣，採用 hexo-deployer-cos-enhanced 插件將靜態內容部署到騰訊雲對象存儲服務中，在DNS配置中將境內線路解析到騰訊雲CDN地址，實現加速。部署完成後會自動刷新被更新文件的CDN緩存。

安裝：

npm install hexo-deployer-cos-enhanced --save

_config.yml 配置如下:

deploy:
  - type: git
    repo: https://github.com/lxl80/blog.git
    branch: gh-pages
    ignore_hidden: false
  - type: cos
    bucket: lxl80-130****
    region: ap-beijing
    secretId: AKIDh9****F8FvL
    secretKey: Z3IGiur****QZR3PgjXmlVg
    cdnConfig:
      enable: true
      cdnUrl: https://static.lixl.cn
      bucket: static-130****
      region: ap-beijing
      folder: static
      secretId: AKIDh9****F8FvL
      secretKey: Z3IGiur****QZR3PgjXmlVg

然後通過 hexo g -d 即可實現一鍵發佈，並更新CDN緩存。

文章鏈接轉靜態短地址（建議安裝）

如果文章名稱是中文的，那麼 Hexo 默認生成的永久鏈接也會有中文，這樣不利於 SEO，且 gitment 評論對中文鏈接也不支持。我們可以用 hexo-permalink-pinyin Hexo 插件生成文章時生成中文拼音的永久鏈接，或者用hexo-abbrlink 生成靜態文章鏈接。以下結合hexo-abbrlink生成類似 /yyyy/mmdd+隨機數.html 的文章鏈接地址。

安裝命令如下：

npm install hexo-abbrlink --save

在 Hexo 根目錄下的 _config.yml 文件中，修改 permalink: ，並在文件末尾新增 abbrlink:配置項：

permalink: :year/:month:day:abbrlink.html

abbrlink: 
  alg: crc16 #算法選項：crc16丨crc32
  rep: dec #輸出進制：dec爲十進制，hex爲十六進制

CND加速（建議啓用）

放在Github的資源在國內加載速度比較慢，因此需要使用CDN加速來優化網站打開速度，jsDelivr + Github便是免費且好用的CDN，非常適合博客網站使用。也可以選擇主流雲服務商提供的對象存儲+CDN來獲得更快速及穩定的訪問效果，費用低到幾乎可忽略。

用法：

https://cdn.jsdelivr.net/gh/你的用戶名/你的倉庫名@發佈的版本號/文件路徑

例如：

https://cdn.jsdelivr.net/gh/lxl80/blog@gh-pages/medias/banner/1.jpg

注意：版本號不是必需的，是爲了區分新舊資源，如果不使用版本號，將會直接引用最新資源。

還可以配合 PicGo圖牀上傳工具的自定義域名前綴來上傳圖片，使用極其方便。具體使用方法可參見我的另一篇文章: 使用Typora+iPic/PicGo圖牀+CDN實現高效Markdown創作

文章字數統計插件（可選的）

如果你想要在文章中顯示文章字數、閱讀時長信息，可以安裝 hexo-wordcount插件。

安裝命令如下：

npm i --save hexo-wordcount

然後只需在本主題下的 _config.yml 文件中，激活以下配置項即可：

wordCount:
  enable: false # 將這個值設置爲 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

添加 RSS 訂閱支持（可選的）

本主題中還使用到了 hexo-generator-feed 的 Hexo 插件來做 RSS，安裝命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

執行 hexo clean && hexo g 重新生成博客文件，然後在 public 文件夾中即可看到 atom.xml 文件，說明已經安裝成功了。

自定製修改

在本主題的 _config.yml 中可以修改部分自定義信息，有以下幾個部分：

菜單
我的夢想
首頁的音樂播放器和視頻播放器配置
是否顯示推薦文章名稱和按鈕配置
favicon 和 Logo
個人信息
TOC 目錄
文章打賞信息
複製文章內容時追加版權信息
MathJax
文章字數統計、閱讀時長
點擊頁面的’愛心’效果
我的項目
我的技能
我的相冊
Gitalk、Gitment、Valine 和 disqus 評論配置
不蒜子統計和谷歌分析（Google Analytics）
默認特色圖的集合。當文章沒有設置特色圖時，本主題會根據文章標題的 hashcode 值取餘，來選擇展示對應的特色圖

如果本主題中的諸多功能和主題色彩你不滿意，可以在主題中自定義修改，很多更自由的功能和細節點的修改難以在主題的 _config.yml 中完成，需要修改源代碼纔來完成。以下列出了可能有用的地方：

修改主題顏色

在主題文件的 /source/css/matery.css 文件中，搜索 .bg-color 來修改背景顏色：

/* 整體背景顏色，包括導航、移動端的導航、頁尾、標籤頁等的背景顏色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 動態切換背景顏色. */
}

@keyframes rainbow {
    /* 動態切換背景顏色. */
}

修改 banner 圖和文章特色圖

可以直接在 /source/medias/banner 文件夾中更換喜歡的 banner 圖片，主題代碼中是每天動態切換一張，只需 7 張即可。如果會 JavaScript 代碼，可以修改成自己喜歡切換邏輯，如：隨機切換等，banner 切換的代碼位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代碼中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夾中默認有 24 張特色圖片，你可以再增加或者減少，並需要在 _config.yml 做同步修改。

文章 Front-matter 介紹

Front-matter 選項詳解

Front-matter 選項中的所有內容均爲非必填的。但仍然建議至少填寫 title 和 date 的值。

配置選項	默認值	描述
title	`Markdown` 的文件標題	文章標題，強烈建議填寫此選項
date	文件創建時的日期時間	發佈時間，強烈建議填寫此選項，且最好保證全局唯一
author	根 `_config.yml` 中的 `author`	文章作者
img	`featureImages` 中的某個值	文章特徵圖
top	`true`	推薦文章（文章是否置頂），如果 `top` 值爲 `true`，則會作爲首頁推薦文章
cover	`false`	表示該文章是否需要加入到首頁輪播封面中
coverImg	無	表示該文章在首頁輪播封面需要顯示的圖片路徑，如果沒有，則默認使用文章的特色圖片
password	無	文章閱讀密碼，如果要對文章設置閱讀驗證密碼的話，就可以設置 `password` 的值，該值必須是用 `SHA256` 加密後的密碼，防止被他人識破。前提是在主題的 `config.yml` 中激活了 `verifyPassword` 選項
toc	`true`	是否開啓 TOC，可以針對某篇文章單獨關閉 TOC 的功能。前提是在主題的 `config.yml` 中激活了 `toc` 選項
mathjax	`false`	是否開啓數學公式支持，本文章是否開啓 `mathjax`，且需要在主題的 `_config.yml` 文件中也需要開啓纔行
summary	無	文章摘要，自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內容作爲摘要
categories	無	文章分類，本主題的分類表示宏觀上大的分類，只建議一篇文章一個分類
tags	無	文章標籤，一篇文章可以多個標籤

注意:

如果 img 屬性不填寫的話，文章特色圖會根據文章標題的 hashcode 的值取餘，然後選取主題中對應的特色圖片，從而達到讓所有文章都的特色圖各有特色。

date 的值儘量保證每篇文章是唯一的，因爲本主題中 Gitalk 和 Gitment 識別 id 是通過 date 的值來作爲唯一標識的。

如果要對文章設置閱讀驗證密碼的功能，不僅要在 Front-matter 中設置採用了 SHA256 加密的 password 的值，還需要在主題的 _config.yml 中激活了配置。有些在線的 SHA256 加密的地址，可供使用：開源中國在線工具、chahuo、站長工具。

以下爲文章的 Front-matter 示例。

最簡示例

---
title: 基於Hexo的hexo-theme-matery主題搭建博客並優化
date: 2019-10-03 14:25:00
---

最全示例

---
title: 基於Hexo的hexo-theme-matery主題搭建博客並優化
date: 2019-10-03 14:25:00
author: 悟塵
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 這是你自定義的文章摘要內容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內容作爲摘要
categories: 工具
tags:
  - blog
  - hexo
---

SEO優化

搜索引擎優化，又稱爲SEO，即Search Engine Optimization，它是一種通過分析搜索引擎的排名規律，瞭解各種搜索引擎怎樣進行搜索、怎樣抓取互聯網頁面、怎樣確定特定關鍵詞的搜索結果排名的技術。Google自動收錄效果還不錯，百度就差得遠了（GitHub不允許百度的Spider爬取GitHub上的內容）。

百度優化

登錄百度搜索資源平臺，登錄成功之後在用戶中心 --> 站點管理頁面中點擊添加網站，按提示操作。

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMubGl4bC5jbi8yMDIwLzIwMjAwMTI5MjEzMzAyLnBuZy93MTI4MA?x-oss-process=image/format,png =50)

提示：由於百度的spider是爬取不到GitHub的內容的，所以在第三步驗證網站的時候，建議選擇CNAME驗證的方式。

經過以上步驟，百度已經知道有我們網站的存在了，但是百度還不知道我們的網站上有什麼內容，所以要向百度推送我們的內容。hexo-theme-matery主題已經內置了 自動推送 的方式，檢查 themes/hexo-theme-matery/_config.yml 文件中如下配置:

# 百度搜索資源平臺提交鏈接
baiduPush: true

自動推送的JS代碼部署在站點的每一個頁面源代碼中，當頁面在每次被瀏覽時，鏈接就會被自動推送給百度。

谷歌優化

登錄 Google Search Console，點擊添加資源，輸入自己的域名，按提示操作。

提示：需要進行DNS驗證，進入DNS域名解析設置頁面，按提示增加TXT記錄，如下圖:

驗證成功後，需要提交站點地圖。通過安裝sitemap插件生成站點地圖文件:

npm install hexo-generator-sitemap --save 
npm install hexo-generator-baidu-sitemap --save  #百度專用，可選

安裝後直接執行 hexo cl&&hexo g -d 命令，就會在網站根目錄生成 sitemap.xml 文件。參照下圖提交，等待收錄。

注意：hexo配置文件中的url一定要輸入正確的域名，插件是根據url生成站點地圖的。

常用命令

指令說明

hexo server #啓動本地服務器，用於預覽主題。Hexo 會監視文件變動並自動更新，除修改站點配置文件外,無須重啓服務器,直接刷新網頁即可生效。

hexo server -s #以靜態模式啓動

hexo server -p 5000 #更改訪問端口 (默認端口爲4000，'ctrl + c’關閉server)

hexo server -i IP地址 #自定義 IP

hexo clean #清除緩存 ,網頁正常情況下可以忽略此條命令,執行該指令後,會刪掉站點根目錄下的public文件夾

hexo g #生成靜態網頁 (執行 $ hexo g後會在站點根目錄下生成public文件夾, hexo會將"/blog/source/" 下面的.md後綴的文件編譯爲.html後綴的文件,存放在"/blog/public/ " 路徑下)

hexo d #自動生成網站靜態文件，並將本地數據部署到設定的倉庫(如github)

hexo init 文件夾名稱 #初始化XX文件夾名稱

npm update hexo -g#升級

npm install hexo -g #安裝

node-v #查看node.js版本號

npm -v #查看npm版本號

git --version #查看git版本號

hexo -v #查看hexo版本號

簡寫指令

hexo n "我的第一篇文章" 等價於 hexo new "我的第一篇文章" 還等價於 hexo new post "我的第一篇文章"

hexo p 等價於 hexo publish

hexo g 等價於 hexo generate

hexo s等價於 hexo server

hexo d 等價於 hexo deploy

hexo g -d等價於hexo generate --deploy

注: hexo clean 沒有簡寫, git --version 沒有簡寫

常見問題

通過hexo g -d部署時報Error: Spawn failed錯誤:

這是由於git本地記錄的提交版本號與github上不一致導致的，通過git reset --hard commitCode即可解決。

檢查本地最近提交記錄，獲取最後一次提交記錄的更新時間及標識，如280a7fdd46fcfd7d34e652aec15523dcd247fac8
```
cd .deploy_git
cat .git/logs/HEAD	
```
獲取github pages服務所關聯分支的最近一次提交記錄，獲取更新時間及標識。地址一般爲：https://github.com/用戶名/倉庫名/commits/分支名，如https://github.com/lxl80/blog/commits/gh-pages

如果發現提交最新的提交時間/標識不一致，通過以下命令即可解決:

  git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github上最新的提交標識