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.