Implementing simple Jekyll search

There are numerous methods for incorporating search into your Jekyll website. Some of them are difficult to implement, but others are simple. One such tool is Simple Jekyll Search. It is very simple to incorporate into your Jekyll website. If you want you can go for:

• Google search
• Algolia
• Lunr

In the subsequent articles, we’ll go over how to use different search engines. In this blog, I’ll show you how to use a Jekyll search plugin to construct a simple Jekyll search functionality.

Features

• Light weight
• Displays instant search results
• Easy to implement
• Easy debugging process

Prerequisites

• A json file, for example, search.json.
• HTML elements for search bar, for example, search.html.
• A JavaScript file, for example, search-script.js.

Procedures

1. Add search.json at your home location. The location where you have your index.html file.
2. Add search-script.js in your js folder if you have one, otherwise add it at your home location.

3. Add search.html in your _includes folder.

   Note: Update the search.html file with the exact location of search.json and search-script.js files.
4. Add search.html at the location where you want your system to display the search bar or functionality.

Why Your Jekyll Blog Needs Search Functionality

Adding search to your Jekyll blog provides several important benefits:

1. Improves user experience - Visitors can quickly find exactly what they’re looking for
2. Increases page views - Readers discover more of your content through search results
3. Reduces bounce rates - Keep visitors on your site longer when they can easily navigate
4. Enhances content discovery - Makes your older posts more findable and valuable
5. Competitive advantage - Many Jekyll blogs lack search, making yours stand out

What to Do After Implementing Search

Once you’ve added search to your Jekyll blog, take these next steps:

1. Test thoroughly - Try various search terms to ensure results are accurate
2. Customize styling - Match the search box design to your site’s theme
3. Announce the feature - Let your readers know about the new search functionality
4. Monitor usage - Check your analytics to see how visitors use the search feature

Need Help With Your Jekyll Site?

Having trouble with the implementation? Need a custom Jekyll solution? I’m here to help!

Get in touch today:

• Email me at contact@yourdomain.com
• Connect on LinkedIn
• Leave a comment below with your specific question

Subscribe to my newsletter for more Jekyll tips and tricks delivered straight to your inbox!

Credits and references

• christian-fei for developing Simple Jekyll Search.
• Alex Pearce for the idea on how it can be achieved.

If you have questions, let me know in the comments section.