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.
Credits and references
- christian-fei for developing Simple Jekyll Search.
- Alex Pearce for the idea on how it can be achieved.
Good to know: Play with your
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.
