使用 Github 和 Hexo 快速搭建我的博客

時間 2019-12-19

標籤使用 github hexo 快速搭建我的博客欄目 Git 简体版

原文原文鏈接

導語

我的興趣愛好特別普遍，喜歡搗鼓各類小東西自娛自樂。雖然都沒能深刻研究，可是本身的「孩子」仍是很想拿出來遛遛得人一句誇獎的。因此剛學 Markdown 的時候非常有想過要搭個我的博客來玩玩，一來激勵本身練習 Markdown，二來也是展現一下本身的「勞動成果」。惋惜第一次嘗試 Github + Jeckyll 的搭配沒能一次成功，忙起來了也就把這事兒放一邊了。最近由於微信普通公衆號不支持頁面內插入多個連接（想作個集合貼連接到本身的不一樣做品），就又想着仍是本身搭個網站吧。改變策略使用 Github + Hexo 卻是很快成功了，記錄一下過程，若是能對其餘想要搭建我的博客網站的小夥伴有幫助那就更好了。php

0. 準備

Hexo 的官方文檔挑重要的部分掃了一下，主要仍是參考網上的一些帖子依樣畫的葫蘆，遇到問題再去 Google 和度娘上找答案。問題也都不難解決，主要仍是配置的問題，分享出來只是但願後來者能夠少走點彎路。css

首先說一下，Hexo 是一款基於 Node.js 的靜態博客框架，支持 Markdown，符合你們需求的話就請聽我慢慢道來。html

我使用的是辦公用的 Mac 來搭建的，本地的操做基本是用 Terminal 來完成的。其它操做系統應該相似，不過由於沒驗證嘗試過也就不在這裏談到了。java

我一共搭了兩個博客，使用了不一樣的主題，一個比較簡潔的，適合程序員發佈技術貼；另外一個是漂亮的 material design 風瀑布流，能夠用來發布一些生活化的動態。由於 lz 有較爲嚴重的整理癖，因此挑選的兩個模板都有分類和 Tag 功能；同時也很想與同好們多多交流，並聽聽你們的反饋，因此找的都是有評論功能的主題（不事後一個的 disqus 第三方評論插件國內被牆啦~）。若是想要更簡潔的、功能更強大的或者其餘風格的模板，你們能夠自行去 Hexo 的主題列表裏挑選。node

1. 註冊 Github 帳號

這一步對於工程師來講相信沒啥難度，估計你們也都有帳號了，須要注意的是：git

要建立一個倉庫（repo）和你的博客相關聯。使用 Hexo 的話，對這個 repo 的名字是有要求的，必須是：your_github_username.github.com 格式。
也就是說，一個 Github 帳號只能對應一個博客（其實 Hexo 配置文件裏有一項是填寫 Url 的，若是網站有子目錄的話，能夠填寫子目錄，因此猜想仍是有但願在一個倉庫裏創建不一樣子目錄來部署幾個博客的，可是嘗試了兩次都沒有成功後，我決定先採用不一樣的 Github 帳號來配合不一樣的博客了）。程序員
最好生成並配置 SSH Keys。也能夠不配製，但不配置的話每次對本身的博客有改動要提交時，必須手動輸入帳號密碼，配置了則不須要。我以前申請第一個帳號時就已經配置好了，今天由於要使用一臺電腦向兩個 Github 帳號發佈內容，管理多個 SSH 祕鑰比起新建一個須要更多費一點周折，就一併放在後文講解了。github

2. 安裝 git，node.js 和 Hexo

安裝命令行的 git，過久之前作的，具體已經忘了，應該就是去官網下載最新版並安裝吧。它是用來把本地的 Hexo 內容提交到 Github 上，以及快速下載各主題的。npm
去 Node.js 官網下載最新版並安裝；用於下載 Hexo 等工具和插件。json
下載安裝 Hexo：

$ npm install -g hexo-cli

3. 搭建博客

3.1 本地初始化博客

創建一個博客文件夾，文件夾的名稱能夠隨意。建議不要選擇須要管理員權限才能建立的目錄。進入目錄並初始化：

$ cd your_blog_dir
$ hexo init

使用 node.js 根據博客既定的 dependencies 配置安裝全部的依賴包：

$ npm install

初始化博客之後，咱們能夠看到博客文件夾裏多出了不少文件和目錄。

3.2 根據須要配置博客

咱們經過修改 _config.yml 文件來配置咱們的博客。下面是我修改的幾項參數信息（注意每一項的「:」後面都要保留一個空格）：

1) 填寫網站相關信息

title: Choose a title
subtitle: Any subtitle you like
description: Anything you like
author: Your name
language: zh-CN
timezone: Asia/Shanghai

2) 配置我的域名

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/child
root: /

個人理解是，沒有花錢購買了域名的話，能夠不用填這兩項。不過若是使用了評論系統，這兩項必須正確填寫。也許能夠研究一下使用 root 的話是否就能用 Github 的一個 repository 搭建多個博客。我有嘗試過配置 root 爲「/blog/」，可是把網站 deploy 之後，鍵入地址打開，會報找不到各資源（css，js等）的錯，由於會去 /blog/ 下去尋找資源，而使用 Hexo deploy 咱們的網站的時候仍是部署到倉庫的根目錄下的。不知道若是把網站部署到 Github 倉庫的 /blog/ 目錄下是否就能夠了，目前尚未找到使用 Hexo 部署網站到 Github 子目錄的方法。

3) 關聯 Github 的部署信息
4)

deploy:
type: git
# 能夠在 Github repository 首頁的 `Clone or download` 按鈕下找到下面的連接
repo: https://github.com/your_github_name/your_github_name.github.com.git
branch: master

3.3 部署博客

1）咱們先進行本地發佈，確認一下前面的操做是否都成功了：

$ hexo server

此時終端會輸出：

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

打開瀏覽器，輸入 http://localhost:4000/，應該就能夠看到咱們搭建好的博客和發佈的文章了。

2）下載 Hexo 部署器，並將博客部署到網上：

注意，不執行下面第一行的話，可能會報「ERROR Deployer not found: git」或者「ERROR Deployer not found: github」的錯

$ npm install hexo-deployer-git --save
$ hexo deploy

這時在 Github 的倉庫裏已經能夠看見咱們的網站目錄和文件了。此時在瀏覽器地址欄鍵入咱們的網址，即：your_github_name.github.io 就能夠打開咱們博客的主頁了。

注意第一次打開估計須要作一些初始化的工做，會比較慢。

3.4 維護博客的一些經常使用操做

3.4.1 發佈一篇博文

1) 在終端輸入下列命令新建一篇文章：

$ hexo new "post_title"

就能夠在本地博客文件夾的 /source/_post/ 目錄下看到咱們新建的 markdown 文件。

2) 用 Markdown 編輯器打開文件進行編輯，輸入文章內容，保存後準備發佈；

3）使用 Hexo 生成靜態網頁，併發布到網上：
每次咱們更新了博客後，都須要讓 Hexo 從新生成一下靜態網頁，能夠在 public 目錄的相應日期下看到生成的文件。（generate 能夠縮寫爲 g，其它縮寫見 Hexo 官方文檔。）

$ hexo generate
$ hexo deploy

3.4.2 刪除一篇博文

1) 去本地博客文件夾的 /source/_post/ 目錄下刪除須要刪除的 .md 文件。

2) 去本地博客文件夾的 public 目錄下刪除該博文對應的文件夾（會按發佈時間歸到不一樣目錄下）。

3) 在終端從新生成靜態網頁併發布：

$ hexo generate
$ hexo deploy

當咱們更新博客時發生了任何問題，能夠在終端輸入下述命令清理並從新生成靜態網頁：

$ hexo clean
$ hexo g

3.4.3 博文首頁展現長度控制

Hexo 博文在首頁展現時，「Read More」或「閱讀更多」按鈕出現的位置是由做者在寫文章的時候設定的。只需在文章正文裏合適的位置加上  此標記以前的正文內容就會成爲該文章的簡述，顯示在首頁裏。

3.4.4 Hexo 中的 `front-matter` 配置

front-matter 是文件最上方分隔出來的一塊 YAML 或 JSON 格式的區域。採用 YAML 格式書寫時，Front-matter 以三個短橫槓「---」同正文進行分隔，使用 JSON 格式時則是三個分號「;;;」。

front-matter 用於指定文章的一些屬性，有：layout（佈局），title（標題），date（文件創建日期），updated（文件更新日期），comments（文章評論功能開關），tags（標籤（不適用於分頁）），categories（分類（不適用於分頁）），permalink 覆蓋文章網址等。

下面介紹一下其中比較經常使用的幾個：

1) title & date

在 hexo new 的時候會自動生成，固然也能夠以後再編輯。

2) tags & categories

只有 post 類型的文件是支持 tags 和 categories 的。它們能夠相似 java 數組的形式來表示，也能夠分多行以短橫槓開頭來表示：

---
xxx: xxx
tags: [Github, Hexo, Blog, MathJax]
categories: 
- How To
- Hexo
- MathJax
---

如上填寫完這兩個屬性，在 hexo g 的時候就會自動生成相應的標籤和分類。若是所使用的 Hexo 主題的側邊欄有這兩個模塊，或者主題有相應的頁面，就能夠看到相應的生成結果被展現出來（下圖是 Maupassant 主題自動生成的側邊欄 tags 和 categories 效果）。

tags 和 categories 的最大區別是：當有多個並存時，categories 是順序做用到 post 上、且有層級關係；而 tags 的各個元素是同一層級的，因此順序並不重要。從上圖貌似沒有看出分類的層級效果，可是觀察一下打開的 URL 就能發現不一樣了，一樣是打開「MathJax」，categories 的 URL 以下：

http://localhost:4000/categories/How-To/Hexo/MathJax/

tags 的則是：

http://localhost:4000/tags/MathJax/

若是您的分類有中文的話，譬如：categories: [美容, 護膚, 面膜]，那麼您會發現，URL 裏面也有中文：

http://localhost:4000/categories/美容/護膚/面膜/

複製黏貼出來的話，會更不友好：

http://localhost:4000/categories/%E7%BE%8E%E5%AE%B9/%E6%8A%A4%E8%82%A4/%E9%9D%A2%E8%86%9C/

想要讓 URL 中儘可能少出現中文，能夠在博客的根目錄配置文件 _config.yml 中利用 category_map屬性做映射。

category_map:
 美容: beauty
 護膚: skin care
 面膜: mask

如上配置後，獲得的 url 就會變爲：

http://localhost:4000/categories/beauty/skin-care/mask/

tag 也有相應的 tag_map。

3) toc

Hexo 默認不開啓文章目錄，若想要某篇文章根據標題權重自動生成目錄顯示在最右邊，能夠在 front-matter 中開啓:

---
xxx: xxx
toc: true
---

從上圖中能夠看到，生成目錄時會自動添加序號。因此若是使用自動生成的話，就無需再在文章中的標題添加序號了。

3.5 （可選）選擇本身喜歡的主題

會寫博客的小夥伴們估計仍是比較重視細節和美觀的，對博客的樣式天然也有追求，簡單說一下怎麼替換主題，不一樣的主題替換起來略有不一樣，你們能夠參考做者的指導。

Hexo 有兩份主要的配置文件（文件名都是 _config.yml），一份位於站點根目錄下的站點配置文件，另外一份位於主題目錄 themes 下的主題配置文件。

要安裝一個新的 Hexo 主題通常分爲兩步：a. 將主題文件放置於站點的 themes 目錄下；b. 修改配置文件。下面舉一下個人兩個例子：

3.5.1 Maupassant 主題在 Hexo 上的移植版

先上剛撘完時的效果圖：

主要是看着做者的引導修改的，具體步驟以下：

1) 從 Github 上將主題下載下來，放到 /themes 目錄下：

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

2) 安裝主題和渲染器：

$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

3) 編輯博客目錄下的 _config.yml 文件，將 theme 的值改成 maupassant。

4) 接着就是執行 clean，generate，deploy 三部曲了。

5) 還有不少可配置項，這裏列舉幾項我嘗試了的，其餘的請參考做者的原文~

a. 按照默認配置，會有：「首頁」、「歸檔」、「關於」、「訂閱」四個 Tab，其中「首頁」和「歸檔」是自動生成的，「關於」和「訂閱」要生成一下，否則會找不到網頁。

生成「關於」頁面：

最簡單的方法是：

$ hexo new page about

能夠看見 source 目錄下生成了 about 目錄，此目錄下的 index.md 文件就是「關於」頁面了，你們能夠根據本身的須要進行編輯。

想要添加其它頁面，重複上述步驟便可。另外一種生成頁面的方法是：
在 source 目錄下創建同所要生成的頁面名字同樣的文件夾，在其中建立 index.md 文件，並在 index.md 的 front-matter 中設置 layout 爲 layout: page。若須要單欄頁面，就將 layout 設置爲 layout: single-column。

生成「訂閱」頁面：

首先要說明一下，因爲生成 RSS 也就是訂閱的插件同 Hexo 3.2 的兼容性的問題，我這邊沒法正常生成「訂閱」頁面，會報以下錯誤：

Error: Unable to call `the return value of (posts["first"])["updated"]["toISOString"]`, which is undefined or falsey

因此做爲已經使用了 Hexo 3.2 的用戶，我就只能把 RSS 從主頁中移除啦~去主題的配置文件 _config.yml 中，將 menu 下的 RSS 配置註釋掉：

menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  # - page: rss
  #   directory: atom.xml
  #   icon: fa-rss

其它功能模塊也可用此種方式刪除。

可是若是您裝的是更早版本的 Hexo，是能夠根據如下步驟自動生成 RSS 的：
安裝兩個插件：

$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save

在項目的 _config.xml 配置文件中添加這兩個插件：

# 若是是 Hexo 3.2 及以上版本，沒法使用 RSS 功能，必須將這兩句註釋掉，否則 generate 的時候會報錯
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

另外須要注意，項目的配置文件中的 URL 必須正確填寫本身網站地址，否則 RSS 訂閱不會成功。

b. 評論功能

對於我來講，評論功能仍是頗有用的，促進同好之間互相交流共同進步，這也是我寫博客的最終目的吧~ Maupassant 主題是支持兩大最經常使用的第三方評論的，disqus 和多說。通常 disqus 國內加載會比較慢，可是會更穩定一點。由於我使用的網絡環境連不上 disqus，因此也沒什麼好糾結的了，直接使用多說了。

首先去多說網站註冊一下，一個帳號對應於一個博客。
在主題的配置文件 _config.yml 中填上您剛剛註冊獲得的多說 shortname

duoshuo: <duoshuo_shortname>

以後就能夠在文章和頁面的 front-matter 中設置 comments: true 或 comments: false 來開啓或關閉評論功能啦（默認開啓）。

c. Maupassant 主題自動截取文章第一段做爲摘要顯示在首頁，而不會顯示全文。咱們也能自定義摘要：

使用文章的 front-matter 中的 description 項來填寫想要顯示的摘要；
或者直接在正文內容中插入 ，其前面的內容就會被認爲是摘要。

d. 支持數學公式：

此主題已經集成了 MathJax 用於渲染 LaTeX 數學公式，按以下步驟能夠打開：

要啓用公式高亮，先在博客目錄的 _config.yml 中添加：

mathjax: true

並在相應文章的 front-matter 中添加 mathjax 項來開啓：

---
xxx: xxx
mathjax: true
---

對於行內公式，使用 $...$ 或 \$...\$ 來標記；對於塊級公式，默認定界符是 $$...$$ 和 \\[...\\]。

若是文章內容中出現美圓符號「$」，而非行內公式的定界符，那麼請在博客目錄的 _config.yml 中添加：

mathjax2: true

相應地，在須要使用數學公式的文章的 front-matter 中也要使用 mathjax2: true。

3.5.2 Material 瀑布流效果的 material-flow 主題

能夠先看一下做者博客的效果，而我剛撘完時的效果以下：

也是照着做者的引導來修改的，具體過程以下：

1) 從 Github 上下載主題到 /themes 目錄下：

$ git clone https://github.com/stkevintan/hexo-theme-material-flow themes/material-flow

2) 下載依賴：

$ npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content

3) 編輯博客目錄下的 _config.yml 文件，將 theme 的值改成 material-flow。

4) 將 avatar.jpg 和 favicon.ico 圖片放到 /source/images/ 目錄下，並在 _config.yml 文件中以下指定：

# Site
title: YOUR_TITLE
subtitle: YOUR_SUBTITLE
description: YOUR_DESC
keywords:
  - A_KEYWORD
  - A_KEYWORD
author: YOUR_NAME
avatar: /images/avatar.jpg  # the avatar image in the sidebar
favicon: /images/favicon.ico # the favicon
language: zh-CN
timezone: Asia/Shanghai

對於這個主題，此步驟不可省略，否則打開網站時會拋錯。

favicon 即 Favorites Icon，是地址欄網頁標籤最左側的圖標。有在線工具能夠上傳本身的圖片去生成指定規格的 favicon.ico 文件。

5) 在 /source/_data/ 目錄下創建並配置下述幾個文件：

links.yml
menu.yml
widgets.yml

6) 在 /themes/material-flow/ 目錄下按引導配置 _config.yml 文件。

7) 仍然是執行 clean，generate，deploy 三部曲了。

8) 其餘可配置項：

a. 按照默認配置會有：「首頁」、「歸檔」、「關於」三個 Tab，其中「首頁」和「歸檔」是自動生成的，「關於」自行生成一下，具體事宜參見前文 Maupassant 主題的操做。

b. 評論功能

此 Material Flow 主題是支持 disqus 評論系統的，由於國內被牆，因此我也就沒有配置了。

c. 此主題首頁默認會顯示文章全文，這會大大下降網站的加載速度，因此你們要記得配置每篇博文的摘要:

直接在正文內容中插入 ，其前面的內容就會被認爲是摘要。
Material Flow 主題不支持在 front-matter 中的 description 項來標記摘要哦~

d. 支持數學公式：

此主題自己不支持數學公式，單純靠本身人肉修改主題來支持數學公式仍是比較麻煩的，幸而網上已有牛人開發了基於 MathJax 來渲染 LaTeX 數學公式的插件了，咱們只要按文檔安裝配置就能夠啦：

安裝插件：

$ npm install hexo-math --save

初始化（雖然官網中有寫此步驟，但實際操做時發現 Hexo 沒有這個命令，且此步驟沒必要須。）

在博客文件夾中執行：

$ hexo math install

在主題目錄的 _config.yml 中添加：（雖然官網中有寫此步驟，但實際操做時發現無步驟亦可。）
```
plugins:
hexo-math
```
而後就能夠在你的文章中應用數學公式啦~~
比起 Maupassant 主題自帶的 MathJax，此插件的優勢是：
I) 無需在文章的 front-matter 中添加 MathJax 項來開啓；
II) 即便是首頁摘要裏的公式，也能正確顯示；
不過使用過程當中可能會由於 Markdown 與 LaTeX 的特殊字符衝突而產生一些小問題。

Hexo 會先用 marked.js 渲染 .md 文件，而後再交給 MathJax 渲染數學公式。譬如 LaTeX 中的換行符「\\」會先被 marked.js 轉義成一個「\」，致使 MathJax 渲染時不認爲它是換行了。針對個別字符二次轉義的問題，我採起修改 marked.js 文件的方式來解決：

I) 用編輯器打開博客目錄下的 /node_modules/marked/lib/marked.js 文件；

II) 將下述代碼：

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

替換成:

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

即取消了對「\\」，「\{」，「\}」等 LaTeX 特殊字符的轉義。再配合 ASCII 碼的 Unicode 來使用，perfect！

III) 注意這些修改要 clean 再 generate 纔會生效哦~

4. 一臺電腦上配置多個 SSH

由於博主以前已經在電腦上配置過 SSH 了，因此使用 Hexo 向 Github 部署時是不會要求輸入帳戶密碼的，這樣就致使向第二個帳號提交的時候自動使用了第一個帳號的 SSH 從而失敗。這裏就說一下如何在一臺電腦上，配置多個 Github 帳號的 SSH，從而向多個 Hexo 博客發佈博文。第一次新建 SSH 的狀況也能夠參照此方式來配置。

4.1 生成新的 SSH

Mac 下 SSH 是放在 ~/.ssh 目錄下的。若是以前已經配置過 SSH，那麼該目錄下應該已存在一個 SSH 祕鑰了，假設文件名爲："github_rsa.pub"。在終端輸入以下命令，用新帳號生成新的祕鑰，並根據提示輸入用於保存的名字，如：「github_rsa_2」。

$ cd ~/.ssh
$ ssh-keygen -t rsa -C "yourSecondGithubEmail@email.com"
# Give your second ssh key another name: e.g., github_rsa_2
Generating public/private rsa key pair.
Enter file in which to save the key:
$ github_rsa_2

操做完成後，就能夠看見目錄下已經多了兩個文件，github_rsa_2 和 github_rsa_2.pub。

4.2 將新的 SSH 祕鑰添加到 SSH 代理中，以使你的電腦能夠識別它：

$ ssh-add ~/.ssh/github_rsa_2

若是發生錯誤：「Could not open a connection to your authentication agent」，嘗試下述命令：

$ ssh-agent bash
$ ssh-add ~/.ssh/github_rsa_2

4.3 配置管理你的多個 SSH 祕鑰

1) 編輯 ~/.ssh 目錄下的 config 文件，沒有的話則新建一個。

$ cd ~/.ssh
$ touch config

2) 將下面的內容粘貼到 config 文件中：

# Default Github User
Host github.com
HostName github.com
User git
IdentityFile ~/.ssh/github_rsa

# Second Github User, the 'host' field will be used for Hexo deploying! Tried other name, not working.
# git2 is the alternative name of your second Github account, you can use it when you clone or update your project. Details can be found later.
Host git2    
HostName github.com
User git
IdentityFile ~/.ssh/github_rsa_2

4.4 關聯 Github 帳號

要將新生成的 github_rsa_2.pub 的內容添加到你的第二個 Github 帳號中，從而可使用它向 Github 提交內容。

1) 將 SSH 祕鑰複製到剪貼板：

$ pbcopy < ~/.ssh/github_rsa_2.pub

若是 pbcopy 命令不起做用，能夠直接去隱藏的 ~/.ssh 目錄下用文字編輯器打開並複製其內容，當心不要加入多餘的換行符或空格。

2) 進入 Github 網頁的我的設置裏，從側邊欄中進入 SSH and GPG keys，再點擊 New SSH key 或 Add SSH key。

3) 在 Title 輸入框中輸入合適的名字來描述你的新祕鑰，如："Office Mac - github_rsa_2"。

4) 將複製到剪貼板的祕鑰粘貼至 Key 輸入框中。

5) 點擊 Add SSH key 並確認。

4.5 修改 Hexo 配置

打開你的第二個 Hexo 博客的 _config.yml 文件，並編輯以下：

# Deployment
deploy:
type: git
# 注意此處寫法同以前的 'https' URL 的寫法不一樣
repo: git2:2nd_github_account_name/2nd_github_account_name.github.io.git
branch: master

若是你還有其餘 Github 帳號，則能夠重複上述步驟來繼續添加。