Switching site search to Algolia, with Netlify build plugin

Switching site search to Algolia, with Netlify build plugin

site search with Algolia backend

Web Notes

2021.05.22

👣 #search #netlify #algolia

Just updated my site search from Simple-Jekyll-Search to Algolia, with the help of Netlify build plugin. In this post, I’ll talk about both of them, just choose the one in your manner.

I have used the Simple Jekyll Search for a long time, the basic idea is to grab the key contents to a JSON file during new Jekyll buildings. No need to configure a server or database, everything leaves to Jekyll and JavaScript.

First, you need to create a template file, for example, ./search.json inside your Jekyll’s root folder. With the help of Liquid, we can generate a valid JSON file with the following template:

---
layout: null
---
[
  {% 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 %}
]

Since I used collections for my site, I included posts inside collections with:

---
layout   : null
---
[
  {% for collection in site.collections %}
  {% assign col = collection.label %}
  {% if forloop.last %}
    {% for post in site[col] %}
    {
      "title"    : "{{ post.title | escape }}",
      "category" : "{{ post.categories | join: ', ' }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "url"      : "{{ post.url }}",
      "content"  : "{{ post.description | strip_html | strip_newlines | remove_chars | escape }}"
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  {% else %}
    {% for post in site[col] %}
    {
      "title"    : "{{ post.title | escape }}",
      "category" : "{{ post.categories | join: ', ' }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "url"      : "{{ post.url }}",
      "content"  : "{{ post.description | strip_html | strip_newlines | remove_chars | escape }}"
    },
    {% endfor %}
  {% endif %}
  {% endfor %}
]

Please validate the generated JSON file before fetching data from it, just make sure the template is robust for production.

Also, you can minify this JSON file with gulp, to reduce the file size… I’ve configured my Jekyll to generate files into public folder.

const gulp = require('gulp');
const jsonminify = require('gulp-jsonminify');

gulp.task('minify-json', () => {
  return gulp.src('public/**/*.json')
    .pipe(jsonminify())
    .pipe(gulp.dest('public'))
})

Next, setup the front-end with HTML/CSS/JS. The simplest configuration is just an input field and a ul for results.

<!-- HTML elements for search -->
<input type="text" id="search-input" placeholder="Search blog posts..">
<ul id="results-container"></ul>

<!-- scripts to set search -->
<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
<script>
  var sjs = SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json'
  })
</script>

Try the rough but working demo below, you can further style it with CSS.