我的Hexo-Github博客搭建筆記

從零開始搭建個人博客

點擊進入我的博客查看效果

安裝依賴包node.js

Hexo是一款基於Node.js的靜態博客框架， 所謂巧婦難爲無米之炊，要想搭建上層的博客必須先安裝底層的node.js，可以直接上node.js官網下載安裝，該安裝包除了node.js之外還包括node軟件包管理工具npm。

後面我們需要用npm來安裝hexo相關模塊，而在國內首先需要像pip那樣更換鏡像，如下更換爲淘寶鏡像：

npm config set registry https://registry.npm.taobao.org

安裝hexo

使用終端命令安裝hexo客戶端，如下

npm install -g hexo-cli

然後本地新建一個文件夾如blogs，並cd到該路徑，執行初始化

hexo init

考慮到每個人命名方式不同，blogs/這裏我稱爲hexo的根目錄，

利用本地服務器生成網頁

利用PC端生成服務器開啓網頁，比後面部署到github pages上刷新要快，可用於測試

先新建一個題爲test的博客，即

hexo n test

此時會在主目錄source/_posts下生成一個test.md文件，就是我們的第一篇博客test，編輯保存後生成相應網頁文件，如下

hexo g

然後開啓服務器

hexo s

點擊http://localhost:4000就可以看到博客網頁，終端CTRL+C則關閉本地服務器。

部署到Github Pages

本地服務器生成的網頁別人是沒法看到的，因此可以選擇部署到github pages上。

首先Github網頁上新建一個repo，名字嚴格爲用戶民.github.io，比如我的用戶名爲JohnJim0816，則相應的倉庫名爲JohnJim0816.github.io。

然後本地主目錄blogs下，終端運行如下命令安裝hexo-deployer-git。

npm install hexo-deployer-git --save

然後在主目錄的配置文件_config.yml中(這裏稱之爲站點配置文件，後面還有一個同名的主題配置文件)，找到deploy部分，並更改如下，注意repo部分根據個人github用戶名(我的爲JohnJim0816)而定。

deploy:
  type: git
  repo: https://github.com/JohnJim0816/JohnJim0816.github.io
  branch: master

配置完成之後，使用hexo n test新建一個博客。
然後hexo g生成，然後hexo d發佈，也可以hexo g -d將兩步合爲一步。然後需要等待一段時間，就可以在https://johnjim0816.github.io/看到自己的博客了。

安裝next主題來裝點博客

hexo自帶的主題是landscape，對應帶主目錄themes文件夾下，這個主題只能說是平平無奇！！！

因此需要安裝一個靚靚的主題來使我們的博客秀色可餐，這裏推薦github上star較多的next主題。

截止2020年4月10日該主題已經更新到了v7.8.0。注意還有一個iissnan/hexo-theme-next，這個雖然star很多，並且網上的很多教程是跟這個主題關聯的，但是已經不維護了，所以還是推薦前面一個。

可以直接下載整個倉庫並在本地解壓，將名字改爲next，然後放到博客根目錄下的themes文件夾下。

在站點配置文件即blogs/_config.yml中將語言更改爲中文，如下，注意冒號之後有一個空格

language: zh-CN

並且將主題改爲next：

theme: next

保存之後使用hexo g -d可以看到初步效果，不過github pages刷新較慢，因此測試優化博客網頁時建議在本地服務上進行。

後續優化

首先閱讀Hexo官方文檔

官方文檔雖然有時候難啃，但是給出的方法總是最新最不容易走坑的。個人認爲官方文檔中的以下幾點有必要關注一下：

• 配置：即通過對上文所說的博客根目錄下的站點配置文件_config.yml來修改大部分配置，包括網站標題等等，注意每次修改該配置文件後需要hexo clean之後才能通過hexo g生效。
• 寫作：關注scaffolds文件夾下的模版文件，如新文章的模版文件post.md
• Front-matter：即文章開頭的一些變量，常見包括文章名，日期等，可以自己添加categories以及tags方便管理

然後再看next主題官方文檔

next官方文檔將配置分類入門、主題設定、第三方服務、標籤插件和高級設置等幾個大類，每個大類又分爲幾個小類，如下：

入門

包括next主題安裝與基本配置，next的配置文件即主題配置文件在next/_config.yml處。

主題設定

主要包括文字對齊、代碼塊樣式、閱讀進度和字體定製等。
其中還有頁腳與側邊欄的設置，在帖子下還有字數統計選項，也包括如何自定義界面以及SEO。

第三方服務

第三方包括數學公式的支持，評論系統，以及統計與分析，其中評論系統不建議採取官方文檔所推薦的那些，而是使用valine系統，詳情見下文。而統計與分析一個很常見的功能就是統計訪問量，而valine最新版本已經支持基於leancloud的計數了，同樣見下文的valine評論系統。

至於標籤插件和高級設置則看個人喜好了，下面的內容將對官方文檔的說明做一個補充，並且持續更新～～。

給本地文章md文件按年月分類

現在hexo n 文章名會在source/_posts/下創建文件，但是如果文章太多的話放在同一個目錄下不好管理，此時可以更改站點配置文件blogs/_config.yml中的new_post_name，如下

new_post_name: :year/:month/:title.md 

這樣hexo n 文章名之後會在source/_posts/創建比如2020/04/文章名.md文件，即按年月分類。

插入圖片

插入圖片這個搞了我好久，首先強烈建議使用圖牀，常見的可以搜索Github+PigGo。然後文章中直接按如下格式即可。

![fig1](https://raw.githubusercontent.com/JohnJim0816/blog-figures/master/2020/4/10/1.png)

插入本地圖片的方式參考CSDN，注意hexo-asset-image模塊的安裝可能會造成文章目錄中文亂碼的bug，如下：

添加站內搜索

首先安裝

npm install hexo-generator-search --save

然後站點配置文件blogs/_config.yml添加

search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000

主題配置文件themes/next/_config.yml設置

local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1

給網頁文章增加分類和標籤

首先hexo n page categories以及hexo n page tags新建目錄頁和標籤頁，此時本地source文件夾下會生成相應的文件夾，將比如categories中的index.md更改如下：

---
title: 分類
date: 2020-04-10 21:53:23
type: categories
---

關鍵是type這一項，tags也同理，

---
title: 標籤
date: 2020-04-10 21:53:46
type: tags
---

然後在文章開頭的Front-matter部分，寫上相應分類和標籤，如下

---
title: 我的Hexo-Github博客搭建筆記
date: 2020-04-10 21:29:41
categories: 野生技術
tags: 
    - hexo
    - 筆記
---

再到主題配置文件，即themes下的_config.yml文件，找到menu部分，配置如下：

menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive

其中||後面指向圖標的鏈接，如果沒有則圖標默認是問號。

由此可以類推新建一個類似於標籤、分類這樣的菜單欄，可參考這個博客

如何開啓閱讀全文

在文章中加入<!-- more -->即可，參考官方文檔

增加閱讀時間和字數統計

首先安裝hexo-symbols-count-time，

npm i hexo-symbols-count-time --save

如果之前安裝了hexo-wordcount就要卸載掉npm uninstall hexo-wordcount，因爲它只適用於老版本，網頁也有教程是這個，
修改站點配置文件/_config.yml，沒有就添加

symbols_count_time: 
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  awl: 2
  wpm: 300

其中awl（Average Word Length）的數值是設定多少字符統計爲一個字(word)，中文博客需要設置爲 2。wpm（Words Per Minute）是你的閱讀速度，多少字（word）統計爲閱讀時長一分鐘。以下是官方文檔裏的一些閱讀速度參考數據：

• 慢速：200
• 中速：275（默認）
• 快速：350

然後修改主題配置文件next/_config.yml，

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

最後需要hexo clean然後重新生成，否則可能會出現閱讀時間NaN字樣，參考官方

增加valine評論系統

知乎有關於評論系統的討論，目前我暫時使用valine評論系統。

leancloud中進行相關的準備工作

該評論系統依賴於leancloud，所以需要先在leancloud中進行相關的準備工作。

• 登錄 或 註冊 LeanCloud

• 登錄成功後，進入後臺點擊左上角的創建應用：

• 創建好應用，進入應用，左邊欄找到 設置 ，然後點擊 應用Key，此時記錄出現的 App ID 和 App Key，後面配置文件中會用到

• 因爲評論和文章閱讀數統計依賴於存儲，所以還需要建立兩個新的存儲 Class，左邊欄找到並點擊 存儲，點擊 創建Class:
  

• 創建兩個存儲Class，分別命名爲: Counter 和 Comment

• 還需要爲應用添加安全域名，左邊欄點擊 設置，找到 安全中心，點擊後會看到 安全域名 設置框，輸入博客使用的域名(注意下圖去掉最後一個"/")，點擊保存即可：
  

修改主題配置文件next/_config.yml

找到valine部分，

上面幾項內容的含義，這裏簡單說明需要修改的部分，具體還是要看 Valine官網中配置相關的內容：

參數	用途
enable	這是用於主題中配置的，不是官方Valine的參數，true時控制開啓此評論系統
appId	這是在 leancloud 後臺應用中獲取的，也就是上面提到的 App ID
appKey	這是在 leancloud 後臺應用中獲取的，也就是上面提到的 App Key
notify	用於控制是否開啓郵件通知功能，具體參考郵件提醒配置
verify	用於控制是否開啓評論驗證碼功能
avatar	用於配置評論項中用戶頭像樣式，有多種選擇：mm, identicon, monsterid, wavatar, retro, hide。詳細參考：頭像配置
placehoder	評論框的提示符
visitor	控制是否開啓文章閱讀數的統計功能i, 詳情閱讀文章閱讀數統計

開啓閱讀次數即將visitor值改爲true之後可能會出現首頁閱讀次數爲0而文章頁面閱讀次數的bug，經驗表明遇到這種情況不用管它不用管它不用管它，過陣子會好的。

完善評論通知

Valine 評論郵件提醒功能不太健全，通知郵件中沒有文章直達鏈接，Valine 官網中提供了評論系統第三方功能擴展Valine鏈接，按照鏈接中的說明，非常詳細的步驟，一步步很容易實現完備的評論系統後臺管理以及郵件提醒功能，部分高級配置點我瞭解。

刪除評論

直接在leancloud後臺的存儲中找到之前創建的Comment這個class找到對應評論刪除即可。

參考鏈接

Hexo官方文檔

知乎 - GitHub+Hexo 搭建個人網站詳細教程

b站 - 手把手教你從0開始搭建自己的個人博客