Create an Archives Page in Jekyll Without Using Plugins

Feb 27, 2016

Recently, I wanted to add an “Archives” to my site. While this can be easily done via a number of Jekyll plugins, Github pages (my site’s host) doesn’t allow custom plugins on their platform and won’t be adding an archives feature anytime soon. However, I did some experimenting and came up with a way to create a simple Archives page without using plugins.

Step 1: Limit Posts on the Main Page

The first thing your going to want to do is limit the number of posts that get displayed on your site’s landing page:


  <ul class="post-list">
    {% for post in site.posts limit:site.pagination %}
    <li>
      <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}
        {{post.excerpt.length}}
      </span>

      <h2>
        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
          {{ post.title }}
        </a>
      </h2>
      <p class="post-excerpt">
        {{ post.excerpt }}
      </p>
        <a
          class = "post-read-more-link"
          href="{{ post.url | prepend: site.baseurl }}">
          Read More
        </a>
    </li>
    {% endfor %}
  </ul>

Here we’ve limited the number of posts being displayed to the value of the pagination property in our _config.yml file. You don’t have to use this variable if you don’t want to. I just chose it because it made the most sense.

Step 2: Create Archives.html

Now that we’ve limited what we show on the homepage, we can go ahead and create the archives page to display our remaining posts:


---
title: Archives
layout: default
---

<div class="home-page">
    <h1 class="home-page__title">{{ page.title }}</h1>
    <ol class="home-page__post-list">
        {% for post in site.posts offset: site.pagination + 1 %}
        <li class="post">
            <span class="date">{{ post.date | date: "%b %-d, %Y" }}</span>
            <h2 class="title">
                <a class="link" href="{{ post.url }}">{{ post.title }}</a>
            </h2>
        </li>
        {% endfor %}
    </ol>
</div>
{% endraw}

The only new thing to point out is the use of the offset parameter in our for loop. This tells the loop what index to start at when looping through the site’s posts.