I added search functionality to this site using Lunr.js
Following this simple tutorial, I added a search page to this Jeykll-site.
It harnesses Lunr.js under-the-hood. The cool thing about it is that, since Jekyll is a static-site generator, you can build the search index on each deploy using liquid templates.
<script>
// Template to generate the JSON to search
window.store = {
{% for post in site.pages %}
{% if post.exclude_from_search != true %}
"{{ post.url | slugify }}": {
"title": "{{ post.title | xml_escape }}",
"categories": "{{ post.categories | join: ' ' | xml_escape }}",
"content": {{ post.content | strip_html | strip_newlines | jsonify }},
"url": "{{ post.url | xml_escape }}"
},
{% endif %}
{% endfor %}
{% for post in site.posts %}
"{{ post.url | slugify }}": {
"title": "{{ post.title | xml_escape }}",
"categories": "{{ post.categories | join: ' ' | xml_escape }}",
"content": {{ post.content | strip_html | strip_newlines | jsonify }},
"url": "{{ post.url | xml_escape }}"
}
{% unless forloop.last %},{% endunless %}
{% endfor %}
};
</script>
I added an “exclude_from_search” parameter to certain page’s front matter so I can control what shows up in the search results.
This is mostly for my own usage, but maybe if I blog more, it’ll be useful to others.
