Adding Author to Jekyll Posts

With me joining the family business and starting to contribute to the Tosbourn Ltd. brand I decided that we should have authors attributed to our posts.

To do this I decided to have a look around to see what way I could do this using Jekyll rather than hardcoding it into the articles (who wants to waste all those keystrokes?!). I had a look around online and found this great article that pointed me in the right direction. I took what was there and made it work for our site, which I’m going to detail now.

First of all I have to let my site know who the authors are. I put my authors into my _config.yml file, which should sit in the root of your directory.

Here’s what I’ll add into my _config.yml file:

  toby_osbourn:
    name: Toby Osbourn
    email: toby@tosbourn.com
  elaine_osbourn:
    name: Elaine Osbourn
    web: https://www.social-website.com

Then I’ll want some way of pulling this information into my posts. I could add the reference into every post I write but this seems like extra work, so instead I’ll add a new file into my _includes folder. This folder is great because it can hold some of the default content I want on a blog post, like the header, footer and social media sharing information. So I added a new file into the _includes folder called author.html.

The author.html file contains this information:

{% assign author = site[page.author] %}
{% if author %}
  <span>
    Written by {{ author.name }}
  </span>
{% else %}
  <span>
    Written by Toby Osbourn
  </span>
{% endif %}

site refers to anything within the _config.yml file.

After “Written by” I put author.name this will look in my config file for the name of the author and put it there, but how exactly does it know where to get who is the author of the post? I’ll explain in a later paragraph but first just to explain that else there. The vast majority of the content on here was written by Toby and so instead of adding him manually as an author to older posts, just put him in as the author if none is defined.

Here the beauty of the _includes file comes into play. In my _layouts folder I have a file called post.html and in this file I have included everything I want to be included in a general post, like share information, ads and my author! To do this I simply put:

  {% include author.html %}

Include knows to pull the content author.html from the _includes folder.

Next onto how we know who the author is. I simply have to use whatever I called the “name” in my _config.yml file and include it in the front matter (the stuff at the top of your post).

---
layout: post
title: Quick and Easy CSS Minification Using Atom
categories:
  - Web Dev
description: A guide to quick and easy CSS minification using Atom
item_image: /img/css-title.png
author: elaine_osbourn
---

The author information is really useful to have in this reusable way as it can also be used in other parts of the code base.