原文連結： http://yangbingdong.com/2017/build-blog-hexo-base/

前言

搭建此部落格的動機以及好處在此就不多談了，之前已經表達過，詳情請看Start My Blog Trip — Power By Hexo
記錄一下搭建的基本過程以及遇到的一些問題，僅供參考
= =廢話不多說，進入主題

• Hexo部落格搭建的基礎大致流程為：
  安裝Node.js →安裝Git → 安裝Hexo → 安裝主題 → 本地測試執行 → 註冊給github與coding並建立pages倉庫 → 部署

• 這是博主的系統環境與版本:
  OS: Ubuntu16.04
  Node.js: 6.2.0
  Npm: 3.8.9
  Hexo: 3.2.2
  主題NexT: 5.1.0
  Git: 2.7.4

• 對於使用windows的童鞋，可參考文章末尾處的參考連結，步驟大同小異

• 以下提到的站點配置檔案指的是部落格檔案根目錄下的 _config.yml，主題配置檔案是主題資料夾下的 _config.yml，童鞋們不要混淆了

---

安裝Node.js

Node.js的安裝有很多種方式，Hexo的官方文件 建議是用nvm 安裝，但好多人都說不行，所以找了另外兩種方式安裝
windows的童鞋可參考安裝Node.js

方法一：二進位制包直接解壓配置

在node.js的官網 下載二進位制包來安裝的，下載過後，解壓，設定軟連結，要不然每次都執行命令都要加上路徑，好麻煩

sudo ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/node /usr/local/bin/node

sudo ln -s /home/ybd/Data/soft/application/node-v6.2.0-linux-x64/bin/npm /usr/local/bin/npm

注意！原始檔要寫<font color=red>絕對路徑</font>，否則會報錯：連結層數過多。也可以直接將node可執行檔案拷貝到 /usr/local/bin 目錄下。

接下來就可以檢視是否成功配置了

node -v
npm -v

方法二：換源下載

安裝 6.x 版本：

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

安裝 8.x 版本：

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

npm 更換淘寶映象：

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

方法三：原始檔編譯安裝

在安裝前，首先需要配置安g++編譯器

sudo apt-get install build-essential

去官網 下載原始碼，選擇最後一項，Source Code
解壓到某一目錄，然後進入此目錄,依次執行以下3條命令

./configure
make
sudo make install

執行以下命令，檢測是否已經裝好node.js

node -v

npm安裝，一條命令即可解決

curl http://npmjs.org/install.sh | sudo sh

博主安裝Node.js遇到的問題就是多次安裝了不同版本的Node.js，有的是安裝在使用者變數上，有的是系統變數，所以每次用的時候都要切換到root使用者，就算賦權 sudo chmod 777 file 都沒有用，所以折騰了很久才把Node.js完全解除安裝，再重新安裝

安裝Git

Ubuntu系統下安裝Git非常簡單，只需一條命令：

sudo apt-get install git

windows下就直接到Git官網 下載安裝即可

然後終端執行 git --version 檢視是否安裝成功

安裝Hexo

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

• 所有以上必備的應用程式安裝完成後，無論是在哪個作業系統，之後的操作都一樣

安裝Hexo的非常簡單，只要一條命令，前提是安裝好Node.js與Git

npm install -g hexo-cli

• 如果npm安裝hexo失敗，則很有可能是<font color=red>許可權</font>問題，或者npm與node的版本不相容（很少出現）

如果順利安裝完成，理論上Hexo已經安裝完成，但在Ubuntu系統中，比較坑的地方就是 hexo 命令居然放在了Node.js安裝目錄的 bin 資料夾下，不能快捷地在終端把命令敲出來，所以還是老規矩，軟連結走起

sudo ln -s /home/ybd/data/application/node-v7.4.0-linux-x64/bin/hexo /usr/local/bin/hexo

到此，Hexo的安裝已基本完成，可以先試一下Hello World。

解決Hexo命令fs.SyncWriteStream問題

nodejs版本更新到8.0之後，執行hexo相關命令總會出現這麼一行鬼東西：
(node:538) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
雖然不怎麼影響大局，當對於強迫症來說是一個噩夢！

nodejs從8.0開始已經棄用了fs.SyncWriteStream方法，但是某些外掛裡面還是用到這個方法。檢視Hexo專案也有這個一條issue，在hexo專案中其中有一個hexo-fs的外掛呼叫了這個方法，所以需要更新hexo-fs外掛，更新方法如下：

npm install hexo-fs --save

當然還有一些外掛：

npm install hexo-deployer-git@0.3.1 --save
npm install hexo-renderer-ejs@0.3.1 --save
npm install hexo-server@0.2.2 --save

But，問題木有得到解決啊！
hexo命令有個-debug引數，執行命令的時候加上這個引數，可以定位問題：

ybd@15ffab36a16c:~/blog$ hexo clean --debug
03:01:16.464 DEBUG Hexo version: 3.3.9
03:01:16.467 DEBUG Working directory: ~/blog/
03:01:16.539 DEBUG Config loaded: ~/blog/_config.yml
03:01:16.613 DEBUG Plugin loaded: hexo-admin-qiniu
(node:538) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
03:01:16.655 DEBUG Plugin loaded: hexo-algolia
03:01:16.657 DEBUG Plugin loaded: hexo-baidu-url-submit
03:01:16.668 DEBUG Plugin loaded: hexo-deployer-git
03:01:16.672 DEBUG Plugin loaded: hexo-fs
03:01:16.674 DEBUG Plugin loaded: hexo-generator-archive
03:01:16.677 DEBUG Plugin loaded: hexo-generator-baidu-sitemap
03:01:16.678 DEBUG Plugin loaded: hexo-generator-category
03:01:16.680 DEBUG Plugin loaded: hexo-generator-feed
03:01:16.681 DEBUG Plugin loaded: hexo-generator-index
03:01:16.682 DEBUG Plugin loaded: hexo-generator-tag
03:01:16.826 DEBUG Plugin loaded: hexo-inject
03:01:16.828 DEBUG Plugin loaded: hexo-renderer-ejs
03:01:16.829 DEBUG Plugin loaded: hexo-generator-sitemap
03:01:16.834 DEBUG Plugin loaded: hexo-renderer-marked
03:01:16.836 DEBUG Plugin loaded: hexo-renderer-stylus
03:01:16.881 DEBUG Plugin loaded: hexo-server
03:01:16.912 DEBUG Plugin loaded: hexo-wordcount
03:01:16.943 DEBUG Plugin loaded: hexo-reference
03:01:16.946 DEBUG Script loaded: themes/next/scripts/merge-configs.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/button.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/center-quote.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/full-image.js
03:01:16.947 DEBUG Script loaded: themes/next/scripts/tags/note.js
03:01:16.948 DEBUG Script loaded: themes/next/scripts/tags/group-pictures.js
03:01:16.949 DEBUG [hexo-inject] firing inject_ready
03:01:16.951 INFO  Deleted database.
03:01:16.956 DEBUG Database saved

發現問題在hexo-admin-qiniu這個外掛=.=

貌似也沒怎麼用這個外掛，那麼就刪掉吧：

nmp uninstall hexo-admin-qiniu --save   

那個報錯終於消失啦～～～

本地啟動Hello World與Hexo簡單使用

初始化

隨便建一個資料夾，名字隨便取，博主取其名為blog，cd 到資料夾裡，先安裝必要的檔案，執行以下命令：

hexo init  # hexo會在目標資料夾建立網站所需要的所有檔案
npm install  # 安裝依賴包

本地啟動

有了必要的各種配置檔案之後就可以在本地預覽效果了

hexo g # 等同於hexo generate，生成靜態檔案
hexo s # 等同於hexo server，在本地伺服器執行

之後開啟瀏覽器並輸入IP地址 http://localhost:4000/ 檢視，效果如下

新建文章與頁面

hexo new "title"  # 生成新文章：\source\_posts\title.md
hexo new page "title"  # 生成新的頁面，後面可在主題配置檔案中配置頁面

• 生成文章或頁面的模板放在部落格資料夾根目錄下的 scaffolds/ 資料夾裡面，文章對應的是 post.md ，頁面對應的是page.md，草稿的是draft.md

編輯文章

開啟新建的文章\source\_posts\postName.md，其中postName是hexo new "title"中的title

title: Start My Blog Trip — Power By Hexo  # 文章頁面上的顯示名稱，可以任意修改，不會出現在URL中
date: 2017-01-10 23:49:28  # 文章生成時間，一般不改
categories: diary  # 文章分類目錄，多個分類使用[a,b,c]這種格式
tags: [Hexo,diary]  # 文章標籤
---

#這裡開始使用markdown格式輸入你的正文。

<!--more--> 
#more標籤以下的內容要點選“閱讀全文”才能看見

插入圖片

插入圖片有三種方式

方式一

在部落格根目錄的 source 資料夾下新建一個 img 資料夾專門存放圖片，在博文中引用的圖片路徑為 /img/圖片名.字尾

![](圖片路徑)

方式二

對於那些想要更有規律地提供圖片和其他資源以及想要將他們的資源分佈在各個文章上的人來說，Hexo也提供了更組織化的方式來管理資源，將站點配置檔案中的 post_asset_folder 選項設為 true 來開啟文章資原始檔夾

post_asset_folder: true

然後再博文中通過相對路徑引用

{% asset_img 圖片檔名 %}

方式三

使用七牛雲儲存，因為Github跟Coding專案容量有限，而且Github的主機在國外，訪問速度較慢，把圖片放在國內的圖床上是個更好的選擇，免費使用者實名稽核之後，新建空間，專門用來放置部落格上引用的資源，進入空間後點選「內容管理」，再點選「上傳」

上傳完成之後點選關閉回到管理頁面，選中剛上傳的圖片，最右邊的操作點選複製連結即可

然後在博文中通過地址引用

![](圖片地址如：http://ojoba1c98.bkt.clouddn.com/img/build-hexo/copyUrl.png)

簡單的命令

總結一下簡單的使用命令

hexo init [folder] # 初始化一個網站。如果沒有設定 folder ，Hexo 預設在目前的資料夾建立網站
hexo new [layout] <title> # 新建一篇文章。如果沒有設定 layout 的話，預設使用 _config.yml 中的 default_layout 引數代替。如果標題包含空格的話，請使用引號括起來
hexo version # 檢視版本
hexo clean # 清除快取檔案 (db.json) 和已生成的靜態檔案 (public)
hexo g # 等於hexo generate # 生成靜態檔案
hexo s # 等於hexo server # 本地預覽
hexo d # 等於hexo deploy # 部署，可與hexo g合併為 hexo d -g

安裝主題（以NexT為例）

更多主題請看知乎專欄

複製主題

Hexo 安裝主題的方式非常簡單，只需要將主題檔案拷貝至站點目錄的 themes 目錄下， 然後修改下配置檔案即可
在這我們使用git克隆最新版

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

啟用主題

開啟站點配置檔案， 找到 theme 欄位，並將其值更改為 next

theme: next

然後 hexo s 即可預覽主題效果

更換主題外觀

NexT有三個外觀，博主用的是 Muse，直接更改主題配置檔案的 scheme 引數即可，如果顯示的是繁體中文，那麼站點配置檔案中的 language: zh-CN

scheme: Muse
#scheme: Mist
#scheme: Pisces

在次執行 hexo clean 和 heox s 可預覽效果
大部分的設定都能在NexT的官方文件 裡面找到，如側欄、頭像、打賞、評論等等，在此就不多講了，照著文件走就行了，接下只是個性定製的問題**

註冊Github和Coding並分別建立Pages

在本地執行沒有問題的話，那麼可以部署到外網去，在此之前，先得有伺服器讓你的專案可以託管，那麼Github Page與Coding Page就是個很好的東西，它們可以讓我們訪問靜態檔案，而Hexo生成的恰恰是靜態檔案
具體請檢視 Coding Page 、 Github Page

那為什麼要註冊兩個網站呢？因為Github是國外的伺服器，訪問速度比較慢，而Coding是國內的，速度相對來說比較快，在後面DNS解析的時候可以把國內的解析到Coding，國外的解析到Github，完美

GitHub

註冊Github帳號

進入Github 首頁進行註冊，使用者名稱、郵箱和密碼之後都需要用到，自己記好，不知道怎麼註冊的童鞋去問問度娘

建立Repository(Github Pages)

Repository相當於一個倉庫，用來放置你的程式碼檔案。首先，登陸進入Github，選擇首頁中的 New repository 按鈕

建立時，只需要填寫Repository name即可，可以順便建立README檔案，就是紅色那個鉤，當然這個名字的格式必須為{user_name}.github.io，其中{user_name}<font color=red>必須</font>與你的使用者名稱一樣，這是github pages的特殊命名規範，如下圖請忽視紅色警告，那是因為博主已經有了一個pages專案

Coding

註冊Coding帳號

國內的網站，絕大部分都是中文的，註冊什麼的就不說了,進入Coding 滾鍵盤就是了= =

建立專案(Coding Pages)

Coding Pages請看 Coding Pages
註冊之後進入主頁，點選專案，點選+，專案名為你的使用者名稱

檢視Pages 服務是否開啟：點選專案 -> 程式碼 -> Pages 服務，若沒有開啟則點開啟

配置SSH與Git

那麼我們有了兩個免費的伺服器之後，就要繫結個人電腦與它們聯絡，那就是SSH與Git
繫結之後我們每次部署專案就不用輸入帳號和密碼

生成SSH Key

ssh-keygen -t rsa -C your_email@youremail.com

後面的 your_email@youremail.com 改為你的郵箱，之後會要求確認路徑和輸入密碼，我們這使用預設的一路回車就行。成功的話會在~/下生成 .ssh 資料夾，進去，開啟 id_rsa.pub，複製裡面的key，粗暴點就是 Ctrl+a 然後 Ctrl+c

新增SSH Key

首先是Github，登入Github，右上角 頭像 -> Settings —> SSH nd GPG keys —> New SSH key 。把公鑰貼上到key中，填好title並點選 Add SSH key

至於Coding，登入進入主頁，點選 賬戶 —> SSH公鑰 —> 輸入key再點選 新增

驗證成功與否

驗證github

ssh -T git@github.com

如果是第一次的會提示是否continue，輸入<font color=red>yes</font>就會看到：You’ve successfully authenticated, but GitHub does not provide shell access 。這就表示已成功連上github!之前博主就是因為沒有輸入yes，導致幾次失敗，粗心地一路回車= =
驗證coding

ssh -T git@git.coding.net

同上，按yes
接下來我們要做的就是把本地倉庫傳到github上去，在此之前還需要設定username和email，因為github每次commit都會記錄他們

git config --global user.name your name
git config --global user.email your_email@youremail.com

關於git可參考：
史上最全github使用方法：github入門到精通
Git學習筆記

部署到Github與Coding

在此之前，先安裝Git部署外掛

npm install hexo-deployer-git --save

打開站點配置檔案，拉到底部，修改部署配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: git@github.com:masteranthoneyd/masteranthoneyd.github.io.git,master
    coding: git@git.coding.net:ookamiantd/ookamiantd.git,master

注意冒號後面是網站對應的使用者名稱，接著就是/，然後再是你的專案名加上 .git,master
儲存後終端執行

hexo clean
hexo g
hexo d

稍等片刻，可能會由於環境、網路等原因，部署的時間會有偏差，有的人快有的慢

部署完成後可在瀏覽器輸入 yourName.github.io 或者 yourName.coding.me 都可以瀏覽到一個屬於自己的部落格了 ～

總結

最後用拙劣的語言總結一下博主搭建Hexo部落格的體會，六個字：簡潔但，不簡單。
再六個字，正如NexT官方說的：精於心，簡於形
= =貌似這個部落格也不怎麼簡潔，有點花俏，裝X嫌疑
但無論怎樣，折騰這個部落格讓我受益匪淺，正如之前聽到的一句名言，忘了誰說的：不努力試一把，又怎麼會知道絕望...好像很有道理，絕望中尋找光芒，絕處逢生...嘿嘿嘿

參考

使用Hexo搭建個人部落格(基於hexo3.0)
Github Pages個人部落格，從Octopress轉向Hexo
Hexo 3.1.1 靜態部落格搭建指南
Hexo官方文件
NexT官方文件