Jekyll 开发文档
Jekyll 开发文档.
Image Credits - 18days and Nisachar
Jekyll模板系统
GitHub Pages为了提供对HTML内容的支持，选择了Jekyll作为模板系统，Jekyll是一个强大的静态模板系统，作为个人博客使用，基本上可以满足要求，也能保持管理的方便，你可以查看Jekyll官方文档。 你可以直接fork我的项目，然后改名，就有了你自己的满足Jekyll要求的文档了，当然你也可以按照下面的介绍自己创建。
Jekyll基本结构
Jekyll的核心其实就是一个文本的转换引擎，用你最喜欢的标记语言写文档，可以是Markdown、Textile或者HTML等等，再通过layout将文档拼装起来，根据你设置的URL规则来展现，这些都是通过严格的配置文件来定义，最终的产出就是web页面。 基本的Jekyll结构如下：
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
-- index.html
简单介绍一下他们的作用：
_config.yml
配置文件，用来定义你想要的效果，设置之后就不用关心了。
_includes
可以用来存放一些小的可复用的模块，方便通过{ % include file.ext %}（去掉前两个{中或者{与%中的空格，下同）灵活的调用。这条命令会调用_includes/file.ext文件。
_layouts
这是模板文件存放的位置。模板需要通过YAML front matter来定义，后面会讲到，{ { content }}标记用来将数据插入到这些模板中来。
_posts
你的动态内容，一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定，必须是2012-02-22-artical-title.md这样的形式，MARKUP是你所使用标记语言的文件后缀名，根据_config.yml中设定的链接规则，可以根据你的文件名灵活调整，文章的日期和标记语言后缀与文章的标题的独立的。
_site
这个是Jekyll生成的最终的文档，不用去关心。最好把他放在你的.gitignore文件中忽略它。
其他文件夹
你可以创建任何的文件夹，在根目录下面也可以创建任何文件，假设你创建了project文件夹，下面有一个github-pages.md的文件，那么你就可以通过yoursite.com/project/github-pages访问的到，如果你是使用一级域名的话。文件后缀可以是.html或者markdown或者textile。这里还有很多的例子：https://github.com/mojombo/jekyll/wiki/Sites
Jekyll的配置
Jekyll的配置写在_config.yml文件中，可配置项有很多，我们不去一一追究了，很多配置虽有用但是一般不需要去关心，官方配置文档有很详细的说明，确实需要了可以去这里查，我们主要说两个比较重要的东西，一个是Permalink，还有就是自定义项。 Permalink项用来定义你最终的文章链接是什么形式，他有下面几个变量：
- year 文件名中的年份
- month 文件名中的月份
- day 文件名中的日期
- title 文件名中的文章标题
- categories 文章的分类，如果文章没有分类，会忽略
- i-month 文件名中的除去前缀0的月份
- i-day 文件名中的除去前缀0的日期
看看最终的配置效果：
- permalink: pretty /2009/04/29/slap-chop/index.html
- permalink: /:month-:day-:year/:title.html /04-29-2009/slap-chop.html
- permalink: /blog/:year/:month/:day/:title /blog/2009/04/29/slap-chop/index.html
我使用的是：
- permalink: /:title /github-pages
自定义项的内容，例如我们定义了title:BeiYuu的博客这样一项，那么你就可以在文章中使用{ { site.title }}来引用这个变量了，非常方便定义些全局变量。 YAML Front Matter和模板变量
对于使用YAML定义格式的文章，Jekyll会特别对待，他的格式要求比较严格，必须是这样的形式：
---
layout: post
title: Blogging Like a Hacker
---
前后的—不能省略，在这之间，你可以定一些你需要的变量，layout就是调用_layouts下面的某一个模板，他还有一些其他的变量可以使用：
- permalink 你可以对某一篇文章使用通用设置之外的永久链接
- published 可以单独设置某一篇文章是否需要发布
- category 设置文章的分类
- tags 设置文章的tag
上面的title就是自定义的内容，你也可以设置其他的内容，在文章中可以通过{ { page.title }}这样的形式调用。 模板变量，我们之前也涉及了不少了，还有其他需要的变量，可以参考官方的文档：https://github.com/mojombo/jekyll/wiki/template-data
##### 使用脚本来快速新建文章
说来偶然，在我搜索技术文章的时候，偶然发现了一个博客，觉得这个博客的风格很合我的口味，便顺便找到了作者在github上托管的仓库，将整个仓库clone下来后，将内容换成了自己的文章，便成了我现在这个博客所使用的模板。
这里说一下，使用jekyll时，在工程目录下的”_post”文件夹里放置的就是个人所写的博客内容了。这里可以说是最主要的，因为你的写作成果就集中在这里。如果你看中了别人的博客样式，只需要找到对应的工程，拷过来以后，将”_post”里的文章替换成自己的即可。
在我将这个工程拷过来以后，我发现了以前在Jekyll-Bootstrap中一个非常好用的新建文章的命令无法使用了，该命令如下：
rake post title="titlename"
执行该命令后，将会在“_post”的文件夹下生成形式为“YYYY-MM-dd-titlename.md”的文件，并且会提供好一些附加信息。其中，titlename就是命令中的title后引号中的值。
经过和之前的工程对比后我发现，应该是缺少了一个名为Rakefile的脚本文件的原因，于是我把这个文件拷贝到当前的工程中，这个命令就又可以使用了。之后我对这个文件做了一些修改，使之产生的文件更适合现在的模板。
代码高亮插件
如果写技术博客，代码高亮少不了，有两个可选插件DlHightLight代码高亮组件和Google Code Prettify。DLHightLight支持的语言相对较少一些，有js、css、xml和html，Google的高亮插件基本上任何语言都支持，也可以自定义语言，也支持自动识别，也有行号的特别支持。 Google的高亮插件使用也比较方便，只需要在 的标签上加入prettyprint即可。所以我选择了Google Code Prettify。
使用pygments代码高亮
jekyll默认的代码样式确实不怎么样，但是jekyll支持语法高亮工具 Pygments 。Pygments支持100多种语言的高亮显示，安装网上教程有很多。
安装pygments，这个工具是python写的，所以用python安装如下
easy_install pip
pip install pygments
这里说明一点，就是要使用Pygments，你需要在jekyll中添加相应的css文件，如果你使用本博的这个模板，那么你可以省略接下来这个步骤了。使用命令：
pygmentize -S native -f html > pygments.css
可以在当前路径下生成一个名为pygments.css的文件，使用的是“native”的Pygments样式，这在命令中都有体现，接着就可以将这个css文件放到jekyll工程中，并在模板中加入该样式即可。
Pygments代码高亮语法使用介绍： 点击这里
具体例子效果如下：
1 public class HelloWorld { 2 public static void main(String args[]) { 3 System.out.println(“Hello World!”); 4 } 5 } 注意： 要使用pygments语法高亮，需要在_config.yml配置文件中配置，见上面的第一点。
使用Disqus管理评论
Jekyll只是个静态页面的发布系统，如果想要评论呢？也很简单。 现在专做评论模块的产品有很多，比如Disqus，还有国产的多说，Disqus对现在各种系统的支持都比较全面，到写博客为止，多说现在仅是WordPress的一个插件，所以我这里暂时也使用不了，多说与国内的社交网络紧密结合，还是有很多亮点的，值得期待一下。我先选择了Disqus。 注册账号什么的就不提了，Disqus支持很多的博客平台 我们选择最下面的Universal Code就好，然后会看到一个介绍页面，把下面这段代码复制到你的模板里面，可以只复制到显示文章的模板中：
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname 这个地方需要改成你配置的网站名
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
配置完之后，你也可以做一些异步加载的处理，提高性能，比如我就在最开始页面打开的时候不显示评论，当你想看评论的时候，点击“显示评论”再加载Disqus的模块。代码很简单，你可以参考我的写法。
$('#disqus_container .comment').on('click',function(){
$(this).html('加载中...');
var disqus_shortname = 'beiyuu';
var that = this;
BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //这是一个加载js的函数
});
如果你不喜欢Disqus的样式，你也可以根据他生成的HTML结构，自己改写样式覆盖它的，Disqus现在也提供每个页面的评论数接口，帮助文档在这里可以看到。
搭建本地Jekyll环境
github上搭建了一个自己的静态博客，由于markdown写完后不是立即可见，所以每次写完文章都要经过在线调试，而在线调试就得上线文章，每次上线都得重复git add， git commit， git push这三步，非常的繁琐。我们可以安装jekyll本地环境线下调试ok，再上传到github。 下面就来说说我的安装步骤，我的安装环境是CentOS 7.2 。
- 安装ruby
yum install ruby-devel
- 去掉官方ruby源，改用国内淘宝源，速度快
gem sources --remove http://rubygems.org
gem sources -a https://ruby.taobao.org
- 安装jekyll
gem install jekyll
- 安装分页、seo优化tag等依赖包
gem install jekyll-paginate
gem install jekyll-seo-tag
- 上面步骤执行完后，本地的jekyll环境就搭建完成了，进入你博客的目录，运行下面的命令启动
jekyll server
之后会有提示，访问http://0.0.0.0:4000就可以啦。 或者要绑定ip的话，运行
jekyll serve -w --host=192.168.0.4
-w等同于–watch，可以持续监控文件的修改情况
layout使用指定的模版文件，不加扩展名。模版文件放在_layouts目录下。
title文章的标题。
date发布文章的时间。
categories将文章设置成不同的属性。系统在生成页面时会根据多个属性值来生成文章地址。以上设置会生http://…/jekyll/update/…格式的文章链接。
tags标签，一篇文章可以设置多个标签，使用空格分割。
*layout: post*指的是博文格式安装_layouts文件夹下的post.html指定的格式来显示。
*categories: [Tools]*指定博文分类。
*tags: [jekyll, github, git, markdown]*指定博文标签。
.Jekyll是支持图片和其它资源文件的，但本人在此强烈建议所有的文件资源全都通过外链的方式解决，毕竟GitHub主要还是用来管理源代码不适合存放资源文件。如果只是需要简单的图床的话直接使用weibo的私人相册的功能即可就是管理起来不太方便。当然其实最好还是使用像某牛云存储之类的云存储服务，访问量不大的话免费账户基本能满足要求了，管理资源文件也很方便（感觉有点做广告的嫌疑-_-!）
分页实现
一个博客不可能只有几篇文章，如果所有文章全部放在一个页面中，在文章不多的情况下也许较为直观，一旦文章数量增加，不仅加大了用户需要加载的数据量，也为用户检索文章造成了障碍，所以基本上每个博客都会有文章的分页。一般的分页都是通过像JSP的模板引擎直接在从数据库中分页取出时生成动态生成页面，或者通过ajax从数据库分页取出传递到前端。但现在github+jekyll是静态的页面，没有数据库。好在jekyll支持分页功能
开启分页功能
首先我们需要在jekyll中开启分页功能，在jekyll的_config.yml中加入分页配置：
paginate: 5
paginate_path: "page:num"
第一行定义了每页的文章数量，而第二行则定义了在分页的结果，比如在/index.html中使用分页，定义为page:num，则第二页的路径将是/page2/index.html，第三页的路径将是/page3/index.html，以此类推
需要注意的几个点：
- 分页只在html文件中起作用
- paginate_path同时定义了需要被分页的文件，本人测试这个叫index.html，具体目录由paginate_path中的路径定义，如果定义的目录没有，则会向上寻找index.html，直到根目录的index.html，具体机制官网上没有详细说，所以还需要进一步实验
使用分页
只是开启了分页还没有用，我们需要确实使用到首页之中，在首页(/index.html)中添加如下代码：
这样，jekyll就会根据paginator来进行分页了，被分出来多少页，就会有多少个页面生成。排1-5的文章就在/index.html中了，而排6-10的文章则在/page2/index.html中，依次类推
换页
只是分页还不够，我们还需要在每个页面上做一个跳转到其他页面的导航，这里需要用到paginator的一些其他属性
首先检测总的页数，如果只有一页，自然就不需要分页了。通过paginator的total_pages属性能判断总页数：
我们需要一个跳转到上一页的按钮，这个按钮在第一页不需要显示，通过paginator的previous_page属性来判断是否是第一个页面，使用paginator的previous_page_path来输出上一页的路径，注意在前面添加baseurl，并进行一些必要的字符替换：
接着是生成所有页面的按钮，并使当前页按钮无效化，遍历所有页面，使用paginator的page属性来确定当前页，如果是当前页，则按钮无效，否则使用/pageJekyll 开发文档.
Image Credits - 18days and Nisachar
Jekyll模板系统
GitHub Pages为了提供对HTML内容的支持，选择了Jekyll作为模板系统，Jekyll是一个强大的静态模板系统，作为个人博客使用，基本上可以满足要求，也能保持管理的方便，你可以查看Jekyll官方文档。 你可以直接fork我的项目，然后改名，就有了你自己的满足Jekyll要求的文档了，当然你也可以按照下面的介绍自己创建。
Jekyll基本结构
Jekyll的核心其实就是一个文本的转换引擎，用你最喜欢的标记语言写文档，可以是Markdown、Textile或者HTML等等，再通过layout将文档拼装起来，根据你设置的URL规则来展现，这些都是通过严格的配置文件来定义，最终的产出就是web页面。 基本的Jekyll结构如下：
|-- _config.yml
|-- _includes
|-- _layouts
| |-- default.html
| `-- post.html
|-- _posts
| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
-- index.html
简单介绍一下他们的作用：
_config.yml
配置文件，用来定义你想要的效果，设置之后就不用关心了。
_includes
可以用来存放一些小的可复用的模块，方便通过{ % include file.ext %}（去掉前两个{中或者{与%中的空格，下同）灵活的调用。这条命令会调用_includes/file.ext文件。
_layouts
这是模板文件存放的位置。模板需要通过YAML front matter来定义，后面会讲到，{ { content }}标记用来将数据插入到这些模板中来。
_posts
你的动态内容，一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定，必须是2012-02-22-artical-title.md这样的形式，MARKUP是你所使用标记语言的文件后缀名，根据_config.yml中设定的链接规则，可以根据你的文件名灵活调整，文章的日期和标记语言后缀与文章的标题的独立的。
_site
这个是Jekyll生成的最终的文档，不用去关心。最好把他放在你的.gitignore文件中忽略它。
其他文件夹
你可以创建任何的文件夹，在根目录下面也可以创建任何文件，假设你创建了project文件夹，下面有一个github-pages.md的文件，那么你就可以通过yoursite.com/project/github-pages访问的到，如果你是使用一级域名的话。文件后缀可以是.html或者markdown或者textile。这里还有很多的例子：https://github.com/mojombo/jekyll/wiki/Sites
Jekyll的配置
Jekyll的配置写在_config.yml文件中，可配置项有很多，我们不去一一追究了，很多配置虽有用但是一般不需要去关心，官方配置文档有很详细的说明，确实需要了可以去这里查，我们主要说两个比较重要的东西，一个是Permalink，还有就是自定义项。 Permalink项用来定义你最终的文章链接是什么形式，他有下面几个变量：
- year 文件名中的年份
- month 文件名中的月份
- day 文件名中的日期
- title 文件名中的文章标题
- categories 文章的分类，如果文章没有分类，会忽略
- i-month 文件名中的除去前缀0的月份
- i-day 文件名中的除去前缀0的日期
看看最终的配置效果：
- permalink: pretty /2009/04/29/slap-chop/index.html
- permalink: /:month-:day-:year/:title.html /04-29-2009/slap-chop.html
- permalink: /blog/:year/:month/:day/:title /blog/2009/04/29/slap-chop/index.html
我使用的是：
- permalink: /:title /github-pages
自定义项的内容，例如我们定义了title:BeiYuu的博客这样一项，那么你就可以在文章中使用{ { site.title }}来引用这个变量了，非常方便定义些全局变量。 YAML Front Matter和模板变量
对于使用YAML定义格式的文章，Jekyll会特别对待，他的格式要求比较严格，必须是这样的形式：
---
layout: post
title: Blogging Like a Hacker
---
前后的—不能省略，在这之间，你可以定一些你需要的变量，layout就是调用_layouts下面的某一个模板，他还有一些其他的变量可以使用：
- permalink 你可以对某一篇文章使用通用设置之外的永久链接
- published 可以单独设置某一篇文章是否需要发布
- category 设置文章的分类
- tags 设置文章的tag
上面的title就是自定义的内容，你也可以设置其他的内容，在文章中可以通过{ { page.title }}这样的形式调用。 模板变量，我们之前也涉及了不少了，还有其他需要的变量，可以参考官方的文档：https://github.com/mojombo/jekyll/wiki/template-data
##### 使用脚本来快速新建文章
说来偶然，在我搜索技术文章的时候，偶然发现了一个博客，觉得这个博客的风格很合我的口味，便顺便找到了作者在github上托管的仓库，将整个仓库clone下来后，将内容换成了自己的文章，便成了我现在这个博客所使用的模板。
这里说一下，使用jekyll时，在工程目录下的”_post”文件夹里放置的就是个人所写的博客内容了。这里可以说是最主要的，因为你的写作成果就集中在这里。如果你看中了别人的博客样式，只需要找到对应的工程，拷过来以后，将”_post”里的文章替换成自己的即可。
在我将这个工程拷过来以后，我发现了以前在Jekyll-Bootstrap中一个非常好用的新建文章的命令无法使用了，该命令如下：
rake post title="titlename"
执行该命令后，将会在“_post”的文件夹下生成形式为“YYYY-MM-dd-titlename.md”的文件，并且会提供好一些附加信息。其中，titlename就是命令中的title后引号中的值。
经过和之前的工程对比后我发现，应该是缺少了一个名为Rakefile的脚本文件的原因，于是我把这个文件拷贝到当前的工程中，这个命令就又可以使用了。之后我对这个文件做了一些修改，使之产生的文件更适合现在的模板。
代码高亮插件
如果写技术博客，代码高亮少不了，有两个可选插件DlHightLight代码高亮组件和Google Code Prettify。DLHightLight支持的语言相对较少一些，有js、css、xml和html，Google的高亮插件基本上任何语言都支持，也可以自定义语言，也支持自动识别，也有行号的特别支持。 Google的高亮插件使用也比较方便，只需要在 的标签上加入prettyprint即可。所以我选择了Google Code Prettify。
使用pygments代码高亮
jekyll默认的代码样式确实不怎么样，但是jekyll支持语法高亮工具 Pygments 。Pygments支持100多种语言的高亮显示，安装网上教程有很多。
安装pygments，这个工具是python写的，所以用python安装如下
easy_install pip
pip install pygments
这里说明一点，就是要使用Pygments，你需要在jekyll中添加相应的css文件，如果你使用本博的这个模板，那么你可以省略接下来这个步骤了。使用命令：
pygmentize -S native -f html > pygments.css
可以在当前路径下生成一个名为pygments.css的文件，使用的是“native”的Pygments样式，这在命令中都有体现，接着就可以将这个css文件放到jekyll工程中，并在模板中加入该样式即可。
Pygments代码高亮语法使用介绍： 点击这里
具体例子效果如下：
1 public class HelloWorld { 2 public static void main(String args[]) { 3 System.out.println(“Hello World!”); 4 } 5 } 注意： 要使用pygments语法高亮，需要在_config.yml配置文件中配置，见上面的第一点。
使用Disqus管理评论
Jekyll只是个静态页面的发布系统，如果想要评论呢？也很简单。 现在专做评论模块的产品有很多，比如Disqus，还有国产的多说，Disqus对现在各种系统的支持都比较全面，到写博客为止，多说现在仅是WordPress的一个插件，所以我这里暂时也使用不了，多说与国内的社交网络紧密结合，还是有很多亮点的，值得期待一下。我先选择了Disqus。 注册账号什么的就不提了，Disqus支持很多的博客平台 我们选择最下面的Universal Code就好，然后会看到一个介绍页面，把下面这段代码复制到你的模板里面，可以只复制到显示文章的模板中：
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname 这个地方需要改成你配置的网站名
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
配置完之后，你也可以做一些异步加载的处理，提高性能，比如我就在最开始页面打开的时候不显示评论，当你想看评论的时候，点击“显示评论”再加载Disqus的模块。代码很简单，你可以参考我的写法。
$('#disqus_container .comment').on('click',function(){
$(this).html('加载中...');
var disqus_shortname = 'beiyuu';
var that = this;
BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //这是一个加载js的函数
});
如果你不喜欢Disqus的样式，你也可以根据他生成的HTML结构，自己改写样式覆盖它的，Disqus现在也提供每个页面的评论数接口，帮助文档在这里可以看到。
搭建本地Jekyll环境
github上搭建了一个自己的静态博客，由于markdown写完后不是立即可见，所以每次写完文章都要经过在线调试，而在线调试就得上线文章，每次上线都得重复git add， git commit， git push这三步，非常的繁琐。我们可以安装jekyll本地环境线下调试ok，再上传到github。 下面就来说说我的安装步骤，我的安装环境是CentOS 7.2 。
- 安装ruby
yum install ruby-devel
- 去掉官方ruby源，改用国内淘宝源，速度快
gem sources --remove http://rubygems.org
gem sources -a https://ruby.taobao.org
- 安装jekyll
gem install jekyll
- 安装分页、seo优化tag等依赖包
gem install jekyll-paginate
gem install jekyll-seo-tag
- 上面步骤执行完后，本地的jekyll环境就搭建完成了，进入你博客的目录，运行下面的命令启动
jekyll server
之后会有提示，访问http://0.0.0.0:4000就可以啦。 或者要绑定ip的话，运行
jekyll serve -w --host=192.168.0.4
-w等同于–watch，可以持续监控文件的修改情况
layout使用指定的模版文件，不加扩展名。模版文件放在_layouts目录下。
title文章的标题。
date发布文章的时间。
categories将文章设置成不同的属性。系统在生成页面时会根据多个属性值来生成文章地址。以上设置会生http://…/jekyll/update/…格式的文章链接。
tags标签，一篇文章可以设置多个标签，使用空格分割。
*layout: post*指的是博文格式安装_layouts文件夹下的post.html指定的格式来显示。
*categories: [Tools]*指定博文分类。
*tags: [jekyll, github, git, markdown]*指定博文标签。
.Jekyll是支持图片和其它资源文件的，但本人在此强烈建议所有的文件资源全都通过外链的方式解决，毕竟GitHub主要还是用来管理源代码不适合存放资源文件。如果只是需要简单的图床的话直接使用weibo的私人相册的功能即可就是管理起来不太方便。当然其实最好还是使用像某牛云存储之类的云存储服务，访问量不大的话免费账户基本能满足要求了，管理资源文件也很方便（感觉有点做广告的嫌疑-_-!）
分页实现
一个博客不可能只有几篇文章，如果所有文章全部放在一个页面中，在文章不多的情况下也许较为直观，一旦文章数量增加，不仅加大了用户需要加载的数据量，也为用户检索文章造成了障碍，所以基本上每个博客都会有文章的分页。一般的分页都是通过像JSP的模板引擎直接在从数据库中分页取出时生成动态生成页面，或者通过ajax从数据库分页取出传递到前端。但现在github+jekyll是静态的页面，没有数据库。好在jekyll支持分页功能
开启分页功能
首先我们需要在jekyll中开启分页功能，在jekyll的_config.yml中加入分页配置：
paginate: 5
paginate_path: "page:num"
第一行定义了每页的文章数量，而第二行则定义了在分页的结果，比如在/index.html中使用分页，定义为page:num，则第二页的路径将是/page2/index.html，第三页的路径将是/page3/index.html，以此类推
需要注意的几个点：
- 分页只在html文件中起作用
- paginate_path同时定义了需要被分页的文件，本人测试这个叫index.html，具体目录由paginate_path中的路径定义，如果定义的目录没有，则会向上寻找index.html，直到根目录的index.html，具体机制官网上没有详细说，所以还需要进一步实验
使用分页
只是开启了分页还没有用，我们需要确实使用到首页之中，在首页(/index.html)中添加如下代码：
{% highlight ruby %}
{% for post in paginator.posts %} {{ post.title }} {% endfor %}
{% endhighlight %}
这样，jekyll就会根据paginator来进行分页了，被分出来多少页，就会有多少个页面生成。排1-5的文章就在/index.html中了，而排6-10的文章则在/page2/index.html中，依次类推
换页
只是分页还不够，我们还需要在每个页面上做一个跳转到其他页面的导航，这里需要用到paginator的一些其他属性
首先检测总的页数，如果只有一页，自然就不需要分页了。通过paginator的total_pages属性能判断总页数：
{% highlight ruby %}
{% if paginator.total_pages > 1 %} {% endif %}
{% endhighlight %}
我们需要一个跳转到上一页的按钮，这个按钮在第一页不需要显示，通过paginator的previous_page属性来判断是否是第一个页面，使用paginator的previous_page_path来输出上一页的路径，注意在前面添加baseurl，并进行一些必要的字符替换：
{% highlight ruby %}
{% if paginator.previous_page %} <a href=”{{ paginator.previous_page_path | prepend: site.baseurl | replace: ‘//’, ‘/’ }}”上一页</a> {% endif %}
{% endhighlight %}
| 接着是生成所有页面的按钮，并使当前页按钮无效化，遍历所有页面，使用paginator的page属性来确定当前页，如果是当前页，则按钮无效，否则使用{{ site.paginate_path | prepend: site.baseurl | replace: ‘//’, ‘/’ | replace: ‘:num’, page }}来将:num替换成当前页面的数字生成页面路径： |
{% highlight ruby %}
{% for page in (1..paginator.total_pages) %} {% if page == paginator.page %} {{ page }} {% elsif page == 1 %} {{ page }} {% else %} {{ page }} {% endif %} {% endfor %}
{% endhighlight %}
最后生成一个下一页的按钮，在最后一页不显示，和上一页按钮类似，通过paginator的next_page_path来确定是否还有下一页：
{% highlight ruby %}
{% if paginator.next_page %} 下一页 {% endif %}
{% endhighlight %}
这样一个完整的分页导航功能就做好了，效果就和博客主页上的分页效果是一样的
总结
jekyll的分页总的来说还算给力，基本的功能可以完成。但是有一些缺陷，就是category，tag的分类分页无法实现，必须通过插件的方式来做。但是github不允许三方插件，所以只能通过一些其他的方式实现了
搜索
使用 Lunr.js基于Web网页端的静态HTML页面搜索引擎 进行静态网站的搜索！ https://github.com/slashdotdash/jekyll-lunr-js-search
问题
ruby编译scss出现invalid GBK错误
问题描述 在windows7上面，通过ruby编译scss时，发现编译报错，内容如下：
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
Invalid GBK character "\xE3" on line 315
虽然给出来了报错的原因，但是尼玛，main.scss总共也没有315行啊，而且并没有中文注释什么的。查找一番之后才发现，这里编译器报错的位置不一定是scss中的位置，也有可能是你在scss中引用了其他库中含有中文字符。我在scss中引入了字体文件，文件中包含了中文字符
解决办法 1.在ruby的安装目录下找到engine.rb文件，目录格式如D:\ruby\Ruby21\lib\ruby\gems.1.0\gems\sass-3.4.15\lib\sass在文件中添加一行Encoding.default_external = Encoding.find(‘utf-8’) 在require语句结束处，如：
require ‘sass/media’ require ‘sass/supports’ module Sass
Encoding.default_external = Encoding.find(‘utf-8’)
2.在scss文件的头部加一行@charset “utf-8”
如何让jekyll服务可以在局域网中访问
由于jekyll将地址绑定到了127.0.0.1，导致局域网的其它机器并不能访问它的服务。但实际上只要改变运行jekyll的参数就可以了。
$ jekyll serve -w --host=0.0.0.0
Server address: http://0.0.0.0:4000/
Server running... press ctrl-c to stop.
这样就可以通过该机器的IP地址访问网站了。
参考博文
http://blog.csdn.net/u014015972/article/details/50497254 来将:num替换成当前页面的数字生成页面路径：
最后生成一个下一页的按钮，在最后一页不显示，和上一页按钮类似，通过paginator的next_page_path来确定是否还有下一页：
这样一个完整的分页导航功能就做好了，效果就和博客主页上的分页效果是一样的
总结
jekyll的分页总的来说还算给力，基本的功能可以完成。但是有一些缺陷，就是category，tag的分类分页无法实现，必须通过插件的方式来做。但是github不允许三方插件，所以只能通过一些其他的方式实现了
搜索
使用 Lunr.js基于Web网页端的静态HTML页面搜索引擎 进行静态网站的搜索！ https://github.com/slashdotdash/jekyll-lunr-js-search
问题
ruby编译scss出现invalid GBK错误
问题描述 在windows7上面，通过ruby编译scss时，发现编译报错，内容如下：
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
Invalid GBK character "\xE3" on line 315
虽然给出来了报错的原因，但是尼玛，main.scss总共也没有315行啊，而且并没有中文注释什么的。查找一番之后才发现，这里编译器报错的位置不一定是scss中的位置，也有可能是你在scss中引用了其他库中含有中文字符。我在scss中引入了字体文件，文件中包含了中文字符
解决办法 1.在ruby的安装目录下找到engine.rb文件，目录格式如D:\ruby\Ruby21\lib\ruby\gems\2.1.0\gems\sass-3.4.15\lib\sass在文件中添加一行Encoding.default_external = Encoding.find(‘utf-8’) 在require语句结束处，如：
require ‘sass/media’ require ‘sass/supports’ module Sass
Encoding.default_external = Encoding.find(‘utf-8’)
2.在scss文件的头部加一行@charset “utf-8”
如何让jekyll服务可以在局域网中访问
由于jekyll将地址绑定到了127.0.0.1，导致局域网的其它机器并不能访问它的服务。但实际上只要改变运行jekyll的参数就可以了。
$ jekyll serve -w --host=0.0.0.0
Server address: http://0.0.0.0:4000/
Server running... press ctrl-c to stop.
这样就可以通过该机器的IP地址访问网站了。
参考博文
http://blog.csdn.net/u014015972/article/details/50497254