Jekyll

I’ve recreated my personal blog using Jekyll and so far I loving.

And it’s not only because how powerful and customizable Jekyll is, is the first time that I feeling that I use a blogging platform build for developers by developers and is great.

For those that actually don’t know what Jekyll is, a quote from their site:

So what is Jekyll, exactly?

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

So basically you could just write your blog using Liquid combining markdown and html, tools familiar for almost any developer, and them build an static web with your blog.

So this extract from their guide could help you in the installation:

# Install Jekyll and Bundler gems through RubyGems
~ $ gem install jekyll bundler

# Create a new Jekyll site at ./myblog
~ $ jekyll new myblog

# Change into your new directory
~ $ cd myblog

# Build the site on the preview server
~/myblog $ bundle exec jekyll serve

# Now browse to http://localhost:4000

But if you like just to build the static version of your blog an upload to any host:

# Build the site on the _site folder
~/myblog $ bundle exec jekyll build

# Now upload _site to whatever server you like

But of course what is a blog without comments, for that I’m using disqus.

I’ve just need to update my post template to add this snippet:

    <div id="disqus_thread"></div>
    <script>

    var disqus_config = function () {
    this.page.url = "https://your-domain.com{{ page.url }}";
    this.page.identifier = "{{ page.url }}";
    this.page.title = "{{ page.title }}";
    };

    (function() {
    var d = document, s = d.createElement('script');
    s.src = '//your-disquis-site-name.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
    </script>
    <noscript>
    Please enable JavaScript to view the
    <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>

And finally I choose a wonderful theme that I like a lot and do a couple of tweaks for my needs.

But then I realized that I need a nice color scheme for the syntax highlight so I used this css.