<- to Blogs

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' | absolute_url }}",
    "language": "en",
    "home_page_url": "{{ "/" | absolute_url }}",
    "feed_url": "{{ "/blog/feed.json" | absolute_url }}",
    "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 | absolute_url }}",
            "banner_image": "{{ blog.image.path | absolute_url }}",
            "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="https://www.ravsam.in/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.

TAGGED IN

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

Stay upto date with latest news, stories and trends.

Please add a valid email.
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

PEOPLE ALSO READ

WRITE A COMMENT

Please add a valid name
Please add a valid email
Please add a valid comment
Thanks for your comment. Your comment has been sent for approval. Once it is approved, it will be visible here.
There was some problem with this comment submission. Please try again after some time or notify the owners at info@ravsam.in
Got a project or partnership in mind?

Let's Talk ->

If you are looking for Web Design services, welcome to RavSam. Reach out to us to know more about our features, pricing, or anything else.