Use Simple-Jekyll-Search on your blog in these easy steps

Published on

2 min read
Table of contents

Requirements

  • a Jekyll blog (of course)

Create search.json

Create a file search.json with this content https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/example/search.json

Prepare HTML

In your template add the following markup to define a placeholder for the search widget:

<input type="text" id="search-input" placeholder="search posts..">
<br/>
<div id="results-container"></div>

Initialize search widget

Add the following script tag to your base/default _layout:

<script src="https://unpkg.com/[email protected]/dest/simple-jekyll-search.min.js"></script>

And in a separate script tag:

<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
noResultsText: 'No results found',
limit: 10,
fuzzy: false,
exclude: ['Welcome']
})
</script>

That’s all!