Blog Search with Eleventy

I’ve recently reworked my search page, and realised I never wrote about how it works. So let’s have a look into how to set up a blog search in Eleventy. Data source The first thing we need is a data source, which is to say a big list with all our articles, which we can execute our search against. There is no built-in way to do that, but we can have Eleventy generate a JSON file, which we’ll be able to fetch in our frontend. --- permalink: /blog/search/data.json eleventyExcludeFromCollections: true --- {% assign empty_array = '' | split: '' %} [ {% for post in collections.posts %} { "title" : {{ post.data.title | jsonify }}, "tags" : {{ post.data.tags | default: empty_array | jsonify }}, "url" : {{ post.url | jsonify }}, "date" : {{ post.date | date: '%B %e, %Y' | jsonify }} } {% unless forloop.last %},{% endunless %} {% endfor %} ] It’s a bit hacky, but it does the job well. It renders an array of objects looking like this: { "title" : "Blog Search with Eleventy", "tags" :…