How Do You Add Search Functionality to a Mediumish Jekyll Blog

Why Is Search Important on a Static Blog?

One of the most requested features for Jekyll-based blogs is an internal search system. Unlike WordPress, which comes with built-in search, static blogs like those powered by Jekyll (especially on GitHub Pages) don’t have a database or backend to query content.

This limitation makes it harder for users to find specific posts unless you build strong navigation and tagging systems. But a search box remains the most intuitive UX tool — and it can be implemented entirely on the front end.

In this tutorial, you’ll learn how to add privacy-friendly, lightweight search functionality to your Mediumish blog using two main approaches: Lunr.js and Pagefind.

What Are Your Options for Search in Jekyll?

There are three main types of search you can use:

• External services like Algolia (powerful, but requires API keys and backend integration)
• Client-side libraries like Lunr.js (pure static, simple to use)
• Modern search engines like Pagefind (zero JS dependencies, very fast)

Since Mediumish is a clean, lightweight theme, we’ll focus on purely static, client-side options that can be deployed to GitHub Pages easily.

How to Add Lunr.js Search to Mediumish

1. Create a Search Index File

You’ll need to create a new Jekyll layout to generate a search.json file from your posts:

# _layouts/search.json
---
layout: null
---
[
  {% for post in site.posts %}
    {
      "title": "{{ post.title | escape }}",
      "url": "{{ post.url | absolute_url }}",
      "content": {{ post.content | strip_html | jsonify }}
    }{% unless forloop.last %},{% endunless %}
  {% endfor %}
]

2. Create a New Page for Search

Add a new HTML page at /search/index.html and link it from your navigation.

---
layout: default
title: Search
permalink: /search/
---

<h2>Search this blog</h2>
<input type="text" id="search-box" placeholder="Search posts..." />
<ul id="search-results"></ul>

<script src="https://unpkg.com/lunr/lunr.js"></script>
<script>
fetch('/search.json')
  .then(res => res.json())
  .then(docs => {
    const idx = lunr(function () {
      this.ref('url')
      this.field('title')
      this.field('content')
      docs.forEach(doc => this.add(doc))
    });

    document.getElementById('search-box').addEventListener('input', function () {
      const query = this.value;
      const results = idx.search(query);
      const output = results.map(result => {
        const doc = docs.find(d => d.url === result.ref);
        return `<li><a href="${doc.url}">${doc.title}</a></li>`
      }).join('');
      document.getElementById('search-results').innerHTML = output;
    });
  });
</script>

3. Include the Search Page in Navigation

Edit your _includes/navbar.html or wherever the menu lives in Mediumish:

<li><a href="/search/">Search</a></li>

Pros and Cons of Lunr.js

• Pros: Fully static, no backend, easy to set up
• Cons: Index can be large, may lag on older mobile devices

How to Use Pagefind for Blazing Fast Search

If performance and modern web standards matter more to you, Pagefind is the superior alternative. It indexes your content at build time and provides instant results without bloating your site.

1. Install Pagefind CLI

Pagefind requires Node.js. Install it globally:

npm install -g pagefind

2. Build Your Jekyll Site

Make sure your Jekyll site is fully built:

bundle exec jekyll build

3. Run Pagefind Indexing

Now generate the Pagefind search index from the output folder:

npx pagefind --source "_site"

4. Add Search Box to Your Site

Add the following snippet to any page where you want search:

<script src="/pagefind/pagefind.js"></script>
<div id="search"></div>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    new PagefindUI({ element: "#search" });
  });
</script>

5. Commit Pagefind Output to GitHub

After indexing, a pagefind/ folder is generated inside _site/. You must move that into your Jekyll root and commit it, so GitHub Pages can serve it.

Advantages of Pagefind

• Super fast search even on large blogs
• No JavaScript libraries needed outside of Pagefind
• Privacy-first and fully local

SEO Considerations for Internal Search

While search itself doesn’t directly boost SEO, it improves UX, which reduces bounce rate and keeps users longer. To ensure good indexing:

• Ensure your search.json or Pagefind indexes are not accidentally blocked by robots.txt
• Do not duplicate content in index files — limit excerpts or use strip_html
• Do not use query parameters for search results pages (e.g., avoid ?q=term)

Conclusion: Give Users the Power to Explore

Search isn’t just a nice-to-have — it’s a critical tool for discovery, especially in large content libraries. While Mediumish doesn’t include search out of the box, implementing Lunr.js or Pagefind can dramatically improve usability without sacrificing the speed and simplicity of your static site.

For beginners, Lunr.js offers a fast, no-build alternative. But if you’re ready for next-level performance, Pagefind is an excellent and modern solution that integrates cleanly into any Jekyll blog — especially when hosted on GitHub Pages.

Now that your blog supports search, the next step might be adding interactive content like comments or dynamic forms without a backend. If you’re ready, I can guide you through that too.