add search to jekyll without javascript frameworks

Why Use Native Search for Jekyll

Most Jekyll blogs rely on static content, which makes traditional database-driven search impossible. However, you don’t need heavy JavaScript frameworks like Vue or React to implement search. By leveraging JSON, Liquid, and a bit of vanilla JavaScript, you can create a responsive search experience that works on any static host—even GitHub Pages.

Core Concepts

Here’s the approach we’ll take:

• Generate a JSON index of your posts during build time
• Load the JSON file with plain JavaScript
• Match user input against title and content
• Display matching posts as results dynamically

Step 1: Create a Search Index in JSON

Add a new file called search.json at the root of your project:

---
layout: null
---
[
{% raw %}{% for post in site.posts %}
  {
    "title": "{{ post.title | escape }}",
    "url": "{{ post.url | absolute_url }}",
    "date": "{{ post.date | date: '%Y-%m-%d' }}",
    "content": "{{ post.content | strip_html | strip_newlines | escape }}"
  }{% if forloop.last == false %},{% endif %}
{% endfor %}{% endraw %}
]

This file will contain all your blog content in a searchable JSON array.

Step 2: Add a Search Form

Create a simple search box inside any page, usually in _includes/header.html or a dedicated search.html page:

Step 3: Load JSON and Add Search Logic

Below the form, include this vanilla JavaScript to load search.json and handle search functionality:

<script>
fetch('/search.json')
  .then(response => response.json())
  .then(data => {
    document.getElementById('search-input').addEventListener('input', function() {
      const query = this.value.toLowerCase();
      const results = data.filter(post =>
        post.title.toLowerCase().includes(query) ||
        post.content.toLowerCase().includes(query)
      );

      const resultsList = document.getElementById('search-results');
      resultsList.innerHTML = '';

      results.slice(0, 10).forEach(post => {
        const li = document.createElement('li');
        const link = document.createElement('a');
        link.href = post.url;
        link.textContent = post.title;
        li.appendChild(link);
        resultsList.appendChild(li);
      });
    });
  });
</script>

Step 4: Style the Results

Add minimal CSS to make the results readable and accessible:

#search-results {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

#search-results li {
  margin-bottom: 0.5rem;
}

Step 5: Limit Search Scope

To reduce file size or increase relevance, you can limit the number of posts indexed in search.json:

{% raw %}{% for post in site.posts limit:100 %}{% endraw %}

Or, add custom front matter fields like search: false and exclude those:

{% raw %}{% unless post.search == false %}{% endraw %}

Step 6: Make Search Page SEO Friendly

While search pages aren’t meant to rank, you can still add basic SEO metadata to avoid duplication:

---
layout: default
title: "Search"
permalink: /search/
noindex: true
---

And prevent crawling via robots.txt:

User-agent: *
Disallow: /search/

Use Cases and Extensions

This lightweight search approach works perfectly for:

• Blogs with less than 500 posts
• Documentation sites
• Portfolios or product pages

You can extend this with:

• Highlighting matched keywords
• Tag or category filtering
• Search suggestions

Conclusion

Implementing a search feature in Jekyll doesn’t require external libraries or frameworks. By generating a static JSON index and using plain JavaScript, you can add fast, effective search without compromising your site’s performance or simplicity. This method works out of the box with GitHub Pages, Netlify, or any static host—and it ensures your site remains fast, minimal, and user-friendly.