Create a JSON feed with 11ty

Eleventy is great because you can literally output anything. To output a JSON feed with 11ty, all you need to do is create a file called feed.njk and adding the following to it:

Code language
text
---
permalink: '/my-cool-feed.json'
---
{
"posts": [
{% for item in collections.posts %}
{
"title": "{{ item.data.title }}",
"url": "{{ item.url }}"
}{% if not loop.last %},{% endif %}
{% endfor %}
]
}

The JSON feed will give you an output like this:

Code language
json
{
"posts": [
{
"title": "Quick and simple image placeholder",
"url": "/posts/quick-and-simple-image-placeholder/"
},
{
"title": "Color Palette Generator",
"url": "/posts/color-palette-generator/"
}
]
}

This little snippet creates a feed of posts that have a title and url. Whatever data you have access to in your collection, you can output in this feed, too.

Pro tip: Make sure you set the permalink to have a .json extension so the browser knows that it is application/json. That’ll save you a lot of server hassle!

You can grab a basic Eleventy starter for this demo here.