用GitHub + Jekyll搭建博客 -- 以Ubuntu为例

很久便有了用GitHub搭设个人网站的想法了，正值国庆，赶紧将这个想法付诸实施吧。

注册GitHub帐号

赶快登陆github.com注册一个，也许你心仪的帐号还没有被人注册呢。

安装Jekyll

在命令行下，需要先安装ruby和rubygems:

sudo apt-get install rubygems ruby1.9.1-dev

添加path：

export PATH=$PATH:$HOME/bin:/var/lib/gems/1.8/bin

假如不安装ruby1.9.1-dev的话，一会儿会有神奇的错误发生，详见Error Installing Jekyll - Native Extension Build。

再接再厉，安装jekyll。在此之前，建议国内用户换成淘宝服务器，速度更快：

$ sudo gem sources --remove http://rubygems.org/
$ sudo gem sources -a http://ruby.taobao.org/

可以使用sudo gem sources -l查看当前设置的服务器。接下来我们切入正题：

sudo gem install jekyll

该命令会安装一系列相关的包，安装好了之后，我们的任务就完成一大半啦！不用急，我们先学习一下其他优秀博客的经验吧。

获取并修改别人的博客

Jekyll官方建立了一个页面，里面有许多的模板可供参考。接下来我们就要奉行“拿来主义”了，将别人的模板为我们所用。

我自己用了Yukang’s Page，他采用了一个叫做twitter的Jekyll Bootstrap的模板。下面假设你已经安装了git，我们把他人的网站代码clone下来，为了举例方便，还是选取了Yukang’s Page：

git clone https://github.com/chenyukang/chenyukang.github.com.git

然后删去别人的.git文件夹：

rm -rf .git

接着，我们参考jekyll的文件目录，可以把他人的博客删去，并且做一些小的调整。接下来，我们把改头换面的博客上传到自己的GitHub帐号中去。一般情况下，假设你的帐号名是USERNAME，你需要建一个名为USERNAME.github.io的帐号，分支为master。这样，在你将本地的网站push上去之后，不到10分钟，访问USERNAME.github.io，就可以看到你新鲜出炉的网站了：

git init
git add -A
git commit -m "first commit"
git remote add origin https://github.com/USERNAME/USERNAME.github.io.git
git push -u origin master

Git博大精深，我还没有熟练掌握。具体的命令可以参考下面一些参考资料：

如果你想要在push之前就在本地预览一下网站，可以使用 jekyll serve --watch 命令。默认设置下，可以在浏览器中访问localhost:4000预览。详细情况请点击这里。

那么，我们如何撰写新的博客呢？下面，我们隆重推出Markdown。

Markdown语法

根据维基百科上的介绍

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）和亚伦·斯沃茨（Aaron Swartz）。

想到Aaron Swartz已经故去，不禁一阵伤感。

Markdown的介绍有许多，个人推荐：

备注：如何在Markdown中写注释呢？这里提供了最原始的一种解决方法：

看来在Markdown文件里写注释的唯一方法就是用<!– –>了，好吧。

细心的同学可能会发现，最原始的Markdown缺乏以下常用功能：

\(\mathrm{\LaTeX}\)支持。参考Jekyll使用MathJax来显示数学式。注意，_config.yml中要用Kramdown作为解释器。使用时的语法如下例：

$$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$$

效果为

\[\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}\]

代码块的高亮。参考Jekyll官网文档里Code snippet highlighting一节。玩颜色魔法的大魔术师是Pygments。使用时的语法如下例：

{% highlight c++ %}
for(int i = 0; i != 10; i++) {
  do_something();
}
{% endhighlight %}

效果为

for(int i = 0; i != 10; i++) {
  do_something();
}

怎么样，还算容易吧？（附注：为了展示给你看前面的那段用来高亮的代码，真是累死我了……由于它是liquid代码。详情请参考我的源代码，另外参考这里的讨论。）

采用rake简化工作

每个你写博客的markdown之前，需要插入Front-matter部分。

但是每次输入这几行挺麻烦的，有没有偷懒的方法呢？

请不要低估前人的创造力，我们有rake！安装方法：

sudo apt-get install rake

使用方法详见这里。

建立题为Hello World的新文章：

rake post title="Hello World"

开启本地预览：

rake preview

文中还有安装新主题的介绍，我觉得都不太好看，捣鼓了一阵子后使用

git checkout HEAD

从而回到上个commit。真是省心！

其他的技巧还有待探索。重要的是，现在就开始行动吧！

-- EOF --

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 用GitHub + Jekyll搭建博客 -- 以Ubuntu为例