Using Excerpts in Jekyll

September 28, 2014

I was migrating my blog posts from Blogger to Github Pages today. Not the most interesting thing to be doing on a Sunday (Blogger exporter, y u export to HTML? I WANT MARKDOWN!)

I’m using the brilliant example given here as the basis for my blog, and the items that load on the front page are the first few words of each posts. This is determined by this tag in the index.html file:

{{ post.content | truncatewords:30 }}

which means the first 30 words of the post will be used as the excerpt.

This brings an issue when you have images within the first 30 words of your post. The result is your image is loaded on the landing page of your blog, and the formatting for excerpts below the image is messed up.

Fortunately, Jekyll supports excerpts in YAML’s front matter. Here’s how to do it:

• Add excerpt: "Your awesome excerpt" to your post’s front matter, i.e. between the dashes at the top of your page

---
excerpt: 'Awesome blog post here'
---

• Then in your index.html, modify the part that’s rendering the excerpt to:

{% if post.excerpt %}
{{ post.excerpt }}
{% else %}
{{ post.content | truncatewords:30 }}
{% endif %}

This will render the excerpt where it’s present, and fall back to the first 30 words where it’s not.

Hope this helps! Back to blogging like a hacker!

---