How to Create an Automatic Archive Page in Jekyll Mediumish

Why You Need an Archive Page

As your blog grows, users may want to explore older content by browsing through time-based archives — year-by-year, or even month-by-month. An archive page improves user experience, increases time on site, and helps search engines crawl your content more efficiently.

While Mediumish doesn’t come with a built-in archive page, you can create one easily with a bit of Liquid and Jekyll templating.

Step 1: Create the Archive Page File

Start by creating a new file named archive.md in your root directory or inside pages/ if you organize pages separately.

---
layout: page
title: "Archive"
permalink: /archive/
---

This tells Jekyll to render the page using the default page layout and make it accessible at /archive/.

Step 2: Add Archive Listing Logic Using Liquid

Inside archive.md, we’ll write the archive structure using nested loops to group posts by year and month.

{% raw %}{% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
  <h2>{{ year.name }}</h2>
  {% assign postsByMonth = year.items | group_by_exp:"post", "post.date | date: '%B'" %}
  {% for month in postsByMonth %}
    <h3>{{ month.name }}</h3>
    <ul>
      {% for post in month.items %}
        <li><a href="{{ post.url }}">{{ post.title }}</a> <span>{{ post.date | date: "%b %-d" }}</span></li>
      {% endfor %}
    </ul>
  {% endfor %}
{% endfor %}{% endraw %}

This will create a list of years, with months nested under them, and the posts listed by title and date under each month.

Step 3: Improve Styling to Match Mediumish

To ensure the archive fits Mediumish aesthetics, you can wrap the elements with classes or customize the archive page layout. Here’s a refined version:

{% raw %}<div class="archive-page">
  {% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
  {% for year in postsByYear %}
    <section class="archive-year">
      <h2 class="year-title">{{ year.name }}</h2>
      {% assign postsByMonth = year.items | group_by_exp:"post", "post.date | date: '%B'" %}
      {% for month in postsByMonth %}
        <div class="archive-month">
          <h3 class="month-title">{{ month.name }}</h3>
          <ul class="post-list">
            {% for post in month.items %}
              <li class="post-item">
                <a href="{{ post.url }}">{{ post.title }}</a> <span class="post-date">{{ post.date | date: "%b %-d" }}</span>
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </section>
  {% endfor %}
</div>{% endraw %}

Step 4: Link the Archive Page in Navigation

Edit your navigation configuration at _data/navigation.yml to include the archive page:

- text: Archive
  url: /archive/

This ensures your archive is easily discoverable from the top nav menu.

Optional: Add Sidebar Widget or Footer Link

If you use a sidebar or footer partial in Mediumish, you can add a small "Browse Archives" section that links directly to /archive/ to enhance discoverability.

<div class="widget">
  <h4>Explore</h4>
  <ul>
    <li><a href="/archive/">Archive</a></li>
  </ul>
</div>

What About Pagination?

This archive approach shows all posts, so pagination isn't necessary. If you want a paginated archive, you’d need a plugin like jekyll-paginate-v2, which isn’t supported on GitHub Pages. So the manual approach above is the best compromise.

Does This Work on GitHub Pages?

Yes — everything here is 100% compatible with GitHub Pages, because it uses only built-in Liquid filters and native Jekyll features. No plugins required.

Future Enhancements to Consider

• Filter archives by category or tag (separate pages)
• Add anchor links for months (table of contents at top)
• Use icons or labels for post types (if using collections)
• Implement infinite scroll or collapsible sections via JavaScript

Conclusion

Creating a dynamic archive page for your Mediumish-powered Jekyll blog is straightforward and highly beneficial. It improves both reader experience and crawlability for SEO. As your blog content grows, the archive becomes a valuable gateway to evergreen material buried in your timeline.

Now that you’ve added an archive, your blog has reached a more advanced level of structure and usability — all while remaining free and static on GitHub Pages.