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