Being Data Driven

We’re building a static site, but that doesn’t mean we’re going to hard-code everything and construct all the pages by hand - Jekyll has excellent support for driving your content with data. Let’s look at an example:

The data for our site’s footer is in _data/links.yml and looks like this:

- title:       Twitter
  fontawesome: fa-twitter

- title:       Facebook
  fontawesome: fa-facebook-square

- title:       Soundcloud
  fontawesome: fa-soundcloud

Those titles, URLs and font-awesome icons are exposed as[0].title and so on, and we can iterate through them in _includes/footer.html with something like

{% for link in %}
  <a href='{{ link.url }}' title='{{ link.title }}'>
    <i class='fa {{ link.fontawesome }}'></i>
    <span class='hidden-xs'> {{ link.title }}</span>
{% endfor %}

Building a footer or a navigation bar this way is all very well, but what about entirely data-driven blog posts? Well, those sets of three dashes that we have at the top of each content page are delimiters for Jekyll front matter, where we normally specify things like titles and layouts. However, it’s just YAML, and we can put anything we want in there. Which led me to the idea of

Data-driven gigs

Take a look at this:

location:    259 Upper St, London, N1
time:        '20:30'
facebook_id: 1554796168085840
latitude:    51.5461216
longitude:   -0.1032551

That’s all the data we need to describe a Raw Funk Maharishi gig (or at least it is for now, it would be trivially easy to support other fields for EventBrite or whatever). Jekyll rummages through our site, looking for any files within _posts/ directories and rendering them as pages - it also parses the filenames to give us a nice /YYYY/MM/DD/title-slug/ URL, as well as and page.title - and because of this bit in _config.yml it defaults to using the gig layout, which has access to those items via page.location, etc:

<dl class='dl-horizontal'>

  <dd>{{ | date_to_long_string }}</dd>

  <dd>{{ page.time }}</dd>

  <dd>{{ page.location }}</dd>

  {% if page.price %}
    <dd>{{ page.price }}</dd>
  {% endif %}

  {% if page.facebook_id %}
    <dt>More info</dt>
      <a href='{{ page.facebook_id }}/' title='Facebook event'>
  {% endif %}


and of course page.latitude and page.longitude with which it renders an OSM map.

This data is also exposed as site.categories.gigs - the hash key there is the directory under which our _posts appear, we also have on this site, as well as all _posts as site.posts - which we can iterate through to construct an archive page.

I have a nagging feeling that this might be a misuse of tools (a gig is not really a blog post), but I’m still feeling my way around Jekyll and this works just fine for now.