add dynamic search without javascript libraries in jekyll

By -

Why Offer Search on a Static Jekyll Site

Jekyll is beloved for its speed and simplicity, but lacks native search functionality. Most tutorials recommend JavaScript-based libraries like Lunr.js or Algolia, which increase load time or require external dependencies. For small blogs or documentation sites, a fast, no-JavaScript alternative can provide a better experience, especially on low-end devices or slow connections.

Core Idea: Use Liquid and Static Index

Instead of building a full-text search in-browser, we can generate a searchable index during site build time and provide a filtered results page using Jekyll’s built-in Liquid templating. This method is lightweight, easy to maintain, and requires no additional libraries.

Step 1: Create a Search Input Form

Create a page named search.html in the root or _pages directory with a search input:

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

Search this site

Step 2: Build a Static Index Using Liquid

On the same search.html page, below the form, loop through all site posts and filter them using the search term from the URL query:

{% raw %}
{% assign search_query = page.url | split: '?' | last | split: 'q=' | last | uri_decode %}
{% if search_query != '' %}
  
Results for "{{ search_query }}"

  
    
  {% for post in site.posts %}
    {% if post.title contains search_query or post.content contains search_query %}
      
  • {{ post.title }}
    • 
    {% endif %}
  {% endfor %}
  

{% else %}
  
Enter a keyword to search posts.

{% endif %}
{% endraw %}

This example decodes the query from the URL and compares it against post titles and content.

Step 3: Ensure Posts Are Indexed Properly

Make sure your posts have meaningful content in the body and proper YAML front matter, since this method searches through the title and content.

Step 4: Improve Results with Custom Filters

If performance is a concern, or if your blog has hundreds of posts, you can restrict the loop to a recent number of posts, or pre-filter based on tags or categories.

{% raw %}
{% assign recent_posts = site.posts | slice: 0, 100 %}
{% for post in recent_posts %}
  {% if post.tags contains search_query %}
    
  • {{ post.title }}
    • 
  {% endif %}
{% endfor %}
{% endraw %}

    Advantages of This Method

    • No JavaScript required
    • Fully static — works with GitHub Pages and Netlify
    • Very fast search for small to medium sites
    • No reliance on third-party APIs

    Limitations

    • Basic matching — no stemming or typo correction
    • Only works after page reload (no instant results)
    • Can't highlight matching terms in snippets

    Optional: Add Serverless Enhancement

    For larger projects, consider using a hybrid approach. Keep the lightweight fallback but offer enhanced results using Netlify Functions or a remote index via JSON, triggered only when JavaScript is enabled. This ensures progressive enhancement without compromising base performance.

    Conclusion

    Adding search functionality to a Jekyll site doesn't have to be complex. By leveraging Liquid and build-time indexing, you can implement a simple and fast search feature with zero dependencies. This method is ideal for small blogs, documentation, or resource sites focused on speed, privacy, and simplicity.