Why I use Jekyll for blogging

Posted on , updated by

For several years I want to write and tried many different platforms like WordPress blogger, or tumblr. The main problem which kept me away from writing was just the fact, that every time I want to write I had to do it in a new environment and not in my favorite editor vim. Every system gives me the freedom to extend it in several ways but in the end it didn't provide me the freedom to change every tiny piece I want. With jekyll I can use my favorite text editor and it really "turned me into a text monster". This description sounds like a holy grail, but let me explain its abilities in the following sections.

What Jekyll is

Jekyll is a static site generator written in ruby. It generates static html pages. The page is presented through several templates and then fires the whole site, were articles are written in a text markup language like Textile or Markdown through the liquid converters to generate fully generated compiled website. Don't think that it will be easy for you to do it. First of all you have to learn either Textile or Markdown. I chose textile for writing my posts because I use Markdown to create the README files for my GitHub account.

Setting up the environment

You need to have a valid ruby and ruby gems installation on your machine. A simple gem install jekyll will install the following gems:

  • directory_watcher: gives a list of files which change in some intervals
  • liquid: rendering templates in a safe manner
  • open4: creates a child process to handle pid, stdout, etc.
  • maruku: (Markdown interpreter
  • classifier: is a Bayes implementation and can be used semantic indexing like to display related post - this mechanism is used in machine learning)

To get nice syntax highlighting for your code you have to install pygments via sudo apt-get install python-pygments on Ubuntu/Debian. On the "install page(install link for jekyll install you can get more information about how to setup Jekyll.

The directories and styles

Here is the basic layout of a typical Jekyll project:

  • _includes: Small snippets which can be used in every place of the page.
  • _layouts: You can define layouts for post entries and the general default layout. Posts can have the special Yaml Front Matter.
  • _posts: Contains all posts in your specified markup language
  • _config.yml: Is a file to store configuration data like the styling of the URLs, or some global variables. It is also possible to define own variables which can be used as global things on other pages.

Other files can put on the root directory like an atom.xml file (for RSS feed) or 404.html page. For example my post.html has the following layout:

---
layout: default
---
<article>
  <header>
    <div class="author">
      Posted on <time datetime="2011-07-03" pubdate>2011-07-03</time>
    </div>
    <div class="pull_right">
  <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="wikimatze">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  <a href="http://twitter.com/wikimatze" class="twitter-follow-button" data-show-count="false">Follow wikimatze</a>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>


    <div class="clearfix"></div>
  </header>
  <div class="clearfix"></div>

  <br>
  <aside>
    <div class="whoring">
  <div id="disqus_thread"></div>
  <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'wikimatze'; // 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">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>


  </aside>
</article>

The lines between --- mark a special Yaml Front Matter This block is treated as a special block in Jekyll and can contain different components. The `` stands for the content of a post entry.

Creating the layout

Here is the main template for my blog.

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <title>Why I use Jekyll for blogging</title>


  <meta name="description" content="Writings, and talks by Matthias Günther. Günther works at MyHammer, loves painting Warhammer figures, and enjoys making cakes.">

  ...
</head>

<body>
  <div class="navbar row" id="nav2">
    <a class="toggle" gumby-trigger="#nav2 > ul" href="#"><i class="icon-menu"></i></a>
    <h1 class="four columns logo">
      <span id="title">
        <a href="/index.html">wikimatze</a>
      </span>
    </h1>
    <ul class="eight columns">
      ...
    </ul>
  </div>

  <div class="row">
    <div class="push_one ten columns">

    <header><h1 class="lead">Why I use Jekyll for blogging</h1></header>


    </div>
  </div>

  <div class="modal" id="modal1">
    <div class="content">
      <a class="close switch" gumby-trigger="|#modal1"><i class="icon-cancel" /></i></a>
      <div class="row">
        <div class="ten columns centered">
          <h2>Contact</h2>
          ...
        </div>
      </div>
    </div>
  </div>

  <footer class="row">
    <nav>
      ...
    </nav>
  </footer>

  <!-- Grab Google CDN's jQuery, fall back to local if offline -->
  <!-- 2.0 for modern browsers, 1.10 for .oldie -->
  <script>
  var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
  if(!oldieCheck) {
    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
  } else {
    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
  }
  </script>
  <script>
  if(!window.jQuery) {
    if(!oldieCheck) {
      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
    } else {
      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
    }
  }
  </script>

  <!--
  Include gumby.js followed by UI modules followed by gumby.init.js
  Or concatenate and minify into a single file -->
  <script gumby-touch="/js/libs" src="js/libs/gumby.js"></script>
  ...
</html>

I'm using the meta-language Sass to create my CSS. There is one problem with Sass: You have to compile it every time you made a change. Fortunately, there is the compass which always compiles my sass file when I change it. When I build my page I started with compass watch css/ & a command to automate Sass building. This is very handy when changing the layout.

Conclusion

Look on other pages what is possible with Jekyll. You can learn many new things by looking at other Jekyll blogs and copy what you need. I love to write a little bit and after I finished an article perform rake d to upload my blog.

Hierarchy: next post
Tags: writing