June 26, 2016

Creating a Drupal-like content type in Jekyll for Presentations

I’ll probably always be a big fan of Drupal. I absolutely loved working with Drupal to create platforms for communities to build and share knowledge together. But for a small, personal site like this one, it feels like a bit much. As others have said, running a server and a database, and keeping up with all the associated updates and patches, begins to feel like overhead, and for me, ultimately ends up becoming an excuse to not actually write anything! That said, running something in a hosted WordPress environment doesn’t give adequate opportunities to tinker with things under the hood. So lately, I’ve felt like Jekyll comes to the rescue by providing just the right balance of tinkering-time and a focus on content. As if I had any lingering doubts, I recently learned that Jekyll’s collections function quite a bit like Drupal’s content types + views framework. In other words, you can make Drupal-like content types in Jekyll. Brilliant.

To get started learning how this works, I read through Ben Balter’s splendid tutorial - essential reading to get your footing with jekyll collections.

Next up, I decided to try to build a presentations collection to store and display information about professional conference presentations.

Here’s a basic outline of how I approached this:

Initial content and metadata

First I created a _presentations directory. This directory will function just like Jekyll’s standard _posts directory, in that it will hold markdown files describing each presentation.

Then, I took a look at how Zotero handles presentations to come up with an initial set of metadata for each presentation. This metadata gets stored in the front matter in each presentation’s markdown file. Each of the lines in the front matter functions a bit like a simple field in a Drupal content type. Here’s an example:

---
layout: presentation
title: ""
date: 1990-01-01
copresenters: 
meetingname: 
meetingurl: 
place: 
abstract: ""
slideurl: 
handouturl: 
feature: 
permalink: presentations/short-title/
---

Next, I created a few markdown files in the _presentations folder following this format.

Set up a list/overview page

The next step was to create a presentations directory and an index.html file. There’s not much to this file. It is pretty much just going to refer to a new Jekyll layout called presentation-list that we will define in a bit.

---
layout: presentation-list
title: All Presentations
excerpt: "A List of Presentations"
---

Then, I copied layouts/post-list.html to layouts/presentation-list.htmland then adapted for the presentations collection. It is a rather long file, so take a look to get the full story.

The basic idea here is to look through each .md file in the _presentations folder, and then display the metadata defined in the front matter, formatting w/ html/css however you like. It was helpful for me to add the hidedayindate variable to the front matter, because for some of my presentations I only had the day and month recorded.

There’s a series of if statements that display things like links to handouts and conference venues, but only if these “fields” are defined in the .md files.

Telling Jekyll about the collection

Next up, I added the following to config.yml

# Collections
collections:
    presentations:
        output: true
        permalink: /presentations/:path/

That’s it! Now we’ve got a list of presentations, and an individual page for each presentation. Pretty cool!

Other useful things I ran into as I worked on this: