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!

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

If you liked this post, you might like these ones, too

  1. Picture element as a progressive enhancement

    🔥 A handy quick tip.

    Continue
  2. Easy horizontal and vertical centering in CSS

    🔥 A handy quick tip.

    Continue
  3. How to use the lesson project files to rescue your project

    Sometimes you get a bit stuck in a course, so this quick tip teaches you how to get back on track

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.