引言

人腦有限，對于同一個問題，也許當(dāng)時花了許久時間解決了，然而過了一段時間，只留下一個印象，當(dāng)再次需要解決時，還是需要較長時間來尋找以前的資料。因此，在這里建立個人博客，一是為了整理記錄，讓自己省心；二是知識的分享，如果這里的信息恰好能夠幫助你，我同樣也會感到非常開心。

其實在一年前我就嘗試過使用 Hexo 和 Github Page 來搭建個人博客，但是當(dāng)時主要是覺得很炫，并沒有耐心把知識記錄下來，因此，僅僅是搭了個框架，全站僅有一篇 Hello World 。近來重新?lián)炱鸬臅r候，幾乎所有的資料還是得重新尋找，按照好幾篇教程來搭建這篇博客，因此才有了前面的感慨。在這里，我將會把自己的折騰過程記錄下來，并且將會隨著自己博客設(shè)置的改變而不斷更新...

環(huán)境部署

首先，我的環(huán)境為：node: V11.2.0; npm: V6.4.1 git: V2.18.0; hexo: V3.8.0

安裝 Node.js

下載最新版 Node.js .

安裝選項默認即可。

安裝好之后，摁 Win+R 打開命令提示符，輸入 node -v 和 npm -v ，如果出現(xiàn)版本號，那么就安裝好了。

安裝 Git

為了把本地的網(wǎng)頁文件上傳至網(wǎng)上(github, coding 等)托管，我們需要用到分布式版本控制工具—— Git .

安裝選項還是默認，注意最后一步添加路徑時選擇 Use Git from the Windows Command Prompt ，這樣我們可以直接在命令提示符里打開 git 了。

安裝完成后在命令提示符中輸入 git --version 驗證是否安裝成功。

注冊 Github 賬號

打開 https://github.com ，新建一個項目，輸入自己的項目名字，后面一定要加 .github.io 后綴，最好是你的 Github 賬號名(唯一)+.github.io ，如下圖所示。

github

由于我已經(jīng)用自己的名字注冊過了，所以這里顯示不可用。之后就可以通過 https://yourname.github.io 訪問你建好的網(wǎng)站了。

注冊 Coding 賬號

由于 github 的訪問速度較慢，因此我將文件代碼同時部署至 coding 上，打開 騰訊云開發(fā)者平臺 ，新建一個項目，項目名稱可同樣設(shè)為 yourname ，如下圖所示。

coding

之后第一次上傳代碼后，在代碼下拉菜單中有個 Pages 服務(wù) ，開啟 靜態(tài) Pages 應(yīng)用 ，即可通過 https://yourname.coding.me 訪問你的網(wǎng)站內(nèi)容。

pages

安裝 Hexo

在合適的地方新建一個文件夾，用來存放自己的博客文件，如 blog ，然后進入 blog 文件夾右擊 Git Bash Here ，打開 git 的控制臺窗口，之后我們所有的操作都在 git 控制臺中進行。

執(zhí)行如何命令安裝 Hexo：

sudo npm install -g hexo

安裝完后輸入 hexo -v 驗證是否安裝成功。

然后初始化我們的網(wǎng)站，執(zhí)行 init 命令初始化 hexo，命令：

hexo init

至此，主要安裝工作已經(jīng)完成！ blog 就是你的博客根目錄，所有操作都在里面進行。

生成靜態(tài)頁面命令：

hexo generate
# 或者 hexo g

啟動本地服務(wù)，進行文章預(yù)覽調(diào)試，本地啟動命令：

hexo server
# 或者 hexo s

然后在瀏覽器打開 http://localhost:4000/ ，就可以看到我們的原始博客了，摁 ctrl+c 可以關(guān)閉本地服務(wù)器。

連接 Github、Coding 與本地

首先，安裝 hexo-deployer-git 插件，右鍵打開 git bash，然后輸入下面命令：

npm install hexo-deployer-git --save

接著，添加 SSH key ，命令如下：

git config --global user.name "<your_name>"
git config --global user.email "<your_email>"
ssh-keygen -t rsa -C "<your_email>"

其中 <youe_name> 和 <your_email> 根據(jù)你注冊 github 的信息自行更改。

然后，打開 github ，在 settings 中點擊 SSH and GPG keys ，新建一個 SSH，名字隨意，比如 blog。復(fù)制密鑰文件內(nèi)容(路徑形如C:\Users\Administrator\.ssh\id_rsa.pub)，粘貼至新建的 SSH 中。

測試是否添加成功，在命令行依次輸入以下命令，返回 “You’ve successfully authenticated” 即成功。

ssh -T git@github.com
yes

同理，打開 騰訊開發(fā)者平臺 ，在 setting 中點擊 SSH 公鑰 ，新建一個 SSH，將之前的密鑰內(nèi)容添加進去。測試命令為：

ssh -T git@git.coding.net
yes

最后，修改 _config.yml (在站點目錄下)。在文件末尾修改為：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repo: git@github.com:<Github賬號名稱>/<Github賬號名稱>.github.io.git
  branch: master
- type: git
  repo: git@git.dev.tencent.com:<Coding賬號名稱>/<Coding賬號名稱>.git
  branch: master

至此，環(huán)境部署已經(jīng)完成。

寫文章、發(fā)布文章

在博客根目錄下右鍵打開 git，輸入以下命令，新建一篇文章：

hexo new post "article_title"
# 或者 hexo n "article_title"

然后在 ..\blog\source\_posts 目錄中會發(fā)現(xiàn)你的文章文件，編寫完 Markdown 文件后，輸入 hexo g 生成靜態(tài)網(wǎng)頁，輸入 hexo s 進行本地預(yù)覽效果，最后部署至 github、coding 上，命令如下：

hexo deploy
# 或者 hexo d

過一會打開你的 https://yourname.github.io 或 https://yourname.coding.me 就能看到你發(fā)布的文章了。

常用命令

hexo n "postName" # 新建文章，文章路徑為 source/_posts
hexo new draft "draftName"  # 新建草稿，不會發(fā)布至你的網(wǎng)站，文章路徑為 source/_drafts
hexo new page "pageName"  # 新建頁面，文章路徑為 source
hexo publish draft "draftName"  # 將草稿進行發(fā)布
hexo clean  # 清除緩存，建議每次部署時先執(zhí)行該命令，再生成靜態(tài)頁面
hexo g  # 生成靜態(tài)頁面至 public 目錄
hexo s  # 開啟預(yù)覽訪問端口(默認端口 4000，‘ctrl+c’ 關(guān)閉 server)
hexo d  # 將文件進行部署
hexo help # 查看幫助

綁定域名

還沒有進行該步驟。

計劃為：購買域名后，將國內(nèi)流量解析至 https://kivenckl.coding.me ，而境外流量解析至 https://kivenckl.github.io 。

修改主題

選擇自己喜歡的主題，詳見： https://github.com/search?q=hexo-theme

應(yīng)用主題：

• 下載主題
• 將下載好的主題文件夾，粘貼到站點目錄的 themes 下
• 更改站點配置文件 _config.yml 的 theme 字段，為主題文件夾的名稱

例如，我選擇的主題為 NexT ：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

個性化設(shè)置

添加標(biāo)簽頁面

生成 分類 頁并添加 type 屬性，進入博客所在文件夾，打開命令行，執(zhí)行命令：

hexo new page categories

成功之后，找到 /source/categories/index.md 文件，打開添加 type: “categories” ：

---
title: categories
date: 2018-12-02 10:56:16
type: "categories"
comments: false
---

注：comments: false 可選

同理，生成 標(biāo)簽 頁并添加 type 屬性。

hexo new page tags

成功之后，找到 /source/tags/index.md 文件，打開添加 type: “tags” ：

---
title: tags
date: 2018-12-02 10:55:56
type: "tags"
comments: false
---

注：comments: false 可選

之后，就可以給文章添加分類和標(biāo)簽屬性了。例如：

---
title: Markdown 中 LaTeX 數(shù)學(xué)公式命令
mathjax: true
abbrlink: 9a79e44d
date: 2018-11-27 13:46:17
categories: 筆記
tags:
    - Markdown
    - LaTeX
comments: true
---

點擊首頁的 標(biāo)簽 或者是 分類 就可以看到對應(yīng)標(biāo)簽下或分類下的所有文章。

設(shè)置文章模板

每次新建文章都會調(diào)用文章模板，其位于 scaffolds/post.md 文件，因此，我們可以對其進行必要的修改，提供便利。例如，我的修改如下：

---
title: {{ title }}
date: {{ date }}
categories:
tags:
comments: true
mathjax: true
---

其中 comments 用于控制是否開啟評論，mathjax 用于控制是否公式的加載，對于不需要渲染公式的文章，關(guān)閉 mathjax 可提高頁面的加載速度。

SEO優(yōu)化

何為 SEO

搜索引擎優(yōu)化（英語：search engine optimization，縮寫為 SEO），是一種通過了解搜索引擎的運作規(guī)則來調(diào)整網(wǎng)站，以及提高目的網(wǎng)站在有關(guān)搜索引擎內(nèi)排名的方式。由于不少研究發(fā)現(xiàn)，搜索引擎的用戶往往只會留意搜索結(jié)果最前面的幾個條目，所以不少網(wǎng)站都希望通過各種形式來影響搜索引擎的排序，讓自己的網(wǎng)站可以有優(yōu)秀的搜索排名。當(dāng)中尤以各種依靠廣告維生的網(wǎng)站為甚。
所謂 “針對搜索引擎作最優(yōu)化的處理”，是指為了要讓網(wǎng)站更容易被搜索引擎接受。搜索引擎會將網(wǎng)站彼此間的內(nèi)容做一些相關(guān)性的數(shù)據(jù)比對，然后再由瀏覽器將這些內(nèi)容以最快速且接近最完整的方式，呈現(xiàn)給搜索者。搜索引擎優(yōu)化就是通過搜索引擎的規(guī)則進行優(yōu)化，為用戶打造更好的用戶體驗，最終的目的就是做好用戶體驗。
對于任何一個網(wǎng)站來說，要想在網(wǎng)站推廣中獲取成功，搜索引擎優(yōu)化都是至為關(guān)鍵的一項任務(wù)。同時，隨著搜索引擎不斷變換它們的搜索排名算法規(guī)則，每次算法上的改變都會讓一些排名很好的網(wǎng)站在一夜之間名落孫山，而失去排名的直接后果就是失去了網(wǎng)站固有的可觀訪問流量。所以每次搜索引擎算演法的改變都會在網(wǎng)站之中引起不小的騷動和焦慮。可以說，搜索引擎優(yōu)化是一個愈來愈復(fù)雜的任務(wù)?！?a target="_blank">維基百科

給站點添加 sitemap

首先需要安裝兩個插件來生成 sitemap 文件，前一個是傳統(tǒng)的 sitemap，后一個是百度的 sitemap。

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

然后需要修改站點配置文件 _config.yml ，配置 sitemap 插件。

Plugins: # 在該區(qū)域添加兩個插件名稱
  - hexo-generator-sitemap
  - hexo-generator-baidu-sitemap

# Sitemap
sitemap:
  path: sitemap.xml

# baidusitemap
baidusitemap:
  path: baidusitemap.xml

安裝完成后執(zhí)行 hexo g 即會在站點 public 目錄下生成 sitemap.xml 和 baidusitemap.xml 。

添加 robots.txt

在站點 source 文件夾下新建 robots.txt 文件，文件內(nèi)容如下：

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories
Allow: /tags/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://kivenckl.github.io/sitemap.xml
Sitemap: https://kivenckl.github.io/baidusitemap.xml
Sitemap: http://kivenckl.coding.me/sitemap.xml
Sitemap: http://kivenckl.coding.me/baidusitemap.xml

Allow 字段的值即為允許搜索引擎爬取的內(nèi)容，可以對應(yīng)到主題配置文件中的 menu 目錄配置，如果菜單欄還有其他選項都可以按照格式自行添加。

需要將下方的域名改成自己的域名。

將網(wǎng)站鏈接提交至 Google

打開 Google Search Console ，添加博客地址。這里，我將 https://kivenckl.github.io 和 https://kivenckl.coding.me 兩個域名都提交至 Google。

對于 NexT 主題而言，站點驗證較為簡單，選擇 HTML 標(biāo)記 的方法進行站點驗證，打開主題配置文件 _config.yml ，找到 google_site_verification 字段，將標(biāo)記代碼中 content 部分代入，重新生成即可驗證成功，對于 Baidu、Bing 驗證同理。

然后提交 robots.txt 以及站點地圖 sitemap.xml 、baidusitemap.xml ，驗證無誤即可。

之后就可以 google 搜索一下你的關(guān)鍵詞和博客 title 測試一下了。

將網(wǎng)站鏈接提交至 Baidu 同理，由于百度不收錄 https://kivenckl.github.io ，因此，我只將 https://kivenckl.coding.me 提交至百度。

最后，記得修改主題配置文件 _config.yml 中 baidu_push 字段，用于 Baidu 主動推送鏈接。

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

修改文章鏈接

Hexo 默認的文章鏈接形式為 domain/year/month/day/postname ，當(dāng)我們把文章源文件名改掉之后，鏈接也會改變，很不友好，并且四級目錄，不利于 SEO。

因此，使用 hexo-abbrlink 插件，生成文章的永久鏈接，后期無論怎么修改也不會改變該鏈接。

npm install hexo-abbrlink --save

在站點配置文件 _config.yml 中修改：

permalink: post/:abbrlink.html
abbrlink:
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex   # 進制：dec(default) and hex

可選擇模式有：

• crc16 & hex
• crc16 & dec
• crc32 & hex
• crc32 & dec

尋找圖床

當(dāng)向文章中添加圖片時，如果圖片來源于網(wǎng)絡(luò)，那么還比較好辦，直接引用那個鏈接即可，不過也有問題，那就是如果那個鏈接掛了那么你的圖片也就無法顯示。另外如果你的圖片來源于本地，那么更麻煩了。一種做法是使用第三方服務(wù)器，比如七牛，當(dāng)需要插入圖片時，先把圖片上傳到七牛的服務(wù)器然后再使用，我覺得很麻煩。這里選擇另外一種方法。

首先修改 _config.yml (在站點目錄下) 中 post_asset_folder 字段：

# post_asset_folder: false
post_asset_folder: true

當(dāng)設(shè)置該字段為 true 時，在建立文件時，Hexo 會自動建立一個與文章同名的文件夾，你就可以把與該文章相關(guān)的所有資源都放到那個文件夾，這么一來，你就可以很方便的使用資源。例如，文章 post 需要插入圖片 test.png 時，就可以使用 [圖片上傳失敗...(image-f1566c-1588674696166)] 。

問題是這樣在本地顯示沒有問題，但是發(fā)布之后就無法顯示，使用 hexo-asset-image 插件來解決。

在博客根目錄右擊打開 git bash ，執(zhí)行以下命令：

npm install https://github.com/CodeFalling/hexo-asset-image --save

重新生成之后就可以在你自己的網(wǎng)頁上正常顯示了。

對于因為 SEO 優(yōu)化，使用 abbrlink 插件修改過文章鏈接的朋友而言，這種方法還需要進一步修改一下。由于原來的 permalink: :year/:month/:day/:title/ 變成了 permalink: post/:abbrlink.html 。打開博客根目錄下 node_modules\hexo-asset-image\index.js ，增加一行命令，如下所示：

  var config = hexo.config;
  if(config.post_asset_folder){
    var link = data.permalink;
    link = link.replace('.html', '/');  //新增加，針對修改后的 permalink
  var beginPos = getPosition(link, '/', 3) + 1;

之后就可以正常顯示了，僅供參考。對于修改成其他鏈接形式的朋友也有一定的參考意義。

公式支持

首先 Hexo 的自帶的 Markdown 引擎并不支持 公式，但是 MathJax 支持，因此首先要啟用 MathJax 才能渲染 公式。如果你已經(jīng)安裝了 NexT 主題，開啟 MathJax 支持非常容易，在最新版的 NexT 主題的 _config.yml 文件里，找到 MathJax 相關(guān)部分，配置如下：

math:
  enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

將 per_page 設(shè)為 true ，那么每篇文章都可以選擇是否加載 MathJax ，從而提高不需要 MathJax 的文章的加載速度，文章的設(shè)置參見 設(shè)置文章模板 。

由于 Hexo 的渲染引擎 “hexo-renderer-marked” 與 MathJax 存在部分語義沖突，因此直接使用 語法將會出錯。解決方案這里提供兩種。

更換 kramed 引擎

更換 Hexo 的 Markdown 渲染引擎， hexo-renderer-kramed 引擎是在默認的渲染引擎 hexo-renderer-marked 的基礎(chǔ)上修改了一些 bug，兩者比較接近，也比較輕量級，替換命令如下：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

更換引擎后行間公式可以正確渲染了，但是行內(nèi)公式渲染還是有問題。

接下來到博客根目錄下，找到 node_modules\kramed\lib\rules\inline.js ，把 escape 變量和 em 變量的值做相應(yīng)的修改：

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

更換 pandoc 引擎

hexo-renderer-pandoc 引擎十分靠譜，使用該 renderer 之前請確保你已經(jīng)安裝了 Pandoc ，然后卸載之前的 renderer ，安裝 pandoc renderer：

npm uninstall hexo-renderer-marked --save
# 如果之前是 kramed 引擎，則 npm uninstall hexo-renderer-kramed --save
npm install hexo-renderer-pandoc --save

注意，如果使用該引擎，那么書寫 Markdown 時需要遵循 Pandoc 對 Markdown 的規(guī)定 。

有一些比較明顯的需要注意的事項：正常的文字后面如果跟的是 list, table 或者 quotation，文字后面需要空一行，如果不空行，這些環(huán)境將不能被 Pandoc renderer 正常渲染。

另外，文中的 URL 使用 Pandoc 渲染以后是普通的文本格式，不能點擊，可以通過用 <> 包圍 URL 的方式把 URL 變成可點擊的 URL。

在我使用該引擎時，發(fā)生無法渲染的錯誤，與 Pandoc 的 smart 參數(shù)有關(guān)，具體不是很清楚是什么原因，在博客根目錄中打開 node_modules\hexo-renderer-pandoc\index.js ，把 args 變量進行修改：

// var args = [ '-f', 'markdown-smart', '-t', 'html-smart', math]
  var args = [ '-f', 'markdown', '-t', 'html', math]

之后就可以了，僅供參考。

關(guān)于如何在 Markdown 中使用 公式，請參考 Markdown 中 LaTeX 數(shù)學(xué)公式命令 。

參考文獻

1. 【持續(xù)更新】最全 Hexo 博客搭建 + 主題優(yōu)化 + 插件配置 + 常用操作 + 錯誤分析
2. 超詳細 Hexo+Github 博客搭建小白教程
3. 在 Hexo 中渲染 MathJax 數(shù)學(xué)公式
4. Hexo 書寫 LaTeX 公式時的一些問題及解決方法