早在2012年8月，就通过这篇文章 知道了Jekyll, 但是一直没有去尝试。
直到最近静下心来，才发现使用Jekyll 搭建博客非常简单。当然，上手简单，想用好并不容易。
本文记录在使用Jekyll搭建博客过程中的一些过程和经验，并持续完善和改进。
本文分成3个部分：
基础篇：最简单、最快速的使用Jekyll
进阶篇：一些个性化定制的选项
推广篇：博客推广的一些手段和方法
基础篇 关于Jekyll 已经有太多的文章介绍了Jekyll (/‘dʒiːk əl/)。Markdown (或者Textile )编辑的文档生成html。这里 。
Jekyll支持Liquid 模板语言，写文档时的感觉很像是在写Django模板。Jekyll定义了一些内置的变量 ，包括全局变量、页面变量等。在文档中可以设置页面变量的值 。
与RoR类似，Jekyll也可以通过插件来增加额外的功能。
关于github Pages github 是程序员的facebook。github Pages 是github提供的静态网页托管。可以为用户或者项目创建站点。
于是，一些”不务正业“的程序员就开始使用github Pages建立博客，现在这股风潮已经愈演愈烈，一些程序员聚集的博客站点可能要小心应对了。
使用github Pages写博客的好处 为什么说”一些程序员聚集的博客站点可能要小心应对了“呢？ 因为github Pages简直是为程序员量身定制的博客系统。
对我来说，使用github Pages写博客的好处主要体现在以下方面：
自由，随意定制
方便，在github上托管
可控，有版本管理
直接，只需提交，不需要先导出再提交，让人愿意持续更新文章
高效，使用markdown语言能提高写作的效率（但是个人觉得不如org-mode)
免费，无限流量，无限空间
关于Jekyll Bootstrap jekyll-bootstrap 是用Jekyll建立博客的一套模板，提供了主题（themes)、评论、。。等功能，
对于Jekyll的初学者能提供很大的帮助，其网站上号称“基于GitHub Pages建博客的最快方式”，可以“用3分钟就建立一个博客”。
3分钟建立博客 让我们看看上述工具的组合如何用3分钟建立博客。假设你已经有git的基础，在github上托管过项目。并且使用的不是windows。
# 检查ruby版本
ruby -v
#更换更快的gem源，可选
gem sources --remove http://rubygems.org/
gem sources -a http://ruby.taobao.org/
gem sources -l
#如果不是1.9.3+，需要升级到1.9.3
bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer )
source ~/.bashrc
rvm install 1.9.3
# 安装jekyll, 并使用rdiscount作为markdown解析器
sudo gem install jekyll
gem install rdiscount
# 使用Jekyll-Bootstrap，其实就是一个复制的过程。下面的USERNAME代表你在github上的用户名
git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
# 使用GitHub Pages的账户主页建立博客，必须使用如下形式的项目名称并使用主分支
# 如果使用项目主页，必须使用项目的gh-pages分支
cd USERNAME.github.com
git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git
git push origin master
好了，等上几分钟，你的主页就发布在了https://USERNAME.github.com。其他操作 jekyll命令 安装jekyll会产生一个命令行工具：jekyll，提供以下功能：
build Build your site
doctor Search site and print specific deprecation warnings
help Display global or [command] help documentation.
import Import your old blog to Jekyll
new Creates a new Jekyll site scaffold in PATH
serve Serve your site locallyRakefile Jekyll-Bootstrap提供了一个Rakefile（ruby的makefile），包含一些博客相关的任务（task），包括：
$rake -T
进阶篇 放弃Jekyll bootstrap Jekyll bootstrap确实能带来一些变量，但是和RoR一样，充满了各种puzzle。
经过初步的尝试后，我决定放弃JB，也不想尝试Octopress 。我的选择是用原生的Jekyll来构建博客，让一切都在掌控之中。
Jekyll的目录结构 使用Jekyll创建一个干净的站点：
$jekyll new clearly
其中，博客文章放在_posts目录中，可以使用子目录。
_layouts目录存放页面模板，其他还可以使用html、css、image等静态资源。
Jekyll会把任何不以下划线开头的文件和目录都复制/生成到网站（在本地是生成到_site/目录)。
设计模板 jekyll把_layouts目录中的文档看做是模板，如果某个文档中的头部变量声明中指定了layout：
---
layout: post
...
---则Jekyll在生成页面时会使用该模板进行渲染，用文档的内容替换模板中的
早在2012年8月，就通过这篇文章 知道了Jekyll, 但是一直没有去尝试。
直到最近静下心来，才发现使用Jekyll 搭建博客非常简单。当然，上手简单，想用好并不容易。
本文记录在使用Jekyll搭建博客过程中的一些过程和经验，并持续完善和改进。
本文分成3个部分：
基础篇：最简单、最快速的使用Jekyll
进阶篇：一些个性化定制的选项
推广篇：博客推广的一些手段和方法
基础篇 关于Jekyll {% asset_img jekyll.jpg Jekyll %}
已经有太多的文章介绍了Jekyll (/‘dʒiːk əl/)。Markdown (或者Textile )编辑的文档生成html。这里 。
Jekyll支持Liquid 模板语言，写文档时的感觉很像是在写Django模板。Jekyll定义了一些内置的变量 ，包括全局变量、页面变量等。在文档中可以设置页面变量的值 。
与RoR类似，Jekyll也可以通过插件来增加额外的功能。
关于github Pages github 是程序员的facebook。github Pages 是github提供的静态网页托管。可以为用户或者项目创建站点。
于是，一些”不务正业“的程序员就开始使用github Pages建立博客，现在这股风潮已经愈演愈烈，一些程序员聚集的博客站点可能要小心应对了。
使用github Pages写博客的好处 为什么说”一些程序员聚集的博客站点可能要小心应对了“呢？ 因为github Pages简直是为程序员量身定制的博客系统。
对我来说，使用github Pages写博客的好处主要体现在以下方面：
自由，随意定制
方便，在github上托管
可控，有版本管理
直接，只需提交，不需要先导出再提交，让人愿意持续更新文章
高效，使用markdown语言能提高写作的效率（但是个人觉得不如org-mode)
免费，无限流量，无限空间
关于Jekyll Bootstrap jekyll-bootstrap 是用Jekyll建立博客的一套模板，提供了主题（themes)、评论、。。等功能，
对于Jekyll的初学者能提供很大的帮助，其网站上号称“基于GitHub Pages建博客的最快方式”，可以“用3分钟就建立一个博客”。
3分钟建立博客 让我们看看上述工具的组合如何用3分钟建立博客。假设你已经有git的基础，在github上托管过项目。并且使用的不是windows。
# 检查ruby版本
ruby -v
#更换更快的gem源，可选
gem sources --remove http://rubygems.org/
gem sources -a http://ruby.taobao.org/
gem sources -l
#如果不是1.9.3+，需要升级到1.9.3
bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer )
source ~/.bashrc
rvm install 1.9.3
# 安装jekyll, 并使用rdiscount作为markdown解析器
sudo gem install jekyll
gem install rdiscount
# 使用Jekyll-Bootstrap，其实就是一个复制的过程。下面的USERNAME代表你在github上的用户名
git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
# 使用GitHub Pages的账户主页建立博客，必须使用如下形式的项目名称并使用主分支
# 如果使用项目主页，必须使用项目的gh-pages分支
cd USERNAME.github.com
git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git
git push origin master
好了，等上几分钟，你的主页就发布在了https://USERNAME.github.com。其他操作 jekyll命令 安装jekyll会产生一个命令行工具：jekyll，提供以下功能：
build Build your site
doctor Search site and print specific deprecation warnings
help Display global or [command] help documentation.
import Import your old blog to Jekyll
new Creates a new Jekyll site scaffold in PATH
serve Serve your site locallyRakefile Jekyll-Bootstrap提供了一个Rakefile（ruby的makefile），包含一些博客相关的任务（task），包括：
$rake -T
进阶篇 放弃Jekyll bootstrap Jekyll bootstrap确实能带来一些变量，但是和RoR一样，充满了各种puzzle。
经过初步的尝试后，我决定放弃JB，也不想尝试Octopress 。我的选择是用原生的Jekyll来构建博客，让一切都在掌控之中。
Jekyll的目录结构 使用Jekyll创建一个干净的站点：
$jekyll new clearly
其中，博客文章放在_posts目录中，可以使用子目录。
_layouts目录存放页面模板，其他还可以使用html、css、image等静态资源。
Jekyll会把任何不以下划线开头的文件和目录都复制/生成到网站（在本地是生成到_site/目录)。
设计模板 jekyll把_layouts目录中的文档看做是模板，如果某个文档中的头部变量声明中指定了layout：
---
layout: post
...
---则Jekyll在生成页面时会使用该模板进行渲染，用文档的内容替换模板中的{{ content }}部分。
模板本身也是文档，所以一个模板也可以用layout变量指定使用一个模板作为布局，这就是模板的继承。
此外，在设计模板时，利用好Liquid语言的include语法能够带来很大的变量。被包含的页面部件需要放在_includes文件夹中。
因为Jekyll生成的是静态站点，可能会需要大量的js以增加动态特性，在设计模板时要遵循Unobtrusive JavaScript原则 。
灵活的导航 使用静态的导航菜单会带来两个问题：
文档过长
“当前项”的高亮不好处理
可以在_config.yml中设置一个导航菜单的变量：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 menuitems: - name: 首页 url: /index.html - name: 分类 url: /categories.html - name: 标签 url: /tags.html - name: 归档 url: /archive.html - name: 读书 url: /reading.html - name: 工作 url: /working.html - name: 关于 url: /about.html
然后在模板的导航部分可以这样写：
1 2 3 4 5 6 7 8 9 10 11 <ul class="nav"> {% for item in site.menuitems %} {% if item.url == page.url %} <li class="active"> {% else %} <li> {% endif %} <a href="{{item.url}}">{{item.name}}</a> </li> {% endfor %} </ul>
这些都是博客站点必须有的元素。分类、标签和归档可以安装不同的方式检索博客文章；RSS可以订阅博客。
用Jekyll的变量和模板很容易实现这些元素。
注意：不管文件的扩展名是md、html还是xml、txt，只要文件的头部包含变量声明，Jekyll的模板引擎就会对其进行处理。
但如果不是写文档，最好不要使用md，否则会按照markdown语法进行渲染，带来一些意想不到的麻烦。
具体的例子可以参考JB中的代码。
你可能需要对每个分类、每个标签建立单独的索引页面，这个活手工做比较麻烦，可以使用Jekyll插件或者自己写脚本生成文件，
对于标签云(tag cloud)，在不使用插件的情况下，可以使用js实现，参考如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <div class="tag-cloud"> {/% for tag in site.tags %/} <a href="/pages/tags.html#{/{ tag[0] }/}-ref" id="{/{ forloop.index }/}" class="__tag" style="margin: 5px">{/{ tag[0] }/}</a> {/% endfor %/} </div> <script type="text/javascript"> $(function() { var minFont = 15.0, maxFont = 40.0, diffFont = maxFont - minFont, size = 0; {% assign max = 1.0 %/} {% for tag in site.tags %/} {% if tag[1].size > max %/} {% assign max = tag[1].size %/} {% endif %/} {% endfor %/} {% for tag in site.tags %/} size = (Math.log({{ tag[1].size }}) / Math.log({{ max }})) * diffFont + minFont; $("#{{ forloop.index }}").css("font-size", size + "px"); {/% endfor %/} }); </script>
关于分类和标签的设计，可以参考这篇文章
分页 TODO: ajax分页
语法高亮 对于程序员，博客中难免会包含一些代码。实现代码高亮可以有几种方法：
1 2 ~~~Jekyll在编译markdown时，会将符合“代码格式”的内容放到一个< pre>< code></ code>< /pre>标签中。
pre>< code>区块进行处理，甚至会自动判断使用的语言。~~~ 1 2 ~~~在post模板的合适位置中增加以下内容：
1 2 3 4 5 6 7 <link href="/js/google-code-prettify/prettify.css" rel="stylesheet"> <script src="/js/google-code-prettify/prettify.js"></script> <script> $(document).ready(function(){ prettyPrint(); }); </script>
如果要更改配色方案，只需要修改css文件。
本站采用pygments的方式：
1 2 3 4 5 {/% highlight ruby linenos %/} def foo puts 'foo' end {/% endhighlight %/}
文档目录(TODO) 如果写比较长的文章，提供一个类似于developerworks上的文档目录进行导航可以方便阅读。
使用公式 MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.
使用maruku来解析markdown文件，可以把LaTeX解析成图片，
优点是网页加载速度快。但是在windows下安装复杂，且需要安装有LaTeXhttp://www.mathjax.org/ ，缺点是动态加载，速度慢。
参考：http://chen.yanping.me/cn/blog/2012/03/10/octopress-with-latex/
处理图片 设置一个IMAGE_ROOT变量，可以可以在post中设置，也可以在post的模板中通过指定的规则capture（或者assign）。
则引可以使用/images/xxx.png的形式插入图片，便于以后的调整和管理。
处理表格(TODO) 博客搬家（TODO） 用Jekyll写博客的，通常不会是新博主，会存在博客搬家的需求。
Jekyll提供了一个import的子命令(需要插件jekyll-import），可以将旧的博客导入到Jekyll。
exitwp 是一个用python开发的工具，号称是将wordpress的博客导出并转换成markdown，但实际上
git clone https://github.com/thomasf/exitwp
sudo pip install --upgrade -r pip_requirements.txt
cd exitwp/wordpress-xml/
wget http://your/atom/file/xml
cd ..
python exitwp.py推广篇 使用域名 Github Pages会为站点分配类似”USERNAME.github.com”的二级域名。你也可以使用自己的域名。
申请域名
免费的域名(.tk)可以在DotTK 申请。
.tk是南太平洋岛国托克劳的国家域名，支持域名转发（可隐藏原URL）、电邮转发、A记录解析、CNAME别名记录、MX邮件记录、设置DNS服务器等服务。
收费的域名到处有，是否使用国内的域名商随你。
域名解析服务
一般来说域名提供商会提供简单的解析服务，也支持将解析服务指向到其他的提供者。
国外的如Godaddy ，可能被墙。
国内的如DNSPod ，有免费版。
配置
社会化网络 Jekyll生成的是静态网站，诸如评论、推荐、关注之类的功能就无法实现了。
不过好在现在有很多社会化网络应用，通过混搭(marshup) 可以把各种各样第三方的功能部件（widgets）加到你的博客中。
与博客相关的Widget主要有几类：
社会化评论
专门提供评论功能的网站，可以为博客增加评论功能。也可能附带着关注、相关文章、推荐等功能。
国外的有disqus ，国内的有友言 ，多说
社会化推荐
自动推荐跨站的相关文章。包括自动推相关文章。
国内的有友荐 ，无觅 。
Jekyll本身也可以实现站内文章推荐的功能。
社会化分享
将自己喜欢的网址分享给别人，通常附带推荐功能。
国内的有加网 ，百度分享 等。其中加网提供了划词分享功能。
社交网站
可以发布简短的动态。比如Twitter, Facebook, Google Plus, 新浪微博等网站。与博客的联动可以是自己发布博客动态，
如果是自己发布动态，需要让别人能够方便的“关注/Follow”你，最好提供“一键关注的按钮”，或者提供连接能够让别人在这些网上方便的找到你。
社会化登录
没懂，感觉也就是OpenID或OAuth的集合。暂时不予考虑。
由于存在着伟大的墙，我只好尽量选择国内的社会化网络资源。对于更喜欢的国外的资源，尽量考虑如何不拖慢墙内用户的访问速度。
我对社会化网络资源的利用方式如下：
流量分析和统计 第三方的流量分析和统计工具可以说是最古老的marshup，尽管没有社会化网络的功能。
可以选择的有国外的Google Analysis 、SiteMeter 和国内的百度统计 、量子恒道统计 等。
出于种种无奈，还是选择了百度。
部分。
模板本身也是文档，所以一个模板也可以用layout变量指定使用一个模板作为布局，这就是模板的继承。
此外，在设计模板时，利用好Liquid语言的include语法能够带来很大的变量。被包含的页面部件需要放在_includes文件夹中。
因为Jekyll生成的是静态站点，可能会需要大量的js以增加动态特性，在设计模板时要遵循Unobtrusive JavaScript原则 。
灵活的导航 使用静态的导航菜单会带来两个问题：
文档过长
“当前项”的高亮不好处理
可以在_config.yml中设置一个导航菜单的变量：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 menuitems: - name: 首页 url: /index.html - name: 分类 url: /categories.html - name: 标签 url: /tags.html - name: 归档 url: /archive.html - name: 读书 url: /reading.html - name: 工作 url: /working.html - name: 关于 url: /about.html
然后在模板的导航部分可以这样写：
1 2 3 4 5 6 7 8 9 10 11 <ul class="nav"> {% for item in site.menuitems %} {% if item.url == page.url %} <li class="active"> {% else %} <li> {% endif %} <a href="{{item.url}}">{{item.name}}</a> </li> {% endfor %} </ul>
这些都是博客站点必须有的元素。分类、标签和归档可以安装不同的方式检索博客文章；RSS可以订阅博客。
用Jekyll的变量和模板很容易实现这些元素。
注意：不管文件的扩展名是md、html还是xml、txt，只要文件的头部包含变量声明，Jekyll的模板引擎就会对其进行处理。
但如果不是写文档，最好不要使用md，否则会按照markdown语法进行渲染，带来一些意想不到的麻烦。
具体的例子可以参考JB中的代码。
你可能需要对每个分类、每个标签建立单独的索引页面，这个活手工做比较麻烦，可以使用Jekyll插件或者自己写脚本生成文件，
对于标签云(tag cloud)，在不使用插件的情况下，可以使用js实现，参考如下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <div class="tag-cloud"> {/% for tag in site.tags %/} <a href="/pages/tags.html#{/{ tag[0] }/}-ref" id="{/{ forloop.index }/}" class="__tag" style="margin: 5px">{/{ tag[0] }/}</a> {/% endfor %/} </div> <script type="text/javascript"> $(function() { var minFont = 15.0, maxFont = 40.0, diffFont = maxFont - minFont, size = 0; {% assign max = 1.0 %/} {% for tag in site.tags %/} {% if tag[1].size > max %/} {% assign max = tag[1].size %/} {% endif %/} {% endfor %/} {% for tag in site.tags %/} size = (Math.log({{ tag[1].size }}) / Math.log({{ max }})) * diffFont + minFont; $("#{{ forloop.index }}").css("font-size", size + "px"); {/% endfor %/} }); </script>
关于分类和标签的设计，可以参考这篇文章
分页 TODO: ajax分页
语法高亮 对于程序员，博客中难免会包含一些代码。实现代码高亮可以有几种方法：
1 2 ~~~Jekyll在编译markdown时，会将符合“代码格式”的内容放到一个< pre>< code></ code>< /pre>标签中。
pre>< code>区块进行处理，甚至会自动判断使用的语言。~~~ 1 2 ~~~在post模板的合适位置中增加以下内容：
1 2 3 4 5 6 7 <link href="/js/google-code-prettify/prettify.css" rel="stylesheet"> <script src="/js/google-code-prettify/prettify.js"></script> <script> $(document).ready(function(){ prettyPrint(); }); </script>
如果要更改配色方案，只需要修改css文件。
本站采用pygments的方式：
1 2 3 4 5 {/% highlight ruby linenos %/} def foo puts 'foo' end {/% endhighlight %/}
文档目录(TODO) 如果写比较长的文章，提供一个类似于developerworks上的文档目录进行导航可以方便阅读。
使用公式 MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.
使用maruku来解析markdown文件，可以把LaTeX解析成图片，
优点是网页加载速度快。但是在windows下安装复杂，且需要安装有LaTeXhttp://www.mathjax.org/ ，缺点是动态加载，速度慢。
参考：http://chen.yanping.me/cn/blog/2012/03/10/octopress-with-latex/
处理图片 设置一个IMAGE_ROOT变量，可以可以在post中设置，也可以在post的模板中通过指定的规则capture（或者assign）。
则引可以使用/images/xxx.png的形式插入图片，便于以后的调整和管理。
处理表格(TODO) 博客搬家（TODO） 用Jekyll写博客的，通常不会是新博主，会存在博客搬家的需求。
Jekyll提供了一个import的子命令(需要插件jekyll-import），可以将旧的博客导入到Jekyll。
exitwp 是一个用python开发的工具，号称是将wordpress的博客导出并转换成markdown，但实际上
git clone https://github.com/thomasf/exitwp
sudo pip install --upgrade -r pip_requirements.txt
cd exitwp/wordpress-xml/
wget http://your/atom/file/xml
cd ..
python exitwp.py推广篇 使用域名 Github Pages会为站点分配类似”USERNAME.github.com”的二级域名。你也可以使用自己的域名。
申请域名
免费的域名(.tk)可以在DotTK 申请。
.tk是南太平洋岛国托克劳的国家域名，支持域名转发（可隐藏原URL）、电邮转发、A记录解析、CNAME别名记录、MX邮件记录、设置DNS服务器等服务。
收费的域名到处有，是否使用国内的域名商随你。
域名解析服务
一般来说域名提供商会提供简单的解析服务，也支持将解析服务指向到其他的提供者。
国外的如Godaddy ，可能被墙。
国内的如DNSPod ，有免费版。
配置
社会化网络 Jekyll生成的是静态网站，诸如评论、推荐、关注之类的功能就无法实现了。
不过好在现在有很多社会化网络应用，通过混搭(marshup) 可以把各种各样第三方的功能部件（widgets）加到你的博客中。
与博客相关的Widget主要有几类：
社会化评论
专门提供评论功能的网站，可以为博客增加评论功能。也可能附带着关注、相关文章、推荐等功能。
国外的有disqus ，国内的有友言 ，多说
社会化推荐
自动推荐跨站的相关文章。包括自动推相关文章。
国内的有友荐 ，无觅 。
Jekyll本身也可以实现站内文章推荐的功能。
社会化分享
将自己喜欢的网址分享给别人，通常附带推荐功能。
国内的有加网 ，百度分享 等。其中加网提供了划词分享功能。
社交网站
可以发布简短的动态。比如Twitter, Facebook, Google Plus, 新浪微博等网站。与博客的联动可以是自己发布博客动态，
如果是自己发布动态，需要让别人能够方便的“关注/Follow”你，最好提供“一键关注的按钮”，或者提供连接能够让别人在这些网上方便的找到你。
社会化登录
没懂，感觉也就是OpenID或OAuth的集合。暂时不予考虑。
由于存在着伟大的墙，我只好尽量选择国内的社会化网络资源。对于更喜欢的国外的资源，尽量考虑如何不拖慢墙内用户的访问速度。
我对社会化网络资源的利用方式如下：
流量分析和统计 第三方的流量分析和统计工具可以说是最古老的marshup，尽管没有社会化网络的功能。
可以选择的有国外的Google Analysis 、SiteMeter 和国内的百度统计 、量子恒道统计 等。
出于种种无奈，还是选择了百度。
