I'll let you in on a little secret while writing this article; I'm also working on this site and finding a neat, low JS alternative to a search function.
Don't get me wrong, Lunr and Algolia are great options, but I would like to keep my website as low impact as possible.
So starting to think about some solutions I remembered a while ago, I made a static JSON search for a website.
This is a great alternative, surely it won't have a fuzzy search or extensive power, but it will be better than having no search.
In today's article, I'll focus on making an endpoint, a JSON file collecting all of my post's titles and URLs.
The whole process will be similar to how I created a XML sitemap for this website.
Adding a JSON endpoint to an Eleventy website
Let's start by making a new file in the src
directory. I'm calling this file static_search.njk
.
---
permalink: '/search.json'
---
[
{% for post in collections.posts %}
{
"title":"{{ post.data.title }}",
"url":"{{ post.url | url }}"
}
{% if loop.last == false %},{% endif %} {% endfor %} {%
]
With this, we tell Eleventy to output this file as search.json
, forcing the JSON extension.
Inside we loop over our post
collection and create a JSON structure with the title and URL of the post.
Last we check once we hit the last loop that we don't add a ,
since it would be invalid JSON.
Now when we build our website, we get the following result.
[
{
"title": "Linux adding a timestamp to the bash history",
"url": "/posts/linux-adding-a-timestamp-to-the-bash-history/"
},
{
"title": "JavaScript insert newly created element after another element",
"url": "/posts/javascript-insert-newly-created-element-after-another-element/"
},
{
"title": "JavaScript insert newly created element before another element",
"url": "/posts/javascript-insert-newly-created-element-before-another-element/"
}
]
Pretty solid, right!
In another article, I'll be guiding you through using this data for a search function.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter