Eleventy JSON endpoint with posts

— 3 minute read

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