Hi! My name is Christian, an Agile Software Developer, living in Trento (IT).
I am currently working at XPeppers.
Read more about me.

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

,
by

Share on Twitter

Requirements

  • a Jekyll blog (of course)

Create search.json

Create a file search.json with this content:


---
layout: nil
---
[
  {% for post in site.posts %}
    {
      "title"    : "{{ post.title | escape }}",
      "category" : "{{ post.category }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "url"      : "{{ site.baseurl }}{{ post.url }}",
      "date"     : "{{ post.date }}"
    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

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:[email protected]/dest/jekyll-search.min.js"></script>

And in a separate script tag:

<script>
SimpleJekyllSearch({
  search-input: document.querySelector('.search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json',
  searchResultTemplate: '<li><a href="{{ site.url }}{url}">{title}</a></li>'
})
</script>

That’s all!