Prettier Blog Listings

The Jekyll’s introductory tutorial suggests using…

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

…as liquid code to display a programmatically generated, bullet-pointed list of blog posts titles each with a link to the post in question.

However, a more useful list of blog posts titles can be generated with a little extra effort.

The following code block will generate a bullet-pointed list of posts with a link to the post in question. Next to the post title it will add the canonical date of the post – formatted in a human friendly style – and, below, will append a generated excerpt from the post to tease any potential reader.

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>  ({{ post.date| date: "%B %d, %Y" }})
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

The end result is something like this:

  • Photography (January 30, 2019)
    As part of moving away from other people’s flaky, terms-terms-of-use changing sites (cough… Flickr!) I have started to add various image galleries to this site.

Jekyll Problems

The Jekyll introductory tutorial encourages you to create all pages with a header block that includes the key pair ‘title: A Page Title’. An unfortunate downside to this is that, under the default theme, every page is now added to your site’s auto-generated header – something that, as your site grows, you are unlikely to want to do.

Fixing this is simple; to exclude a page from the site’s header just omit your ‘title: A Page Title’ key pair.

For example:

---
layout: page
title: Blog
permalink: /blog/
---

… would add the page ‘Blog’ to the header and…

---
layout: page
permalink: /blog/
---

…would see it omitted.