Jekyll

When I started this blog I didn’t want to use a huge framework, since I felt that that would be overly complicated, so I just wrote a small PHP script to read Markdown files from a designated directory. I made several small adjustments until I realized that I wanted to tag posts, and also see a list of all posts that have a certain tag. That’s something that would feel expensive to do on the fly, so I’d need a caching mechanism… That’s when I realized that I probably shouldn’t roll my own blog platform.

Also, what about hosting? I’d like free, anonymous, ad-free hosting, and the reliable platform I could think of was Github, which only supports static sites. So, Jekyll it was, even though I have bad experiences with Ruby (mainly because of versioning). This time around installing gems on Ubuntu wasn’t painless either. I tried installing Jekyll with apt-get without success, then installing it as a gem, and finally following Github’s instructions of installing it as a bundle. Also, when am I supposed to use sudo? These are of course a Ruby beginner’s mistakes, but I don’t recall having similar problems when learning Node.js and NPM.

When I actually got Jekyll up and running, it was easy to do most of what I wanted to do by simply reading the documentation in order. However, Jekyll–advertized as blog-aware–disappointed me in two ways: tags and images.

Jekyll has built-in support for tags, but not easy to actually link from a tag to a list of articles containing said tag. I haven’t figured out a way to automatically create pages for each tag, so I settled for a single tag page, with the following less-than-beautiful code:

{% assign sortedtags = (site.tags | sort:0) %}
{% for tag in sortedtags %}
    <h2 id="tag-{{ tag[0] | slugify }}">
        <a href="#tag-{{ tag[0] | slugify }}" class="heading-link">ยง</a> {{ tag[0] }}
    </h2>
    {% assign sortedposts = (tag[1] | sort: 'title', 'last') %}
    <ul>
        {% for post in sortedposts %}
            {% unless post.isOriginal %}
                <li>
                    <a href="{{ post.url }}">{{ post.title }}</a>
                </li>
            {% endunless %}
        {% endfor %}
    </ul>
{% endfor %}

I had expected there to be a simple way to store images in connection to a post, because for me it feels too unstructured to just keep them in a general assets/ folder. My solution is to store blog post assets in assets/yyyy-mm-dd-blog-post-slug/, and then refer to the images with ~assets/image.jpg. In my main layout I then replace ~assets/with the post’s own folder in the post content. I’d also like to surround images with <figure>, for styling, but Redcarpet doesn’t seem to support Markdown within HTML tags with the attribute markdown="1". I ended up adding a space: < figure>. Here’s what it looks like with both URL replacements and support for spaced < figure>:

{% capture root %}{{ site.url }}/{% endcapture %}
{% capture assetRoot %}{{ site.url }}/assets/{{ page.path | replace:'_posts/' | replace:'-original.md' | replace:'.md' }}/{% endcapture %}
{{ content | replace:'%7E/',root | replace:'%7Eassets/',assetRoot | replace: '<p>&lt; figure&gt;','<figure>' | replace: '</figure></p>','</figure>' }}

It doesn’t seem to me like Jekyll is the perfect tool, but it is well-integrated into Github, and provides me with free hosting, and supports enough logic, so I’ll live with it.