本系列有五篇：分别是
【一】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页面
