Create JSON Feed for a Jekyll blog

Ravgeet Dhillon
Ravgeet Dhillon on Oct 25, 20204 min read
Written in
Blog banner for Create JSON Feed for a Jekyll blog

The big difference between JSON feed and XML feed is the ability to read and write JSON. Parsing XML is not an easy task whereas when it comes to JSON, we only have to write only a single line of code and use it any way we want. With the advent of JSON-based feed readers, it would be nice if we too have a JSON feed for our blog. In this article, we will be looking at how can use Jekyll and Liquid syntax to create a JSON feed for our blog.

Contents

Prerequisites

Before proceeding, we assume that

  • Our Jekyll blog is already setup.
  • Our blogs live at the _blogs directory

1. Creating a feed.json file

First, we will create a feed.json file at the root of our website. We will add the following front matter to it:

permalink: /blog/feed.json

We can specify any permalink we want. Most of the time it is either /blog/feed.json or /feed.json.

2. Writing Liquid Code

Let us add the following Jekyll Liquid code to the feed.json file. This feed uses the most recent version of JSON Feed specifications.

{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "{{ 'JSON Feed for ' | append: site.author | xml_escape }}",
    "description": {{ site.description | jsonify }},
    "favicon": "{{ '/assets/images/logos/favicons/apple-touch-icon.png' }}",
    "language": "en",
    "home_page_url": "{{ "/" }}",
    "feed_url": "{{ "/blog/feed.json" }}",
    "user_comment": "This feed allows you to read the blogs from this site in any feed reader that supports the JSON Feed format.",
    "items": [{% for blog in site.blogs reversed %}
        {
            "id": "{{ blog.url | absolute_url }}",
            "url": "{{ blog.url | absolute_url }}",
            "language": "en",
            "title": {{ blog.title | jsonify }},
            "summary": {{ blog.description | jsonify }},
            "content_html": {{ blog.content | jsonify }},
            "date_published": "{{ blog.date | date_to_xmlschema }}",
            "date_modified": "{{ blog.last_modified_at | date_to_xmlschema }}",
            "image": "{{ blog.image.path }}",
            "banner_image": "{{ blog.image.path }}",
            "authors": [{{ blog.author | jsonify }}],
            "categories": {{ blog.categories | jsonify }},
            "tags": {{ blog.tags | jsonify }}
        }
        {% unless forloop.last %},{% endunless %}{% endfor %}
    ]
}

3. Adding to Head

One final step is to add a reference to our JSON feed in the <head> tag of our website so that anyone looking for our blog feed can find it out here.

<link rel="alternate" type="application/json" title="Feed for RavSam Web Solutions" href="/blog/feed.json" />

Result

That’s it. Let us execute bundle exec jekyll serve and check out our feed at http://localhost:4000/blog/feed.json

JSON Feed for a Jekyll blog
JSON Feed for a Jekyll blog

As we can see we have successfully created a JSON feed for our blog. We can submit this blog feed to a JSON Feed Reader.

We can also create JSON feeds for podcasts, microblogs, and submit them to content aggregators. As we move into the future, we will see more and more blogs migrating to the JSON feed as it is extremely easy to consume and setup. If you any doubts or appreciation for our team, let us know in the comments below.

Subscribe to RavSam Web Solutions newletter for information about Website development, mobile apps development and software development

Loved this post? Join our Newsletter 🚀

We write about Nuxt, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder, Freelancer and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development. He is a fan of Jamstack and likes to work with Flutter, Strapi, Nuxt/Vue and Python. Connect with Ravgeet on Twitter and LinkedIn.

KEEP READING

Blog banner for Progress Bar in Next.js

Progress Bar in Next.js

Written in Development
Blog banner for Best VS Code extensions for Nuxt/Vue Projects

Best VS Code extensions for Nuxt/Vue Projects

Written in Development

Got a project or partnership in mind?

Let's Talk

Contact Us ->