Hexo 實戰（一）：搭建開源部落格系統 Hexo 并将其部署到 GitHub

Hexo 是使用 Node.js 技術實作的靜态部落格架構，依賴很少，安裝非常簡單，可以将 markdown 檔案生成部落格文章，而

且可以将生成的靜态内容釋出到 Github 上。

本次使用的作業系統是 Windows，在 Linux 上操作類似。

環境準備

安裝 git

下載下傳位址：https://git-scm.com/download/win

本次下載下傳安裝的檔案是【Git-2.22.0-64-bit.exe】。

安裝完成後在指令視窗輸入指令 git --version 驗證是否安裝成功，如下能輸出 git 版本說明安裝成功：

C:\Users\Administrator>git --version
git version 2.22.0.windows.1
           

在滑鼠右鍵也會有 git 操作的顯示：

安裝 Node.js

下載下傳位址：https://nodejs.org/en/download/

本次下載下傳安裝的檔案是【node-v12.16.1-x64.msi】。

安裝完成後在指令視窗輸入指令 node -v 驗證是否安裝成功，如下能輸出 node 版本說明安裝成功：

C:\Users\Administrator>node -v
v12.16.1
           

安裝 Hexo

使用指令 npm install -g hexo-cli 安裝 Hexo。

使用指令 hexo init blog 初始化部落格：

如上已初始化完成，目錄結構如下：

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

• _config.yml：網站配置資訊檔案
• package.json：應用程式的資訊
• scaffolds：目标目錄
• source：存放使用者資源的目錄，除 _posts 檔案夾之外，開頭命名為 _ (下劃線)的檔案 / 檔案夾和隐藏的檔案将會被忽略。Markdown 和 HTML 檔案會被解析并放到 public 檔案夾，而其他檔案會被拷貝過去。
• themes：主題目錄，hexo 會根據主題來生成靜态頁面

hexo 基本使用

進入 blog 檔案夾，使用指令 hexo server （可簡寫 hexo s）啟動服務：

如上 hexo 部落格系統服務已啟動完成，浏覽器輸入位址 http://localhost:4000 通路：

系統預設建立了一個 Hello World 博文，其實這個部落格就是目錄【source/_posts】中檔案為【hello-world.md】的内容，使用指令 hexo new "Hello by hexo newcommand" 則會在該目錄中新增一個檔案【Hello-by-hexo-new-command.md】：

C:\Special\Test\HexoTest\blog>hexo new "Hello by hexo new command"
INFO  Created: C:\Special\Test\HexoTest\blog\source\_posts\Hello-by-hexo-new-command.md
           

就會在部落格系統中産生一篇名為【Hello by hexo newcommand】的博文：

直接在目錄中【source/_posts】拷貝過來一個檔案，如【frp.2020032301.md】，Hexo 檢測到有檔案就會在部落格系統中生成一篇博文與檔案名相同的博文，如：

如果是多層目錄，也會對應生成多層路徑如：

結合 GitHub 使用

GitHub 建立個人倉庫

登入 GitHub ,建立倉庫（New repository）,在 Repository name 輸入【你的使用者名.github.io】，這樣配置在後面部署到 GitHub 時就能被失敗，如：

Git 與 GitHub 帳号綁定

1. 配置 git 全局的的使用者名和郵箱

将 git 全局的的使用者名和郵箱配置成 GitHub：

使用指令 git config --global user.name "你的GitHub使用者名" 配置 git 全局的的使用者名。使用指令 git config --global user.email "你的GitHub使用的郵箱" 配置 git 全局的的郵箱。

範例如下：

Administrator@ecs-x-large-2-win-20200316202505 MINGW64 ~
$ git config --global user.name "kungge"

Administrator@ecs-x-large-2-win-20200316202505 MINGW64 ~
$ git config --global user.email "[email protected]"

Administrator@ecs-x-large-2-win-20200316202505 MINGW64 ~
$ git config user.name
kungge

Administrator@ecs-x-large-2-win-20200316202505 MINGW64 ~
$ git config user.email
[email protected]
           

1. 生成密鑰

使用指令 ssh-keygen -t rsa -C "[email protected]" 後一直回車即可，範例如下：

Administrator@ecs-x-large-2-win-20200316202505 MINGW64 ~
$ ssh-keygen -t rsa -C "[email protected]"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa.
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:97THjWf3vbYf4BpwOfUra/sz/Sr0gk8SFNEU9RotcM0 [email protected]
The key's randomart image is:
+---[RSA 3072]----+
|          o++ooo |
|           ..o oE|
|          .  .o o|
|         .  o .+ |
|        S.o+.... |
|         .o++o.o.|
|          .++++o*|
|          .o=o+**|
|           oo===%|
+----[SHA256]-----+
           

這樣就在目錄【C:\Users\你的使用者名.ssh】中生成密鑰，如【C:\Users\Administrator.ssh】中：

1. 将生成的密鑰更新到 GitHub 上

打開 GitHub settings 下的 【SSH and GPG keys】，然後添加 SSH Key，Title 自取，Key 的内容為上面生成的檔案【id_rsa.pub】的内容：

點選【Add SSH Key】後會在清單中顯示新增的 SSH Key，如：

1. 驗證是否成功

使用指令 ssh -T [email protected]：

Administrator@ecs-x-large-2-win-20200316202505 MINGW64 /c/Special/Test/HexoTest/blog
$ ssh -T [email protected]
The authenticity of host 'github.com (52.74.223.119)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCsp***TxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com,52.74.223.119' (RSA) to the list of known hosts.
Hi kungge! You've successfully authenticated, but GitHub does not provide shell access.
           

将 Hexo 部署到 GitHub

打開配置檔案【_config.yml】，将 deploy 節點下内容修改如下：

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

repo 為你上面建立的項目倉庫位址。

安裝 git 部署插件：

C:\Special\Test\HexoTest\blog>npm install hexo-deployer-git --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor and audited 570 packages in 3.271s

5 packages are looking for funding
  run `npm fund` for details

found 2 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
           

然後分别執行如下指令：

• hexo clean：清除
• hexo generate，可簡寫成 hexo g：生成靜态内容
• hexo deploy，可簡寫成 hexo d：部署文章

也可以組合使用 hexo cl && hexo g && hexo d。

執行部署指令 hexo deploy 時，會要求輸入 GitHub 的使用者名和密碼：

登入确認，如果出現如下則表示部署成功：

注：如果失敗可參考【P.3 部署到 GitHub 失敗】解決。

如下已部署到 GitHub 成功：

檢視 GitHub 倉庫代碼可看到靜态頁面已經釋出過來了：

綁定域名

域名解析設定

進入域名控制台，本次使用的華為雲，添加記錄集，主機記錄，如果是主域名，則使用 www，如果是二級域名則使用二級域名名稱，如 blog，類型選擇 CNAME，值就是你的 github 部落格網站項目位址，如 kungge.github.com：

這個時候如果直接通路你的域名還是會404報錯：

github 設定

進入你的項目，點選 Settings 進入設定頁面：

在 GitHub Pages 一欄中找到 Custom domain 然後在文本框中輸入你的域名，點選 save 即可：

其實這個時候就可以通過通路域名來通路網站了。

本地部落格設定

在本地部落格的 blog/source 目錄中，建立一個記事本，内容輸入你的域名，如本次為 blog.kungge.com，儲存為 CNAME 檔案名稱，不要帶字尾。

然後使用如下三個指令來重新生成内容并部署到 Github。

常見問題

安裝 hexo 出錯

使用指令 npm install -g hexo-cli 後，再使用的時候報 git 不是内部或外部指令：

解決辦法：重新删除目錄重來。

圖檔解析不出來

可以将圖檔放置在目錄【source】，這樣圖檔就能顯示出來：

但是這樣肯定不行，當圖檔不哦多時則會占據大量的存儲空間，文章加載時候會變慢，而且md檔案過多圖檔過多，這個目錄就會變得很大，難于維護。

可以使用圖床解決這個問題，圖檔存儲在雲存儲中，如阿裡雲存儲、又拍雲存儲等第三方的檔案存儲服務，使用圖檔連結位址即可，如在 markdown 中就可以這樣使用：

![2323](http://img.kungge.com/a/2020-03-24_232349.png)
           

部署到 GitHub 失敗

使用指令 hexo d 部署如出現通路git位址失敗，如：

解決：重新使用指令 hexo d 則會在指令視窗要求輸入 github 的使用者和密碼，回車即可：