Adding a Search Functionality to Your Jekyll Blog with Lunr.js

Adding a search functionality to your Jekyll blog can greatly improve user experience by allowing visitors to find content quickly. One popular way to achieve this is by integrating Lunr.js, a powerful JavaScript library for full-text search. This guide will walk you through the steps to add Lunr.js to your Jekyll site.

Why Use Lunr.js?

Lunr.js enables client-side search, meaning searches are performed in the browser without needing server-side processing. It is lightweight, easy to implement, and works well with static sites like those generated by Jekyll. Using Lunr.js, you can create a fast, responsive search experience for your visitors.

Setting Up Your Jekyll Blog

Before integrating Lunr.js, ensure your Jekyll site is ready. You should have a collection of posts or pages you want to make searchable. Organize your content properly and verify your site builds correctly locally.

Generating the Search Index

The core of Lunr.js is the search index, which is a JSON file containing the content to be searched. You can generate this index during your Jekyll build process using a plugin or custom script. Here's a simple example:

Create a new file, e.g., search.json, and populate it with your posts' data:

Note: You can automate this process with a Jekyll plugin or a custom script that runs during build.

Sample search.json content:

{
  "posts": [
    {
      "title": "First Post",
      "url": "/first-post/",
      "content": "This is the content of the first post."
    },
    {
      "title": "Second Post",
      "url": "/second-post/",
      "content": "Details about the second post are here."
    }
  ]
}

Integrating Lunr.js into Your Site

Next, include Lunr.js and your search script in your site's layout or template. You can add these scripts just before the closing </body> tag:

<script src="https://unpkg.com/lunr/lunr.js"></script>
<script src="/assets/js/search.js"></script>

Creating the Search Script

In search.js, load the JSON index, initialize Lunr, and handle search queries. Here's a simplified example:

fetch('/search.json')
  .then(response => response.json())
  .then(data => {
    var index = lunr(function () {
      this.field('title')
      this.field('content')
      this.ref('url')

      data.posts.forEach(function (doc) {
        this.add(doc)
      }, this)
    })

    var searchInput = document.getElementById('search-input')
    var resultsContainer = document.getElementById('search-results')

    searchInput.addEventListener('input', function () {
      var query = this.value
      var results = index.search(query)
      resultsContainer.innerHTML = ''

      results.forEach(function (result) {
        var post = data.posts.find(function (p) { return p.url === result.ref })
        var resultItem = document.createElement('div')
        resultItem.innerHTML = '' + post.title + ''
        resultsContainer.appendChild(resultItem)
      })
    })
  })

Adding the Search Interface

Finally, add a search box and results container to your page where you want the search feature:

<input type="text" id="search-input" placeholder="Search..."/>
<div id="search-results"></div>

Conclusion

Integrating Lunr.js into your Jekyll blog provides a fast and efficient client-side search solution. With some setup, you can greatly enhance your visitors' experience by making your content easily discoverable. Remember to keep your search index updated whenever you add new content.