toevolve.org
Posted on 05 December 2010

Hello World

Two years ago i have written my own static page generator in ruby. At that time i have used a very big rake task that knows how to transform and compose textile and all other parts of the page. It was fully driven by easiness and usability so that a user just has to edit files and folders.

Versioning was not a problem, because everything was organized in files and folders. Using git for this task was very easy to do. Just like this:

git commit -a -m "changes from #{Time.now}"
git push

After things are uploaded a post receive hook will compose the page on the server (assuming that ruby and redcloth are installed).

There where actually some erb templates for things like for loops around some of the data. These for loops where pre filled with functions from the rake task.

I was thinking of using this old rake task to build my first blog page. But i faced some major issues:

  • No dynamic data. I would have to write ruby functions to provide every data i need during the page composition.
  • The lack of sass support
  • The predefined folder structure for layouts and pages
  • The compile overhead (execute rake all the time)
  • The page gets recompiled in the whole (no partial updates)
  • Syntax highlighting for ruby, html, js, …
  • No meta data support
  • Commenting would be not very easy on static sites (spam, comment voting, comments on comments, …)

I decided to not fix the old site generator. I wanted something fresh new and compatible with my new work flows. Implementing a full blown application stack with sinatra or rails seemed like a little overkill. So i search for static site generators on google. I compared them and found Jekyll to be a perfect fit for my Problem.

But Jekyll has two issues that it is sharing with my old solution:

  • Commenting
  • Lack of Sass support

Both have a sweet solution. The commenting part can be easily done using disqus. This is a platform for commenting and getting feedback from your readers. It has some need features like openid login and such. It is very easy to integrate. For me it was just as easy as putting these lines at the end of my post:

<div class="comments">
  <a href="http://toevolve.org/2010/12/05/hello-world.html#disqus_thread">
    View Comments
  </a>
  <div id="disqus_thread"></div>
</div>
<script type="text/javascript" 
        src="http://disqus.com/forums/vilandgr/embed.js"></script>

The second problem can be easily addressed using the plugin infrastructure. There are three types of plugins in Jekyll. I used the Converter to make it aware of scss files. One has to keep in mind, that the scss file has to have a YAML Front Matter in the first lines of the scss file. The YAML Matter is the meta data YAML structure at the head of the document.

require "sass"

module Jekyll
  class ScssConverter < Converter
    safe true
    priority :low

    def matches(ext)
      ext =~ /scss/i
    end 

    def output_ext(ext)
      ".css"
    end

    def convert(content)
      engine = Sass::Engine.new(content, :syntax => :scss)
      engine.render
    end
  end
end

My scss file starts like this:

---
layout: nil
---

* {
  margin: 0px;
  padding: 0px;
}

Adding posts is easy. I just commit them in my local git repo and push the changes to the server where a post commit hook will compose the page. Therefore the remote repository can’t be +bare+ and must have the current contents (that’s why i am reseting to the head after adding new content). If you are interested in my git post receive hook, here it is:

cd ~/evolveblog.git/
GIT_DIR=~/evolveblog.git/.git git reset --hard HEAD
jekyll ../www/

So if there are new issues with Jekyll that i face while im blogging, i will tell you. But for now this is enough about my setup.