Create Post Previews for Jekyll Blogs

I used a handy Jekyll template called Poole when I originally set up my blog. It’s great because it creates all the pages you need to get a Jekyll site running. However, Poole, by default, shows the full contents of each post on the front page. That means if your first post is a lengthy one, the reader might not even notice that there are multiple posts on that same page!

Fortunately, there’s a very simple solution to this by defining the excerpt_separator property in your config.yml file.

Somewhere in your index.html file, you might have code that looks similar to this, which says “for each post, create a post title, add the post date, and add the post contents”:

{% for post in paginator.posts %}
  <div class="post">
    <h1 class="post-title">
      <a href="{{ site.baseurl }}{{ post.url }}">
        {{ post.title }}
      </a>
    </h1>

    <span class="post-date">{{ post.date | date: '%b %-d, %Y' }}</span>

    {{ post.content }}
  </div>
{% endfor %}

As you might know, the {{ post.content }} variable represents the entire post. There is actually a useful variable available in Jekyll called {{ post.excerpt }}, that stores the portion of your post, starting from the beginning of the post to wherever the excerpt_separator is found in the post (or if not found, to the end of the post).

I set my excerpt_separator property to <!--excerpt--> in my config.yml by adding this line:

excerpt_separator: "<!--excerpt-->"

Stick that string where you want the preview of your post to end:

---
layout: post
title: Title of My Blog Post
---

Here is a sentence that will show up in the preview.

And another sentence that will also show up in the preview.

<!--excerpt-->

Reader has to click into the post to see this sentence.

And in your index.html file, you would modify it as follows:

{% for post in paginator.posts %}
  <div class="post">
    <h1 class="post-title">
      <a href="{{ site.baseurl }}{{ post.url }}">
        {{ post.title }}
      </a>
    </h1>

    <span class="post-date">{{ post.date | date: '%b %-d, %Y' }}</span>

    {{ post.excerpt }}
    {% if post.content contains site.excerpt_separator %}
      <a href="{{ site.baseurl }}{{ post.url }}">Read more</a>
    {% endif %}
  </div>
{% endfor %}

The last three lines after {{ post.excerpt }} simply check if the post contains whatever string you have designated as the excerpt_separator, and if so, adds a “Read more” button. If not, the entire post will be visible on the home page and there is no need for a “Read more”. The user can still click on the post title to reach the individual post, just like any other post.