Anthology of Interest III

19 January 2014 Tagged with: Jekyll

A new design came with some new (to me) ways to build. This time focusing on the tech behind the site.

As stated earlier, this site used to run1 on WordPress before moving to Octopress and finally on Jekyll. Once the design was finalised, it was time to actually start developing this thing. That brought on the question of how.

Structure of this site

Jekyll has the concept of includes, which is something I haven’t seen in a CMS before. They have made it easier to maintain consistent code across my four page types. Its not much, but my _includes folder has

  • HTML head
  • page hearder
  • page footer
  • bio

Looking at it now though I can see the giraffe should be moved into an include. The site is also somewhat small, with only a few components needed to be built, making it a very achievable target for working with a new system.

  • four variants for listing posts
  • page views for home, blog view, and page


Pages are unfortunately a mixture of markdown and HTML. The home and the about page for example have content littered with HTML. The idea was to have all of the page logic in the layouts with pages being as minimal as possible for easier editing

layout: page
title: something

## dat markdown
and some content

In an ideal world all pages would like this this, but due to the inconsistent structure of these pages it wasn’t to be.


Some general YAML as per the Jekyll guides is used on the posts with some additional fields for SEO. To achieve the summary seen on the blog and home page I needed to start each post with the following

{{ post.content | split: '<!-- /intro -->' | first }}

This allowed for simple plain text to been on the side bar, and a small preview of the post that would also flow natural when viewing an post.

More Jekyll-ness

As this site currently stands, its rather basic with only some minor changes 2. I’m working on a side project that aims to deal with multiple types of collections and more efficient:

{% for page in site.pages %}
    {% if include.collection == page.mission__category %}
        <a href="{{page.url}}">{{page.title}}</a>
        {{page.mission__crew}}, {{page.mission__type}}, {{page.mission__outcome}}
    {% endif %}
{% endfor %}

The above will loop through pages in the site, returning only those that match a custom property. As this list is structurally the same when used, it can be maintained in one place and easily reused with include loop.html param='value'

  1. I say run, but to be honest not much work on that build was ever done

  2. see my post on related posts

Recent posts are recent

  1. Oct 28 2014
    This is !normal
    It took over a year and a lot of help from some close friends to realise that my job was making me unhappy.
  2. Feb 16 2014
    New feature - Coderay
    After some behind-the-scenes drama, syntax highlighting is finnaly running!
  3. Feb 13 2014
    jQuery conventions
    Javascript (read: jQuery) was something I struggled with in my early days as it can be quite intimidating at times. Here are some of the techniques I have picked up over the years.