Creating JSON Feeds with Jekyll to Power External Tools

While Jekyll is a static site generator, it is fully capable of outputting structured data formats like JSON. This enables powerful integrations without requiring a traditional CMS or backend server. By exposing content in JSON, you can feed your blog posts into JavaScript apps, search engines, or third-party tools.

Why JSON Feeds Matter for Modern Digital Marketing

Marketing today is omnichannel. You may want to:

• Send the latest posts to a custom email newsletter tool.
• Index posts for client-side search (e.g., Lunr.js or Algolia).
• Build a progressive web app (PWA) or mobile frontend that consumes blog data.
• Use your Jekyll blog as a lightweight headless CMS.

All of these require one thing: structured data—usually in the form of JSON.

Generating a JSON Feed in Jekyll

Jekyll can create any type of file, not just HTML. By creating a custom layout with a .json extension, you can output posts in structured JSON format.

Step 1: Create a Feed File

In your root directory, create a new file called feed.json:

---
layout: jsonfeed
permalink: /feed.json
---

Step 2: Create the JSON Layout

Inside your _layouts/ folder, create a new layout file: jsonfeed.html. This layout will define the structure of your JSON feed:

{
  "version": "https://jsonfeed.org/version/1",
  "title": "{{ site.title | escape }}",
  "home_page_url": "{{ site.url }}",
  "feed_url": "{{ site.url }}/feed.json",
  "description": "{{ site.description | escape }}",
  "items": [
    {% for post in site.posts %}
    {
      "id": "{{ site.url }}{{ post.url }}",
      "url": "{{ site.url }}{{ post.url }}",
      "title": {{ post.title | jsonify }},
      "content_text": {{ post.excerpt | strip_html | strip_newlines | jsonify }},
      "date_published": "{{ post.date | date_to_xmlschema }}"
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}

This outputs a valid JSON Feed (v1 spec) that can be consumed by any JSON parser.

Use Cases for JSON Feeds in Jekyll Mediumish

1. Build a Custom JavaScript Search Engine

You can use the JSON feed to index your posts with Lunr.js or Algolia. Simply fetch /feed.json and process the items array. Here’s a simplified example:

fetch('/feed.json')
  .then(response => response.json())
  .then(data => {
    data.items.forEach(post => {
      console.log(post.title, post.url);
    });
  });

This allows real-time search on the frontend without relying on plugins or server processing.

2. Populate a Newsletter Tool Automatically

If you use an email service that supports RSS/JSON feeds (like Mailchimp, EmailOctopus, or Buttondown), you can automate sending new blog posts. Just point the service to your /feed.json URL.

3. Serve JSON to a JavaScript Frontend

You can use the JSON output as the "API" for your blog, and build a modern frontend with React, Vue, or Svelte. Even if your blog is static, your frontend can feel dynamic, pulling in content and rendering it client-side.

4. Enable External App Integration

For marketers running automation tools, the JSON feed provides a stable, machine-readable entry point for services like:

• Zapier (via Webhooks)
• IFTTT
• Headless CMS integrations

Creating JSON per Post for Granular Access

Beyond a global /feed.json, you can also expose each post as individual JSON. To do this:

Step 1: Create a New Layout

Make a layout file named jsonpost.html inside _layouts/:

{
  "id": "{{ page.url }}",
  "title": {{ page.title | jsonify }},
  "content": {{ content | strip_newlines | jsonify }},
  "date": "{{ page.date | date_to_xmlschema }}"
}

Step 2: Use a New Permalink Style

In your post front matter, set a permalink to generate a JSON version:

---
layout: jsonpost
permalink: /posts/my-post.json
---

Now you can access each post in JSON via /posts/my-post.json.

Tips for Clean and Valid JSON Output

• Always use the jsonify filter to escape characters properly.
• Use strip_newlines to prevent unwanted line breaks.
• Test your output in a JSON linter like JSONLint.

Final Thoughts: Using Jekyll as a Lightweight API

Even though Jekyll doesn’t run on a server, it’s powerful enough to expose structured data for many use cases. With JSON feeds, your Mediumish-based blog becomes much more than a publishing tool—it becomes a data source that can integrate with virtually any modern platform or frontend.

From automating marketing campaigns to building dynamic interfaces, JSON opens up your content for reuse, remixing, and reach far beyond a static site.