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
- Add search.json at your home location. The location where you have your index.html file.
- Add search-script.js in your js folder if you have one, otherwise add it at your home location.
-
Add search.html in your
_includesfolder.Note: Update the search.html file with the exact location of search.json and search-script.js files. - 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:
- Improves user experience - Visitors can quickly find exactly what they’re looking for
- Increases page views - Readers discover more of your content through search results
- Reduces bounce rates - Keep visitors on your site longer when they can easily navigate
- Enhances content discovery - Makes your older posts more findable and valuable
- 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:
- Test thoroughly - Try various search terms to ensure results are accurate
- Customize styling - Match the search box design to your site’s theme
- Announce the feature - Let your readers know about the new search functionality
- 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.
css and search-script.js file to customize the search as per your needs.If you have questions, let me know in the comments section.
