hexo搭建靜態博客

 

1. 環境環境

1.1 安裝Git

請參考【1】

1.2 安裝node.js

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

能夠下載 node-v0.10.33-x64.msi

安裝時直接保持默認配置便可。

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: git@github.com:zhchnchn/zhchnchn.github.io.git branch: master

NOTE1:

Repository：必須是SSH形式的 url（git@github.com: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: 115063497@qq.com\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:XXX@qq.com language:zh-CN

正確的設置：

author: Zhchnchn email: XXX@qq.com 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。

2. 安裝

$ npm install hexo-generator-feed

3. 啓用，修改Hexo\_config.yml，增長如下內容

# 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)