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 %}
]
}
This example is using Nunjucks, which you can find documentation for here.
We use the loop.last
variable to only add a comma at the end of items that aren’t the last item.
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!