应用jekyll构建基于github page的博客

2010-09-20

基于github page的博客好处:

简单至极，且完全免费
可以支持rss订阅，评论功能
依赖于git，文章原生支持版本控制(对比)，更有利于知识库类文章
可以使用vim编写文章，写的时候像在写代码，更符合程序员的习惯

本博客此次除了启用全新个人域名saberma.me，将做以下调整

美化网站风格，更加的清新:)
页面布局调整为html5、css3架构
文章可按分类显示
代码增加高亮显示
增加rss feed输出

挑个新的博客模板

要求是基于html5、css3的免费模板，google之，发现个好地方: http://freehtml5templates.com
一页一页的挑吧，总会找到自己喜欢的，可以根据右下角的Tag Cloud进行筛选，现在看到本站的新样子就是找好久才看中的模板

绑定独立域名

在godaddy中注册 saberma.me 域名，.me专用于博客类型，但比.com贵一些，且没有优惠

注册完域名后，在域名管理中增加A record并指向207.97.227.245
在你的github项目下增加CNAME文件，内容为你的域名，如 http://github.com/saberma/saberma.github.com/blob/master/CNAME

具体参考 http://pages.github.com 中 Custom Domains 部分的内容

pygments代码高亮

安装pygments

# On Ubuntu 安装
sudo apt-get install python-pygments

完整安装说明

生成高亮显示的css文件

选择喜欢的样式，记下名称
http://pygments.org/demo/6622

我选择的是fruity style，作为pygmentize命令style的参数值

# 生成相应的css
pygmentize -S fruity -f html > stylesheets/syntax.css

参考pygments Command line usage

如何使用

语法高亮的代码段

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

highlight后面第一个参数为language，如php，也可以是ruby控制台irb，更多lanuages可以查询 http://pygments.org/docs/lexers/
第一个参数为必填，不填会导致_site目录生成不了相应的html文件，第二个参数显示行号

参考jekyll说明

Markdown标记与Liquid逻辑处理

两个知识点

为避免直接编写html代码，编写文章时，内容需要加入标记信息，即Markdown
博客中都是需要经过处理的，比如逻辑判断处理、循环处理，jekyll应用liquid模板语言进行这些处理

Markdown

标记语言有很多种，如textile
这些标记语言会被标记引擎转换，输出成相应的目标格式（大部分情况是输出成html）
引擎也有很多种，不同的编程语言有不同的实现，ruby常用的引擎有RedCloth

Liquid

简单来说，凡是看到{{}}或者{% %}包含的内容都是会被Liquid引擎处理的

比如*将日期格式化*的liquid语句

{{ post.date | date_to_string }}

除了标记的Liquid语法外，jekyll还扩展出了几个便利的方法，其中有上面介绍的highlight方法
jekyll liquid扩展
 liquid参考资料

整合评论

由于github page最终生成的都是静态html页面，所以是没有评论功能呢
但我们利用disqus实现在线评论功能，先到 http://disqus.com 注册帐号(免费)
注册成功后，为简单起见，只要把 _includes/post.html 中的saberma替换为你的注册帐号就行了(disqus_url输入你实际的域名)