受到野子Joey的文章的启发，我也开始研究Jekyll了!
作为前端开发新手,在研究过程中遇到了不少问题，但是在折腾的过程中也锻炼了前端开发能力，而且看着自己的博客一点一点成型，最后运行在github上，确实很有成就感!。
目前初步建立了自己的Jekyll博客,研究了好几天Jkeyll如何运作以及如何进行各种个性化设置。
个人博客地址
在里面也可以找到本篇文章
首先是安装
这一步很简单,只需在终端输入:
$ sudo gem install jekyll
创建一个简单的博客并运行:
$ jekyll new helloJekyll
$ cd helloJkeyll
$ jekyll serve
serve 还可以加上参数 -w 这样修改网站后可以自动更改，刷新后反映到浏览器中
在浏览器中输入<strong>localhost:4000</strong>即可观看效果:
关于如何建立
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 `%``}`
渲染后:
{% for link in site.links %}
<li>
<a class="page-link" href="{{ link.url | prepend: site.baseurl }}">{{ link.title }}</a>
</li>
{% endfor %}
这其实就是网站的导航部分,源码地址。
关于写文章
所有文章的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格式相同了,经过测试，本篇文章完全在Jekyll和简书之间通用！
代码高亮自定义
代码高亮部分也是可以自定义，本网站使用的是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风格:
borland风格:
colorful风格:
