Eleventy JSON endpoint with posts

Eleventy JSON endpoint with posts

Chris Bongers
·Jun 18, 2021·

2 min read

Listen to this article

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

Did you find this article valuable?

Support Chris Bongers by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this