Hexo搭建Github靜态部落格

1. 環境環境

1.1 安裝Git

請參考【1】

1.2 安裝node.js

下載下傳：http://nodejs.org/download/

可以下載下傳 node-v0.10.33-x64.msi

安裝時直接保持預設配置即可。

NOTE：Hexo 3.9.0要求nodejs版本>6.9.0

Ubuntu下，直接執行下面的指令安裝即可：

sudo apt-get install nodejs

sudo apt-get install npm

2. 配置Github

1.1 建立Repository

建立與你使用者名對應的倉庫，倉庫名必須為【your_user_name.github.io】

1.2 配置SSH-Key

參考【1】

3. 安裝Hexo

關于Hexo的安裝配置過程，請以官方Hexo【2】給出的步驟為準。

3.1 Installation

打開Git指令行，執行如下指令

$ npm install -g hexo      

3.2 Quick Start

 1. Setup your blog

在電腦中建立一個名字叫「Hexo」的檔案夾（比如我建在了D:\Hexo），然後在此檔案夾中右鍵打開Git Bash。執行下面的指令

$ hexo init
[info] Copying data
[info] You are almost done! Don't forget to run `npm install` before you start b
logging with Hexo!      

Hexo随後會自動在目标檔案夾建立網站所需要的檔案。然後按照提示，運作 npm install（在 /D/Hexo下）

npm install      

會在D:\Hexo目錄中安裝 node_modules。

2. Start the server

運作下面的指令（在 /D/Hexo下）

$ hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.      

表明Hexo Server已經啟動了，在浏覽器中打開 http://localhost:4000/，這時可以看到Hexo已為你生成了一篇blog。

你可以按Ctrl+C 停止Server。

3. Create a new post

新打開一個git bash指令行視窗，cd到/D/Hexo下，執行下面的指令

$ hexo new "My New Post"
[info] File created at d:\Hexo\source\_posts\My-New-Post.md      

重新整理http://localhost:4000/，可以發現已生成了一篇新文章 "My New Post"。

NOTE：

有一個問題，發現 "My New Post" 被發了2遍，在Hexo server所在的git bash視窗也能看到create了2次。

$ hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
[create] d:\Hexo\source\_posts\My-New-Post.md
[create] d:\Hexo\source\_posts\My-New-Post.md      

經驗證，在hexo new "My New Post" 時，如果按Ctrl+C将hexo server停掉，就不會出現發2次的問題了。

是以，在hexo new文章時，需要stop server。

4. Generate static files

執行下面的指令，将markdown檔案生成靜态網頁。

$ hexo generate      

該指令執行完後，會在 D:\Hexo\public\ 目錄下生成一系列html，css等檔案。

5. 編輯文章

hexo new "My New Post"會在D:\Hexo\source\_posts目錄下生成一個markdown檔案：My-New-Post.md

可以使用一個支援markdown文法的編輯器（比如 Sublime Text 2）來編輯該檔案。

6. 部署到Github

部署到Github前需要配置_config.yml檔案，首先找到下面的内容

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:      

然後将它們修改為

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github
  repository: [email protected]:zhchnchn/zhchnchn.github.io.git
  branch: master      

NOTE1:

Repository：必須是SSH形式的url（[email protected]:zhchnchn/zhchnchn.github.io.git），而不能是HTTPS形式的url（https://github.com/zhchnchn/zhchnchn.github.io.git），否則會出現錯誤：

$ hexo deploy
[info] Start deploying: github
[error] https://github.com/zhchnchn/zhchnchn.github.io is not a valid repositor URL!      

使用SSH url，如果電腦沒有開放SSH 端口，會緻部署失敗。

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.      

NOTE2：

如果你是為一個項目制作網站，那麼需要把branch設定為gh-pages。

7. 測試

當部署完成後，在浏覽器中打開http://zhchnchn.github.io/（https://zhchnchn.github.io/） ，正常顯示網頁，表明部署成功。

8. 總結：部署步驟

每次部署的步驟，可按以下三步來進行。

hexo clean
hexo generate
hexo deploy      

9. 總結：本地調試

1. 在執行下面的指令後，

$ hexo g #生成
$ hexo s #啟動本地服務，進行文章預覽調試      

浏覽器輸入http://localhost:4000，檢視搭建效果。此後的每次變更_config.yml 檔案或者建立檔案都可以先用此指令調試，尤其是當你想調試新添加的主題時。

2. 可以用簡化的一條指令

hexo s -g      

3.3 指令總結

3.3.1 常用指令

hexo new "postName" #建立文章
hexo new page "pageName" #建立頁面
hexo generate #生成靜态頁面至public目錄
hexo server #開啟預覽通路端口（預設端口4000，'ctrl + c'關閉server）
hexo deploy #将.deploy目錄部署到GitHub
hexo help  # 檢視幫助
hexo version  #檢視Hexo的版本
      

3.3.2 複合指令

hexo deploy -g           #生成加部署           

hexo server -g           #生成加預覽           

指令的簡寫為：

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

4 配置Hexo

4.1 配置檔案介紹

下面的各個部分的介紹，請直接參考【3】。

1. 預設目錄結構介紹

2. _config.yml配置檔案介紹

NOTE：在修改_config.yml配置檔案時，按照【3】的介紹進行修改後，重新 hexo clean 或者hexo deploy時，可能會出現如下錯誤：

$ hexo clean
[error] { name: 'HexoError',
  reason: 'can not read a block mapping entry; a multiline key may not be an imp
licit key',
  mark:
   { name: null,
     buffer: '# Hexo Configuration\n## Docs: http://hexo.io/docs/configuration.h
tml\n## Source: https://github.com/hexojs/hexo/\n\n# Site\ntitle: Zhchnchn\nsubt
itle: Coding on the way\ndescription: Zhchnchn\'s blog\nauthor: Zhchnchn\nemail:
[email protected]\nlanguage:zh-CN\n\n# URL\n## If your site is put in a subdirect
......
,
     position: 249,
     line: 12,
     column: 0 },
  message: 'Config file load failed',
  domain:
   { domain: null,
     _events: { error: [Function] },
     _maxListeners: 10,
     members: [ [Object] ] },
  domainThrown: true,
  stack: undefined }      

我的_config.yml配置檔案是一個空行，是以錯誤肯定在前面，經過對比發現，我前面修改了一下 # Site的各項設定，在冒号:後面沒留白格導緻了該問題，請對比一下下面的差別：

錯誤的設定：

author:Zhchnchn
email:[email protected]
language:zh-CN      

正确的設定：

author: Zhchnchn
email: [email protected]
language: zh-CN      

3. 各個主題下的目錄介紹（hexo\themes\下的modernist主題為例）

4.2 安裝主題

Hexo提供了很多主題，具體可參見Hexo Themes【4】。這裡我選擇使用Pacman主題。具體設定方法如下【5】

4.2.1 安裝

1. 将Git Shell 切到/D/Hexo目錄下，然後執行下面的指令，将pacman下載下傳到 themes/pacman 目錄下。

$ git clone https://github.com/A-limon/pacman.git themes/pacman      

2. 修改你的部落格根目錄/D/Hexo下的config.yml配置檔案中的theme屬性，将其設定為pacman。

3. 更新pacman主題

cd themes/pacman
git pull      

NOTE：先備份_config.yml 檔案後再更新

4.2.2 配置

如果pacman的預設設定不能滿足需要的話，你可以修改 /themes/pacman/下的配置檔案_config.yml來定制。

各個config的含義，請參考【5】中的介紹。

4.2.3 評論框

靜态部落格要使用第三方評論系統，pacman配置了多說評論系統（/themes/pacman/_config.yml），預設關閉，隻要将其打開即可:false->true。直接用你的微網誌/豆瓣/人人/百度/開心網帳号登入多說，即可發表平評論。

#### Comment
duoshuo: 
  enable: true  ## duoshuo.com
  short_name:    ## duoshuo short name.      

4.2.3 統計

1.  pacman配置了google analysis系統（/themes/pacman/_config.yml），預設關閉，将其打開。

2. 需要注冊google analysis服務，以獲得 跟蹤 ID。

如果已有google賬戶的話，可以直接注冊。注冊時，需要正确填寫 網站的URL。注冊成功後，會得到一個跟蹤ID，以及一段跟蹤代碼。

3. pacman配置了google analysis系統，将其打開

#### Analytics
google_analytics:
  enable: true
  id: UA-57032437-1  ## e.g. UA-1766729-8 your google analytics ID.
  site: auto ## e.g. yangjian.me your google analytics site or set the value as auto.      

4. 在themes\pacman\layout\_partial\google_analytics.ejs 中，已經将google的跟蹤代碼添加進來了【3】。

<% if (theme.google_analytics.enable){ %>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%= theme.google_analytics.id %>', '<%= theme.google_analytics.site %>');  
ga('send', 'pageview');
</script>
<% } %>      

而且會将/themes/pacman/_config.yml中的id和site值讀取進來。

5. 如果設定不起作用，請試試在\themes\pacman\layout\_partial\head.ejs檔案中最後，</head>之前，添加上下面的語句試試。

<%- partial('google_analytics') %>      

4.3 Custom 404頁面

1. 網上大多數教程都将其說的極其簡單：“直接在根目錄下建立自己的 404.html 就可以”。但我卻在這兒廢了不少時間，究其原因是大家覺得太簡單而說的不夠明白。“根目錄下”指的不是Hexo目錄下，而是Hexo/source目錄下。

2. 404.html的内容可以設定為下面的内容【6】（NOTE： _config.yml中的permalink_defaults屬性不需要修改）。

---
layout: default
---
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>                                                                                                                                        
    </head>
    <body>
         <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>
    </body>
</html>      

也可以簡化為這一行：

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>      

4.4 安裝插件

4.4.1 sitemap插件

1. 可以将你站點地圖送出給搜尋引擎，檔案路徑\sitemap.xml。

2. 安裝

$ npm install hexo-generator-sitemap      

3. 啟用，修改Hexo\_config.yml，增加以下内容

# Extensions
Plugins:
- hexo-generator-sitemap

#sitemap
sitemap:
  path: sitemap.xml      

4. 使用方法

（1）通路 http://localhost:4000/sitemap.xml，即可看到站點地圖。

（2）那麼怎麼将它顯示在頁面中呢【7】？

可以修改themes/pacman（也就是你正在使用的那個theme）下的 _config.yml，在 menu 節點下添加下面的内容（下面要介紹的RSS插件也同樣）

menu:
  Home: /
  Archives: /archives
  Rss: /atom.xml
  Sitemap: /sitemap.xml      

修改後的效果如圖所示：

5. 如何向google送出sitemap

Sitemap 可友善管理者通知搜尋引擎他們網站上有哪些可供抓取的網頁。向google送出自己hexo部落格的sitemap，有助于讓别人更好地通過google搜尋到自己的部落格。

如何向google送出sitemap，請參考【8】。

6. 更新插件

$ npm update      

7. 解除安裝插件

$ npm uninstall hexo-generator-sitemap      

4.4.2 feed插件

1. RSS的生成插件，你可以在配置顯示你站點的RSS，檔案路徑\atom.xml。

$ npm install hexo-generator-feed      

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
      

4.使用方法

參見sitemap插件介紹

5. 優化Hexo

5.1 添加“Fork me on Github” ribbon

給blog首頁添加一個“Fork me on Github”的绶帶（ribbon）【9】，比如選擇了紅色的ribbon，将相應代碼複制到Hexo正在使用的theme下layout.ejs中。比如我使用的pacman theme，那麼将下面的代碼（注意将you改為你自己的github上的注冊名）

<a href="https://github.com/zhchnchn"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>      

粘貼到 themes\pacman\layout\layout.ejs中，放置在 最後，标簽</body>之前即可。

6 其他

6.1 中文亂碼

在md 檔案中寫中文内容，釋出出來後為亂碼，原因是md的編碼不對，将md檔案另存為“UTF-8”編碼的檔案即可解決問題。

References

【1】Windows下Git安裝指南（http://www.cnblogs.com/zhcncn/p/3787849.html）

【2】Hexo （https://github.com/hexojs/hexo）

【3】hexo你的部落格（http://ibruce.info/2013/11/22/hexo-your-blog/）

【4】Hexo All Themes（https://github.com/hexojs/hexo/wiki/Themes）

【5】Pacman主題介紹（http://yangjian.me/pacman/hello/introducing-pacman-theme/）

【6】hexo添加404頁面(http://ruocaiwu.github.io/2014/08/14/hexo%E6%B7%BB%E5%8A%A0404%E9%A1%B5%E9%9D%A2/)

【7】如何搭建一個獨立部落格——簡明Github Pages與Hexo教程（http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/）

【8】如何向google送出sitemap（詳細）(http://fionat.github.io/blog/2013/10/23/sitemap/)

【9】GitHub Ribbons(https://github.com/blog/273-github-ribbons)