Eleventy JSON endpoint with posts

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

Eleventy JSON endpoint with posts

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Adding a JSON endpoint to an Eleventy website

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Adding a JSON endpoint to an Eleventy website

Thank you for reading, and let's connect!