一步一步教你在本地搭建Jekyll环境 2015.07.10

我们知道Github上面博客使用Jekyll是生成的，我们在写博客的时候博客采用markdown语言进行编辑，然后commit到github上面，然而每一次修改都需要一次commit因此会导致一篇博文会有大量的commit记录，导致文章不是那么的雅观。本文将一步步教你如何在本地搭建Jekyll环境以避免在Github上面多次commit。

要使用到的软件及下载链接

1. Ruby：下载链接:http://rubyinstaller.org/downloads/
2. RubyDevKit:下载链接:http://rubyinstaller.org/downloads/
3. Rubygems:下载链接：http://rubyforge.org/frs/?group_id=126

安装上述软件

• Ruby的安装

Jekyll本身基于Ruby开发，因此，想要在本地构建一个测试环境需要具有Ruby的开发和运行环境。windows的安装还是一如既往的“无脑”，不多说了。

• RubyDevKit安装

下载RubyDevKit解压完成之后，用cmd进入到刚才解压的目录下，运行$ruby dk.rb init检测系统安装的ruby的位置。具体截图如下： 然后执行dk.rb install命令进行安装,具体截图如图所示。

• Rubygems安装

RubygemsRubygems是类似Radhat的RPM、centOS的Yum、Ubuntu的apt-get的应用程序打包部署解决方案。Rubygems本身基于Ruby开发，在Ruby命令行中执行。我们需要它主要是因为jekyll的执行需要依赖很多Ruby应用程序，如果一个个手动安装比较繁琐。下载解压后，用cmd进入到解压后的目录，执行ruby setup.rb命令即可。具体截图如下：

##安装Jekyll##

执行gem命令$gem install jekyll安装jekyll.然而由于某些原因，你会发现如下Error。

ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)

这样的一种解决方案是翻墙，另一种解决方案是将Gemfile中的source改到国内的source 'https://ruby.taobao.org/'。即可。具体操作如下：

1.列出目前的所有source

$ gem sources -l

结果：

*** CURRENT SOURCES ***
https://rubygems.org/

2.移除https://rubygems.org的source

$ gem sources --remove https://rubygems.org/

结果：

https://rubygems.org/ removed from sources

3.添加https://ruby.taobao.org/的source

$ gem sources -a https://ruby.taobao.org/

结果：

https://ruby.taobao.org/ added to sources

4.查看修改source是否成功

$ gem sources -l

结果：

*** CURRENT SOURCES ***
https://ruby.taobao.org/

这样再次执行gem命令$gem install jekyll即可安装jekyll

##测试Jekyll服务##

安装好之后就可以测试我们的环境了。用cmd进入到我们创建的github目录，执行下面命令：

$jekyll serve --safe --watch

这样就完成了整个本地环境的配置过程。

##增加 $LATEX$ 支持##

在写博客的时候难免要输入一些数学的公式，而直接以图片形式显示公式往往很麻烦，对于后期的更新也不好，故而一般博客上面都增加了对$latex$的支持。在博客中增加这种支持也很简单，主要步骤如下。

1. 在asset文件夹下面的js文件中增加MathJax.js文件

2. 在_includes文件夹下面的head.html中增加如下代码。

    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          tex2jax: {
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
          }
        });
    </script>
   	
    <script type="text/x-mathjax-config">
        MathJax.Hub.Queue(function() {
            var all = MathJax.Hub.getAllJax(), i;
            for(i=0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>
   	
       <!--<script src="/assets/js/MathJax.js"></script>-->
    <script type="text/javascript"
       src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
   

这样就完成了对latex的配置过程，其实貌似第一步不需要。囧囧囧囧囧，只需要第二步即可。

• ← Prev
• Next →