受到野子Joey的文章的启发，我也开始研究Jekyll了!
在研究过程中遇到了不少问题，但是在折腾的过程中也锻炼了前端开发能力，而且看着自己的博客一点一点成型，最后运行在github上，确实很有成就感!。
目前初步建立了自己的Jekyll博客,研究了好几天Jkeyll如何运作以及如何进行各种个性化设置。

首先是安装

这一步很简单,只需在终端输入:

$ sudo gem install jekyll

创建一个简单的博客并运行:

$ jekyll new helloJekyll
$ cd helloJkeyll
$ jekyll serve

serve 还可以加上参数 -w 这样修改网站后可以自动更改，刷新后反映到浏览器中

在浏览器中输入localhost:4000即可观看效果:

初始网站

关于如何建立github的网站，可以参照我开头提到的文章

我们来看一眼基本的Jekyll的一般目录结构:

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── css
|── images
├── _site
└── index.html

_config.yml用来保存一些配置数据;
_drafts目录用来存储草稿，与已经发布的文章不同，这是没有日期的文章，在运行jekyll serve会自动赋予当前日期。已经发布的文章在_posts目录下。
_includes目录中包含的html文件可以作为模块来加载,比如加载footer.html可以使用标签{% %}将代码include footer.html包裹其中来加载,这些代码被称作Liquid代码，在Jekyll中大量使用这种语法
正如上面所说_posts中放的是发布的文章，不过格式一定要符合年-月-日-标题.md否则会有错误。
_layouts这里存放文章的模板,default.html是整个网站的框架，post.html则是单个文章的模板。剩下两个就很好理解，整个网页的css样式表，和图片资源，如果需要，你还可以加上js文件夹等等，无论你加上多少文件夹，到最后Jekyll都会自动对他们进行转换，最后生成完整的网站到_site文件夹中。

所以在修改网站内容的时候，不要去修改_site文件夹里的内容，否则一旦网站运行起来，Jekyll会更新_site文件夹，修改会被重置。

关于配置文件

# Site settings
title: "codeGlider's blog"
description: "Do not go gentle into that good night..."
baseurl: ""
url: "http://ShyHornet.github.io"

# Build settings
markdown: redcarpet
permalink: pretty
highlighter: pygments
paginate: 3

# Links
links:
  - title: "Home"
    url: /
  - title: "About"
    url: /about
  - title: "简书"
    url: http://www.jianshu.com/users/3007ce57abd3/latest_articles
  - title: "github"
    url: http://github.com/ShyHornet
  - title: "订阅"
    url: /feed.xml

这是我的配置文件，实际上这些都是可以自己定义的全局变量，然后你在网站的各个地方都可以使用上面所提到的Liquid代码引用,所有该文件中定义的变量都可以使用site.#的形式来引用。
像下面这样:

<div class="pageTitle center">
    <a style="color: #000;" href="`{``{` site.baseurl `}``}`/">`{``{ site.title `}`}`</a>
</div>
<p class="sub-title">
    `{``{` site.description `}``}`
</p>

代码取自本站源码,{都被我用``包了起来，否则就会渲染出这些变量的值了

注意到Links，个人理解相当于定义一个数组，数组元素是结构体，可以通过内嵌for循环来得到他们的值:

`{``%` for link in site.links `%``}`
<li>
    <a class="page-link" href="`{``{` link.url | prepend: site.baseurl `}``}`">`{``{` link.title `}``}`</a>
</li>
`{``%` endfor `%``}`

渲染后:

<li>
    <a class="page-link" href="/">主页</a>
</li>

<li>
    <a class="page-link" href="/about">关于</a>
</li>

<li>
    <a class="page-link" href="http://www.jianshu.com/users/3007ce57abd3/latest_articles">简书</a>
</li>

<li>
    <a class="page-link" href="http://github.com/ShyHornet">源码</a>
</li>

<li>
    <a class="page-link" href="/feed.xml">订阅</a>
</li>

这其实就是网站的导航部分,源码地址。

关于写文章

所有文章的markdown文件存储在_posts文件夹下，只要将要发布文章的文章拖入这个文件夹就可以了，刷新网页之后你的文章就会出现，如上面所述，文件名要符合年-月-日-标题.md的格式。
但是在写作的时候感觉到很不适应，因为其markdown语法和github，或简书上的markdown语法很不一样，比如代码高亮部分只能用以下形式:

`{``%` highlight language `%``}`
your code....
`{``%` endhighlight `%``}`

这是因为Jekyll使用的markdown解析器不太一样，默认使用kramdown作为markdown解析器。不过可以改成我们需要的markdown解析器，在_config.yml文件中可以指定markdown解析器

在Jekyll中，默认有三种markdown解析器:kramdown,redcarpet,rdiscount。

我发现redcarpet比较符合github和简书的markdown语法，在_config.yml文件中将

markdown:kramdown

改为

markdown:redcarpet

工作还不算完，因为redcarpet的markdown格式还是有一些地方与github风格的markdown不相符,那么如何解决呢？别急，Jekyll已经为我们想到了:
可以为redcarpet增加一些扩展,具体的扩展列表在redcarpet的官方文档中。
在配置文件中增加如下代码:

redcarpet:
    extensions: [ "hard_wrap","autolink", "tables", "strikethrough", "superscript", "with_toc_data", "highlight", "prettify","no_intra_emphasis"]

现在，Jekyll的markdown格式就基本和github和简书中的markdown格式相同了！

代码高亮自定义

代码高亮部分也是可以自定义，本网站使用的是pygments作为代码高亮器,其实这和github上使用的代码高亮器是相同的，它的风格可以选择，不过因为它是python编写的，需要用python的管理工具pip进行安装。
以Mac(OSX10.11)为例，虽然本身自带python，但是并没有安装pip，所以要去手动下载安装:
下载地址
下载后直接解压缩,打开终端将当前目录切换到解压缩后的文件夹中,然后输入:

$ python setup.py install

输入pip看看有没有反应,如果显示出pip命令的帮助就说明安装成功。
然后输入:

$ pip install pygments

自定义代码高亮风格很简单，在css文件夹中建立一个新的css文件pygments.css，用来放置代码高亮样式。
然后用以下命令生成pygments的css样式表:

$  pygmentize -S default -f html > your/path/pygments.css

这样是将默认风格的代码高亮风格注入到了我们新建的css文件中，这里也可以指定其他自带代码高亮样式.
所有自带代码样式的列表可以通过输入python命令得到:
首先输入python进入python命令行模式:

$ python

然后打印所有代码风格:

>>> from pygments.styles import STYLE_MAP
>>> STYLE_MAP.keys()
['manni', 'igor', 'xcode', 'vim', 'autumn', 'vs', 'rrt', 'native', 'perldoc', 'borland', 'tango', 'emacs', 'friendly', 'monokai', 'paraiso-dark', 'colorful', 'murphy', 'bw', 'pastie', 'paraiso-light', 'trac', 'default', 'fruity']

可以用其中任何一个名称代替上面代码中的default。

比如xcode风格:

屏幕快照 2015-10-22 下午12.34.26.png

borland风格:

屏幕快照 2015-10-22 下午12.33.32.png
colorful风格:

屏幕快照 2015-10-22 下午12.51.42.png