本系列有五篇：分別是
【一】Ubuntu14.04+Jekyll+Github Pages搭建靜態博客：主要是安裝方面
【二】jekyll 的使用 ：主要是jekyll的配置
【三】Markdown+jekyll在Gitpages上寫blog的經常使用操做 ：主要Markdown的使用javascript
【四】搭建Markdown的編輯器 html
【五】將博客從jekyll遷移到了hexo前端
目錄：
1、靜態博客：java
2、關於hexo和jekyllnode
3、Hero的安裝jquery
1、靜態博客：
2、關於hexo和jekyll
如今人氣比較高的的靜態博客系統有Jekyll，Hexo，Octopress等。Octopress是在Jekyll上的一個框架，網上褒貶不一，並且意見有點極端，說它好的人愛到簡直是沒了它不行，說它很差的人貶地一無可取。最終我試用了一下Jekyll跟Hexo。git
hexo和jekyll同樣都是個靜態網站生成工具，hexo是一個臺灣小夥使用nodejs開發的，jekyll則是用ruby開發，github內置了jekyll，能夠直接將jekyll相關的文件提交到github，github會自動給你生成靜態頁面。程序員
hexo因爲採用nodejs開發的，所以須要在本地生成靜態頁面後在提交到github，不過hexo內置了hexo deploy命令，提交博客也是挺方便的。github
以前使用jekyll搭建的我的博客，因爲jekyll對分頁和文章摘要支持的不是很好，瞭解一下hexo這個新東西，感受其頁面生成速度仍是蠻不錯的，對分頁和文章摘要也支持的挺好，主要是小清新的light主題吸引了我，因而乎，立刻有種把博客遷移到hexo的念頭。web
一、Jekyll應該是如今最火的靜態博客系統了，從Github Pages支持Jekyll上就能看出來。所謂Github Page支持Jekyll，並非說Github Page上面能夠放Jekyll的博客而不能放Hexo的博客，而是說Github Page支持直接上傳Jekyll的源文件，由Github Pages的服務器生成靜態頁面，無需在本地生成好後再上傳。這樣就能利用Github強大的版本管理功能維護博客內容、皮膚、設置之類的東西，而別人clone下來的也再也不只是博客的HTML文件，而是包括皮膚、設置、文章等源文件。從開源的角度講，更加方便了別人「拿來主義」你的東西，固然也方便了你「拿來主義」別人的東西。我如今用到的皮膚、搜索功能就是從別人那裏clone下來的。
關於Jekyll的使用教程網上不少，官網的文檔其實也很詳細，詳細請參考如下博文：
【一】Ubuntu14.04+Jekyll+Github Pages搭建靜態博客：主要是安裝方面
【二】jekyll 的使用 ：主要是jekyll的配置
【三】Markdown+jekyll在Gitpages上寫blog的經常使用操做 ：主要Markdown的使用
Jekyll功能很強大，可是用起來比較麻煩，若是懂一點HTML、JS的語法，用起來會更加駕輕就熟。在Jekyll中，修改、使用皮膚的方式仍是屬於比較原始，在基本的框架下，沒有辦法同時保有多套皮膚、並方便的切換皮膚。另外，我的感受Jekyll的皮膚相對於Hexo來講，廣泛功能都簡單一些。估計也就是由於Jekyll易用性的不足，纔會有不少基於Jekyll的框架，好比OctoPress。
二、Hexo是一個臺灣人寫的基於Node.JS的靜態博客框架。聽說他最初之因此要寫Hexo，是由於受不了OctoPress的生成速度，二者的頁面生成速度聽說是百倍級的差距。
相比於Jekyll，Hexo就更像是一套博客系統了，在設計之初就實現了文章與皮膚的分離。在Hexo裏面有專門的皮膚目錄，把皮膚放進去以後，只須要在_config.yml文件中寫上theme: xxx 就能指定皮膚。易用性帶來的是靈活性的不足，在Hexo中，只有皮膚相關的文件能執行函數，包含文章內容的markdown文件是沒法執行函數的。
若是想在一篇文章中插入另一篇文章的連接，直接插入那篇文章的固定連接固然能夠，可是若是被應用文章的固定連接變了，添加的連接就失效了。爲此，Jekyll提供了一種方法，就是在文章中調用post_url函數，{% post_url /subdir/2010-07-21-name-of-post %}。在Hexo中，想實現相似的功能就須要添加插件了。
引用知乎裏一我的的說法，靜態博客不是爲 hacker 作的，是爲」薩比西」的人作的。相比之下，Jekyll比Hexo更加」薩比西」。
3、Hero的安裝
（1）安裝需求
安裝 Hexo 相當簡單；然而，在安裝前您必須先檢查下列您的電腦是否已經安裝下列軟體：
若您的電腦已經安裝上述的必備軟體，那麼恭喜您！只須要透過 npm 便可完成 Hexo 的安裝。
$ sudo npm install -g hexo-cli
|
若是您的電腦還沒有安裝必備軟體的話，請根據下列的安裝指示來完成安裝。
（2）安裝 Git
- Windows：下載並安裝 git.
- Mac：使用 Homebrew, MacPorts 或 安裝程式 安裝。
- Linux (Ubuntu, Debian)：
sudo apt-get install git-core
- Linux (Fedora, Red Hat, CentOS)：
sudo yum install git-core
（3）安裝 Node.js
安裝 Node.js 的最佳方式是透過 nvm。
cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
|
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
|
一旦安裝完成，重啟終端機並執行下列指令以安裝 Node.js。
或者您也能夠下載 安裝程式 來安裝。
【Ubuntu用戶】在Ubuntu上，能夠經過apt-get 安裝
sudo apt-get install nodejs
（3）安裝npm
npm是node.js的一個包管理器，由於Hero是Note.js作的，因此須要經過這個包管理器下載。
貌似官網上說安裝了Node.js就能夠直接使用npm程序來安裝包，可是我在Ubuntu14.04上測試好像要再手動安裝下npm，以下：
（4）安裝hexo
一旦全部的必備軟體都安裝完畢後，便可透過 npm 安裝 Hexo。
$ sudo npm install -g hexo-cli
|
(5)測試是否安裝成功：
輸入hexo -v ，若是以下顯示，代表正常
若是出現異常，請參考最後面的【異常1】
4、Hexo的配置和部署
一、一旦 Hexo 完成後，請執行下列指令，Hexo 會在指定資料夾中創建全部您須要的檔案。
$ hexo init <folder>
$ cd <folder>
$ npm install
|
創建完成後，專案資料夾會有下列檔案：
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes
|
_config.yml：跟Jekyll同樣，hexo的配置文件也是根目錄下的_config.yml，可配置內容至關多，能夠在官方文檔Configuration裏查看詳細解釋。
package.json
應用程式資料。EJS, Stylus 和 Markdown renderer 已預設安裝，您能夠稍後移除。
package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.0.0",
"hexo-generator-archive": "^0.1.0",
"hexo-generator-category": "^0.1.0",
"hexo-generator-index": "^0.1.0",
"hexo-generator-tag": "^0.1.0",
"hexo-renderer-ejs": "^0.1.0",
"hexo-renderer-stylus": "^0.2.0",
"hexo-renderer-marked": "^0.2.4",
"hexo-server": "^0.1.2"
}
}
|
scaffolds
鷹架 資料夾。當您創建新文章時，Hexo 會根據 scaffold 來創建檔案。
scripts
腳本 資料夾。腳本是擴充 Hexo 的最簡易方式，在此資料夾內的 JavaScript 檔案會被自動執行。
source
原始檔案資料夾是放置內容的地方。檔案 / 資料夾名稱開頭為 _ (底線) 和隱藏檔案會被忽略，除了_posts 資料夾之外。Markdown 和 HTML 檔案會被處理並放到 public 資料夾，而其餘檔案會被拷貝過去。
themes
主題 資料夾。Hexo 會根據主題來產生靜態檔案。
init
創建一個新的網站。若是沒有設定 folder 的話，Hexo 會在目前的資料夾創建網站。
new
$ hexo new [layout] <title>
|
創建一篇新的文章。若是沒有設定 layout 的話，則會使用 _config.yml 中的 default_layout 設定代替。若是標題包含空格的話，請使用引號括起來。
generate
產生靜態檔案。
| 選項 |
描述 |
-d, --deploy |
產生完成即部署網站 |
-w, --watch |
監看檔案變更 |
publish
$ hexo publish [layout] <filename>
|
發表草稿。
server
啟動伺服器。
| 選項 |
描述 |
-p, --port |
覆蓋連接埠設定 |
-s, --static |
只使用靜態檔案 |
-l, --log |
啟動記錄器，或覆蓋記錄格式 |
deploy
部署網站。
| 選項 |
描述 |
-g, --generate |
部署網站前先產生靜態檔案 |
render
渲染檔案。
migrate
從其餘系統 轉移內容。
clean
清除快取檔案 (db.json) 和已產生的靜態檔案 (public)。
list
列出網站資料。
version
顯示版本資訊。
選項
安全模式
在安全模式下，不會載入外掛和腳本。當您在安裝新外掛後遭遇問題時，能夠嘗試以安全模式從新執行。
除錯模式
在終端機中顯示除錯訊息並儲存記錄檔到 debug.log。當您碰到問題時，試著以除錯模式從新執行一次，並把除錯訊息貼到 GitHub。
安靜模式
隱藏終端機的訊息。
自定配置檔的路徑
$ hexo --config custom.yml
|
自訂配置檔的路徑而不是使用 _config.yml。
顯示草稿
顯示 source/_drafts 資料夾中的草稿文章。
自定 CWD
$ hexo --cwd /path/to/cwd
|
自定目前工做目錄（Current working directory）的路徑。
二、寫做：參考【官方】
接下來，我們要在網誌中創建第一篇新文章，您能夠直接從現有的範例文章「Hello World」改寫，但我們更建議您學習 new 指令。
$ hexo new [layout] <title>
|
您能夠在指令中指定文章的佈局（layout），預設為 post，您能夠透過修改 _config.yml 中的default_layout 設定來指定預設佈局。
我將新建文章的名字格式改成和jekyll的相似，便於按照時間排序：（在_config.yml中修改）
new_post_name: :year-:month-:day-:title.md
Disqus的名字必需要正確，否則是沒法拿到你的評論的，能夠登陸disqus查看你的名稱。
三、修改主題
【強烈推薦】NexT主題，很是漂亮。
hexo默認主題不是特別好看，不過Themes裏面列出了至關多不錯的主題，這裏我選擇了alberta，而後對其進行了進一步的簡化。
主題的安裝、使用簡單的不能再簡單了，這裏再也不囉嗦，主要寫一下我對主題的刪減、修改部分吧：
- 刪去開始部分的圖片（加載起來浪費時間）
- 刪掉頁面底部的版權說明（這玩意兒沒人看吧）
- 刪掉很炫的fancybox（這麼炫，我不敢用）
- 去掉分享文章的連接（又不是雞湯文，沒人會分享的）
- 部署國內CND（jquery和google字體…喪心病狂！）
- 修改了blockquote，code，table的樣式。
修改後的效果如圖：
你能夠在這裏fork哦。前面說過我不是很會前端的Css、JavaScript，可是仍然能對Theme進行刪減，說明Theme這塊可讀性是多麼的好，因此你能夠放心去定製本身的Theme吧。
順便提一下，360的CDN不錯，算是作了一件好事啊！
四、強大的插件
一、官方插件：https://hexo.io/plugins/
以前用jekyll博客系統時，爲了實現訂閱功能，用google找到一段「神奇」的代碼，能夠生成feed.xml頁面。可是要添加訂閱，必須輸入blog.com/feed.xml，只輸入主頁地址blog.com是不行的。而後困擾了許久，才找到RSS Auto-discovery這篇文章，成功解決問題。
我只是想實現訂閱功能而已，jekyll卻逼着我瞭解了許多RSS協議的內容，好吧，誰讓本身不是全棧工程師呢。而hexo對我這種新手都很友好，我要實現訂閱，只須要使用hexo-generator-feed插件便可，我才懶得去了解你怎麼實現訂閱呢。
插件的安裝卸載一條命令就能搞定，詳細的插件列表能夠看Plugins。
不過在這裏被坑了一次，文檔中並無說EJS, Stylus和Markdown renderer被移出核心模塊，因此按照文檔方法安裝hexo後，根本不可以生成靜態文件，後來看到Issue 620才知道怎麼回事。
因此提醒一下，你須要手動安裝EJS, Stylus和Markdown renderer：
$ npm install hexo-renderer-ejs
對了，還有Tag Plugins，能夠容許你在博客裏面引用其餘站點的內容。好比要引用jsFiddle中的代碼片斷，只須要 {% jsfiddle shorttag [tabs] [skin] [width] [height] %}，或者是用{% gist gist_id [filename] %} 引入gist中的內容。
二、Hexo上使用MathJax來實現數學公式的表達——Hexo MathJax插件
【方法一】參考官方文檔——數學公式
NexT 藉助於 MathJax 來顯示數學公式，此選項默認關閉。
編輯 主題配置文件(theme/next/_config.yml)，將 mathjax 設定爲 true 便可。
# MathJax Support mathjax:ture
ProTip: 使用七牛 CDN 來加速 MathJax 腳本的加載
【方法二】
參考：
【Hexo MathJax插件】
【Hexo上使用MathJax來實現數學公式的表達】
原生的Hexo是不支持數學公式的顯示的，但據說過Latex因此在網上搜教程來着，大部分搜到的渲染公式的方法都分爲兩個步驟：
- 在theme的header中插入對MathJax CDN script的引用，並配置inline math；
- 在文章中用inline math插入公式。
- 但其中彷佛存在兩個缺點：
- 須要人肉進行的工做太多；
- 遇到特殊符號須要人肉escape，不然會被markdown parser吃掉。
具體可參考【【三】用Markdown寫blog的經常使用操做——>公式】
咱們這裏直接引用了CATX開發的一款插件來實現這個功能。
安裝與初始化
$ npm install hexo-math --save
在blog文件夾中執行：
在_config.yml中添加：
部署完以後，相關的ejs等文件就會自動生成在你的theme相應的文件夾裏了。
使用
簡單的公式：
Simple inline $a = b + c$.
效果：
Simple inline a=b+c'>a=b+c.
複雜一點的獨立公式：
$$\frac{\partial u}{\partial t}
= h^2 \left( \frac{\partial^2 u}{\partial x^2} +
\frac{\partial^2 u}{\partial y^2} +
\frac{\partial^2 u}{\partial z^2}\right)$$
效果：
∂u∂t=h2(∂2u∂x2+∂2u∂y2+∂2u∂z2)'>
$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta - 1$
效果：
cos⁡2θ=cos2⁡θ−sin2⁡θ=2cos2⁡θ−1'>
最後來個牛逼的吧，薛定諤方程，大學物理考試貌似還複習過這個公式，雖然如今已經記不清是什麼意思來着了：
$$ i\hbar\frac{\partial \psi}{\partial t}
= \frac{-\hbar^2}{2m} \left(
\frac{\partial^2}{\partial x^2}
+ \frac{\partial^2}{\partial y^2}
+ \frac{\partial^2}{\partial z^2}
\right) \psi + V \psi.$$
注意
-
對了，在書寫的過程當中碰到了幾個頭疼的問題在這裏記錄一下，防止之後犯錯：
-
Markdown會將一些標記給編譯掉，因此在打{時不能知只打\{，須要再加一個斜線來編譯，即\\{。由於\{在markdown編譯的時候成了{，而後mathjax再編譯就……必定記着編譯過程有兩次：第一次markdown，第二次mathjax。
-
編寫帶有下標的公式時要在下劃線前加上\，好比x_i應該寫成x_i。
-
數學公式屬於符號後面應該有個空格：x_i\in C。
- 寫行間公式時，注意換行是四個斜槓（即\\\\），打兩個（即\\）的話可能解析出錯。
五、開始優雅地寫博客吧
能夠用hexo new "blog_name"來新建一篇文章，文章藏在source/_posts裏面。咱們能夠在scaffolds裏面設置生成新博客的模板，好比文章(layout: post)的模板post.md能夠改成以下內容：
title: 更換博客系統——從jekyll到hexo
date: 1417276800000
tags:
category:
-–
這裏文章有兩種layout，以下：
| Layout |
Destination |
| post(Default) |
source/_posts |
| page |
source |
post用來放文章，page能夠用來放一些好比「關於我」，「友情連接」，「404頁面」之類的頁面。GitHub Pages 自定義404頁面很是容易，直接在根目錄下建立本身的404.html就能夠。可是自定義404頁面僅對綁定頂級域名的項目才起做用，GitHub默認分配的二級域名是不起做用的，使用hexo server在本機調試也是不起做用的。
目前有以下幾個公益404接入地址，我選擇了騰訊的。404頁面，每一個人能夠作的更多。
只須要在source目錄添加404.html文件便可，文件內容爲：
layout: false
---
<!DOCTYPE html> <html lang="en"> <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>
必定要設置layout:false(還有三個短橫線)，否則會被hexo解析。
寫完以後，能夠用hexo generate生成靜態文件，而後用hexo server運行本地服務器，查看效果。若是發現有問題，在md文件改了以後，刷新頁面就能夠看到更改的效果了（是否是比jekyll強大啊）。
更多用hexo寫文章的內容能夠看官方文檔：Create a New Post。
本身以前寫了十幾篇文章，只須要將開頭部分稍做改動便可直接遷移到hexo中，文章數目比較少，因此就手動更改文章頭了。
hexo中還提供了其餘的命令，能夠看Commands。
Hexo 提供了快速方便的一鍵佈署功能，讓您只需一個指令就能將網站佈署到伺服器上。
在開始以前，您必須先在 _config.yml 中修改設定，一個正確的部署設定中至少要有 type 欄位，例如：
您可同時使用多個 deployer，Hexo 會依照順序執行每個 deployer。
deploy:
- type: git
repo:
- type: heroku
repo:
|
Git
安裝 hexo-deployer-git。
$ npm install hexo-deployer-git --save
|
修改設定。
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]
|
| 選項 |
描述 |
repo |
儲存庫（Repository）網址，特別注意是SSH的地址不是Http的 |
branch |
分支名稱。若是您使用的是 GitHub 或 GitCafe 的話，程式會嘗試自動偵測。 |
message |
自定提交訊息 (預設是 Site updated: {{ now("YYYY-MM-DD HH:mm:ss") }}) |
【注意】hexo使用ssh部署，因此首先要肯定已經安裝和配置好ssh與git的連接，否則部署會出現受權問題，詳細請參考【git配置ssh（github）】
repo的地址的ssh 的地址也要注意是SSH的，能夠在github上覆制
輸入hexo d 或者hexo deploy,會自動生成靜態文件而後進行部署
成功。。。。經過github page訪問。。
七、遷移Disqus評論
hexo生成的的文章url中時間格式爲/2013/11/22/，而以前博客的url中時間爲2013-11-22，致使以前文章的評論就消失了。
好在Disqus容許咱們遷移博客評論，具體方法能夠看Help: Migration Tools。原理其實很簡單，Disqus評論默認將文章url做爲標識符，每一個url對應該文章的評論，遷移時咱們只須要創建起新舊文章地址的對應關係便可。
八、綁定域名
改了博客界面以後，順便註冊了一個域名，綁定github博客中。你能夠在free domains域名免費註冊裏選擇本身喜歡的域名，而後申請（免費）。申請成功以後，添加兩條域名解析A記錄，以下圖：
而後能夠用dig命令(固然也能夠用nslookup)驗證域名記錄是否生效：
$ dig zhaofei.tk +nostats +nocomments +nocmd
; <<>> DiG 9.8.3-P1 <<>> zhaofei.tk +nostats +nocomments +nocmd ;; global options: +cmd ;zhaofei.tk. IN A zhaofei.tk. 14439 IN A 192.30.252.153 zhaofei.tk. 14439 IN A 192.30.252.154
而後在本身的博客倉庫根目錄新建名爲CANME的文件，裏面內容爲你的域名地址。
若是沒有綁定成功，能夠看github的幫助文檔：My custom domain isn’t working。
還有添加到搜索引擎，站點數據統計等，準備折騰完再記錄一下。
遇到的一些問題
一、異常1：/usr/bin/env: node: No such file or directory(運行hexo的時候，提示找不到node文件)
解決方法：參考：【run npm command gives error "/usr/bin/env: node: No such file or directory" 】
I've found this is often a misnaming error, if you install from a package manager you bin may be called nodejs so you just need to symlink it like so "ln -s /usr/bin/nodejs /usr/bin/node"
這是因爲hexo調用hexo的時候是用node這個名字，而咱們安裝nodejs時是默認安裝了nodejs這個名字，因此提示node這個文件不存在，咱們能夠以下檢驗。
爲了解決問題，咱們只需爲nodejs增長一個叫node的軟連接，命令以下：
sudo ln -s /usr/bin/nodejs /usr/bin/node
問題解決。。。從新打入hexo -v，正常：
二、文章摘要設置
hexo和jekyll同樣，都支持使用markdown編寫文章，hexo的文章保存在source/_post目錄下。
須要注意的是，在編寫markdown文檔是，在文檔中插入<!--more-->就能夠將文章切分開了，more以上的部分會已摘要的形式顯示，當查看全文是more一下的部分也會顯示出來。
三、圖片路徑問題
這個也很簡單，直接將圖片文件夾放到source目錄下便可。
同理將favicon.ico和CNAME（github支持在CNAME文件中加入自定義域名，經過自定義的域名訪問本身的網站）也放到source目錄。
參考：
將博客從jekyll遷移到了hexo
更換博客系統——從jekyll到hexo
hexo你的博客
Tips for configuring an A record with your DNS provider
HEXO 指定404頁面
