I added search functionality to this site using Lunr.js

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.


« This website is upside-down
The only acceptable license plate on a Tesla. »