[原創]HEXO 博客搭建日記

博客系統折騰了很久，使用過 Wordpress，Ghost，Typecho，其中 Typecho 是我使用起來最舒心的一種，Markdown 編輯 + 輕量化設計，功能很少很多恰好，着實讓我這種強迫症患者舒服了很久。可是有那麼一天，個人主機空間和 Typecho 忽然衝突了，求助了很久也沒有獲得解決辦法，最終不得已開始考慮更換，由於在 Typecho 上使用的就是移植的 NexT 主題，因而就對 HEXO 有了些興趣，再加上 HEXO 也是原生的 Markdown 編輯，最終思量再三後決定就是 HEXO 了。

下面是我參考了網上的一些博文的安裝教程後對本身安裝的一個記錄，但願能夠幫助到對HEXO有興趣的人。

2018.04.10 更新：修改章節順序使得文章條理更清楚

2017.02.09 更新：添加將 HEXO 部署到 Coding 上的內容

2017.06.25 更新：更改部分小錯誤，並添加 hexo sever失常的一種狀況及解決方案

HEXO介紹

HEXO 是一個快速、簡潔且高效的博客框架。能夠方便快捷的生成博客網頁。HEXO 是一個基於 Node.js 的靜態博客程序，能夠支持多種主題。總之，HEXO 加上 GitHub Pages 就能夠搭建一個免費的博客空間了，並且訪問速度也仍是能夠的哦。

因爲在國內，上 GitHub 的速度不是特別讓人滿意，同時 Coding 也有了靜態網頁的服務推出，因而就想到了同時託管到兩個平臺的想法，這樣國內線路可使用 Coding，國外線路使用 GitHub，加快網頁打開速度。查閱了相關資料後對本文進行了詳細的補充。同時還有人將 HEXO 部署到騰訊雲上，也是很不錯的選擇。

好了閒話再也不多說，讓咱們進入今天的主題，基於 HEXO + Pages 服務的博客搭建。

Node.js安裝

在上面的介紹中咱們也都知道了 HEXO 是基於 Node.js 的博客框架，那麼做爲主體的 Node.js 是必不可少的了，有關其下載，能夠進入 Node.js 官網或者 Node.js 中文網進行下載。

下載完成後能夠運行而後一路確認安裝（即按照默認配置），其中安裝路徑能夠根據本身喜愛進行修改，安裝完成後可使用快捷鍵 win + R 打開 cmd 命令行，在其中能夠輸入如下命令行進行 Node 版本信息的查看，若是能夠正常觀察到版本信息，則說明 Node.js安裝成功，此部分就告一段落，不然須要重裝 Node.js。

node -v # 查看node版本號
npm -v  # 查看npm版本號

Git安裝

Git軟件是一個分佈式版本控制工具，可是咱們在此僅僅用到了一點點的功能，一些關於 Git 的詳細介紹能夠點此進行查閱。Git 軟件的下載能夠在官網，若是以爲下載速度慢也能夠在國內熱心人搭建的下載站進行下載，國內下載站版本可能稍有落後。

有人選擇在軟件安裝中以下界面處將選項設置爲 Use Git from Windows CMD prompt，這裏主要是爲了在 windows 的 CMD 下對 Git 進行些設置（由於默認是隻能在 Git Bash 中執行的）。可是仍然有些操做只能在 Git Bash 下運行，可是選擇這個確實更加方便一些。其餘地方一路默認便可（同上，安裝路徑自定義）。

在按照上述的安裝後咱們同樣打開 CMD 來運行一條指令來看下 Git 的版本號。

git --version     # 查看 Git 版本號

若是正常顯示，則安裝成功，繼續後面步驟，反之須要從新安裝。

HEXO安裝

在命令行中輸入如下命令進行 HEXO 的安裝

npm install -g hexo # 安裝 HEXO

可能會出現一個 WARNING，可是沒有很大關係，繼續下面操做便可。

npm install hexo --save # 保存 HEXO

此時咱們可使用以下命令來看所安裝HEXO的版本號

hexo -v # 查看 HEXO 版本號

本人的版本顯示結果可參考以下

hexo: 3.2.2
hexo-cli: 1.0.2
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 6.9.5
v8: 5.1.281.89
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2k

HEXO初始化

在硬盤上選擇一個合適的位置，新建一個空文件夾（最好爲英文路徑）做爲存放博客數據的地方。使用 Shift+鼠標右鍵(Windows 系統) 的方式打開命令行，這樣路徑就自動設置在當前路徑下了，後續如有打開命令行操做，還都以此方式打開。

而後咱們繼續進行 HEXO 博客初始化的操做，在命令行中繼續鍵入

hexo init   # 初始化組件

進行博客的初始化搭建。上述命令執行完就能夠看到文件路徑下有了一些文件，這些都是你博客運行所須要的文件。

使用

hexo g  # 生成 public 靜態文件

生成靜態頁面，而後使用

hexo s  # 啓動服務器，查看本地效果

啓動本地服務，進入文章預覽調試。在http://localhost:4000下就能夠看到所生成的靜態頁面了

也可使用

hexo s --debug

來查看調試的詳細模式，會有每一個改動信息提示。

可能的錯誤及解決辦法：本部分參考了文章localhost:4000不能訪問。

在第二次搭建HEXO時，在 hexo sever 的時候沒能正常打開調試模式下的網頁，通過一些列查明，發現 4000 端口被佔用了（查詢命令netstat -an|findstr 4000），那麼退而求其次，咱們能夠更換一個端口來運行 HEXO 的調試模式，命令改成

hexo s -p 5000  # 啓動服務器，查看本地效果，端口號 5000

就能夠在 http://localhost:5000 下進行閱覽。

Pages配置

GitHub

這裏須要一個 GitHub 帳號，沒有的請進入 GitHub 官網自行申請，這裏很少描述申請。在有了一個帳號以後，進行網站代碼庫的部署。首先新建一個知識庫，在右上角找到+ 號，而後選擇 New repository，進入代碼庫建立頁面,以下圖。

在 Repository name 那裏填寫 yourname.GitHub.io。注意此處的 yourname 爲你的GitHub帳戶名，格式必須按照上文中所說的來。Description 部分選填，空間類型選擇 Public ，而後點擊 Create repository 進行建立，建立完成後將會看到這樣的一個空間。

而後咱們點擊界面中的 Setting，就是那個小齒輪，向下拖動，看到 GitHub Pages 部分，點擊 Automatic page generator，而後一路向下，系統會自行的給你建立一個網頁，稍微等待一下子，就能夠發現 yourname.GitHub.io 這個網址已經能夠打開了。

後續幫同窗設置時發現 Auto 的選項消失了，以下圖

點擊 Choose a theme，進入選擇頁面，而後點擊 Select theme，在新的頁面再點擊 Commit Change 自動提交至 GitHub Repository 就完成了 GitHub Pages 的建立了。至此，GitHub 網站部署完成。

Coding

和上述 GitHub 部署的方法相似，首先是申請一個 Coding 的帳戶，申請郵箱最好一致，這樣就能夠共用後面咱們要說到的 SSH Key 了。

以後在 Coding 上建立一個項目，項目名稱最好與你的帳戶名稱一致，這樣後續操做起來會比較方便，不容易發暈與出錯。

和 GitHub 有些不一樣，Coding 的 Pages 服務咱們等後續Git部署完成了後再進行，在完成以上的建立後咱們留先進入下一個階段。

Coding 的部署方式有兩種，第一種就是 pages 服務的方式，也就是和 GitHub 同樣，也是咱們推薦的方式，其能夠綁定域名；第二種演示方式必須升級會員才能綁定自定義域名。

Coding 使用 Pages 服務時須要在本地建立一個空白文件 Staticfile，coding.net 須要使用這個文件來做爲靜態文件部署的標誌。即看到這個叫作 Staticfile 的空白文件就知道按照靜態網頁來進行發佈，在 hexo 所在文件夾下鍵入。

cd source/        #進入 source 文件夾
touch Staticfile  #名字必須是 Staticfile

而後在 Coding 中進入你剛纔所建立的項目，點擊代碼 -->> Pages 服務，將其啓用，部署來源選擇選擇 Master 分支（默認，不用更改）。

Git部署

生成SSH Key

在 GitHub 部署完成後，須要對電腦客戶端的Git進行配置部署。此步驟主要是添加 SSH-Key。首先使用你的 GitHub 用戶名和密碼進行配置，在空白處鼠標右鍵選擇 Git Bash Here 進入 Git 命令行，鍵入如下兩條指令。

git config --global user.name "yourname"
git config --global user.email "web@webmail.com"

其中，web@webmail.com 爲你申請GitHub帳戶時使用的郵箱，yourname 爲 GitHub 的用戶名。

以後，生成密鑰。

ssh-keygen -t rsa -C "web@webmail.com"

而後一路默認回車，最後它將會生在默認路徑生成一個.ssh的文件夾（注意改文件夾路徑），裏面會有一個 id_rsa 和 id_rsa.pub 的文件。這是我使用命令行生成後的結果，不一樣用戶所產生的名字可能略微有不一樣。這裏確保本身的密鑰文件不要在電腦上剪切或刪除，後續Git部署時找不到密鑰會提示警告且部署失敗。

網站添加SSH Key

使用編輯器打開 id_rsa.pub 文件，複製其中的內容。

1. [GitHub]打開 GitHub 的 Setting -->> SSH and GPG keys，添加到本身的 SSH Key。若找不到位置，能夠點此快速進入。
2. [Coding]打開 Coding 的帳戶 -->> SSH公鑰，添加本身的 SSH Key。若找不到位置，能夠點此快速進入。

本地Git配置

將上面生成的.ssh文件夾複製到Git的安裝路徑，好比個人就是D:\Program Files\Git\.ssh。（不復制也能夠，只要後續使用命令驗證，故此步驟多餘）

而後能夠可使用以下命令驗證一下，期間可能須要本身進行 yes 選項的肯定，正常操做後就會出現成功鏈接的提示。若無則從新進行 Git 部署部分的操做。

1. [GitHub]

ssh -T git@GitHub.com

1. [Coding]

ssh -T git@git.coding.net

這兩部分的驗證，我所獲得的提示以下能夠參考（可能略有出入，但大概都是這個意思）。

1. [GitHub]（其中xxx爲用戶名）

Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.

1. [Coding]（其中xxx爲用戶名）

Hello xxx! You've connected to Coding.net via SSH successfully!

HEXO + Git部署

配置修改

首先在命令行中鍵入

npm install hexo-deployer-git --save        # 安裝使用 git 方式進行部署所須要的插件

來進行 git 同步上傳時所須要的插件。

在咱們所設定的路徑下，安裝HEXO後生成了一些文件，其中 **_config.yml** 文件須要重點說一下，這個文件能夠說是咱們的 站點配置文件，裏面有着網站的一些信息。在創建與 GitHub 的關聯時，咱們須要編輯這個文件，使用編輯器打開 **_config.yml** 文件，翻到最下面的 deploy 配置項，改爲以下的樣式（其中 yourname 爲在兩個平臺的用戶名）。

deploy:
  type: git
  repo:
    coding: git@git.coding.net:airbird/yourname.git
    GitHub: git@GitHub.com:CNairbird/yourname.GitHub.io.git
  branch: master

我看有些博文中也有在 repo 項直接使用url形式的，相似這種

https://GitHub.com/yourname/yourname.GitHub.io.git

可是我在搭建過程當中這種寫法卻遇到了一些問題，未能成功，建議仍是使用上面提到的第一種方法。更改完成後保存關閉文件，

網站部署

以後在命令行中鍵入部署命令將 HEXO 博客的內容部署到網站上。

hexo d  # 部署（部署到 Coding 與 GitHub 上）

執行完成後，（1）Github 上的就能夠在瀏覽器中鍵入 yourname.github.io 進行博客的打開了；（2）Coding 上網址通常爲 yourname.coding.me。

其中：若是你的項目名稱跟你 coding 的用戶名同樣，好比個人用戶是叫 airbird ,博客項目名也叫 airbird .那直接訪問 airbird.coding.me 就能訪問博客，不然就要帶上項目名 airbird.coding.me/項目名 才能訪問。所以咱們前面纔會推薦項目名跟用戶名同樣，這樣就能夠省略項目名了

到這裏，HEXO + Git 的部署以及博客的基本搭建就完成了。

域名解析

若是你入手了一個域名，想要將域名解析到你的 HEXO + GitHub 博客地址，那要怎麼作呢？

設置CNAME

在博客目錄下的 source 文件夾下，建立一個 CNAME 的文件，裏面內容設定爲你的域名，個人就是

www.airbird.info

域名解析

在你的域名解析商處添加解析信息，添加這樣的兩條解析內容。只須要將你的記錄值按照你本身的更改成 yourname.github.io 和 yourname.coding.me 便可。

這裏我使用的解析服務是 DNSPod，這裏因人而異，你的多是域名購買商自己的解析服務也多是別的地方的解析服務，不過更改的辦法都是大同小異。解析更改到開始運行都有着必定的等待刷新時間，還請耐心等待。不過我使用 DNSPod 來看，仍是很快的，不一會就能夠經過自有域名進入到你的博客了。

注意這裏國內使用 Coding，國外使用 GitHub 哦。

書寫一篇博文

在 HEXO 框架下，書寫博文首先須要在命令行中鍵入

hexo new "postname"

它會在博客文件下 source/_posts 路徑下生成一個 「postname.md」 的 Markdown 文檔供你保存。

固然你也能夠將編輯完成的md文件直接複製進來，它同樣會顯示在網站上。注意，這裏在網站上的顯示順序是按照文檔的第一次部署時間排序後進行顯示的。

這裏的md文檔和通常的md文檔還有些微的差異，好比在文章的開頭須要有着標題、分類、標籤這些消息。相似下面的這種。

---
title: post title（這裏是文章顯示的標題）
categories:
  - cate（文章的分類）
tags:
  - tag1（文章標籤）
  - tag2（文章標籤）
---

博文內容...

在每次添加內容後，最好都在命令行中使用如下3個命令來保證頁面信息的同步。

hexo clean  # 清除以前 public 文件夾的內容
hexo g        # 生成靜態的 public 文件夾，部署時候也是直接拷貝此文件夾裏的文件。
hexo d        # 部署到 GitHub 上

部署完成後就能夠刷新頁面進行查閱了。

HEXO經常使用命令

單條指令

hexo new "postName"           # 新建文章
hexo new page "pageName"    # 新建頁面
hexo clean                      # 清除以前 public 文件夾的內容
hexo generate                 # 生成靜態頁面至 public 目錄
hexo deploy                     # 將 .deploy 目錄部署到 GitHub
hexo server                     # 開啓預覽訪問端口（默認端口 4000，'ctrl + c'關閉 server）
hexo help                     # 查看幫助
hexo version                  # 查看 HEXO 的版本

簡寫指令

hexo n == hexo new
hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo v == hexo version

複合指令

hexo deploy -g           #生成加部署
hexo server -g           #生成加預覽
hexo d --g / hexo g --d  #生成加部署

參考感謝

[1] hexo你的博客
[2] 史上最詳細的Hexo博客搭建圖文教程
[3] Hexo + Git 搭建免費的我的博客
[4] HEXO+GitHub,搭建屬於本身的博客
[5] Hexo搭建GitHub靜態博客
[6] Hexo博客同時部署至GitHub和Coding