Added JSON Feed to this blog

Today I updated my blog setup to the new Hugo version 0.59, which includes nothing big, but several small improvements. In addition to that I finally added support for JSON Feed to this blog.

JSON Feed is popular among IndieWeb folks and my feed reader Miniflux supports it too. Unfortunately it isn’t yet supported natively by Hugo, so I needed to manually add it using a custom output format.

I took a lot of inspiration from Jamie Tanna and his Hugo theme, as well as the tutorial from Arjen Schwarz.

In the end all I had to do was to create a list.jsonfeed.json in the layouts/_default folder of my theme1

{{- $pctx := . -}}
{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
{{- $pages := $pctx.RegularPages -}}
{{- $limit := .Site.Config.Services.RSS.Limit -}}
{{- if ge $limit 1 -}}
{{- $pages = $pages | first $limit -}}
{{- end -}}
{
    "version": "https://jsonfeed.org/version/1",
    "title": "{{ .Site.Title }}",
	"description": "{{ .Site.Params.description }}",
    "home_page_url": "{{ .Permalink}}",
    "feed_url": "{{ .Permalink }}feed.json",
	"author": {
		"name": "{{ .Site.Author.name }}",
		"url": "{{ .Site.Author.link }}"
    },
    "items": [
        {{ range $index, $pages := $pages }}
        {{ if ge $index 1 }}, {{end}}{
            "id": "{{ .Permalink }}",
            "url": "{{ .Permalink }}",
            "title": {{ .Title | jsonify }},
            "content_html": {{ .Content | jsonify }},
            "summary": {{ .Summary | jsonify }},
            "date_published": {{ dateFormat "2006-01-02T15:04:05-07:00" .Date | jsonify }},
            "date_modified": {{ dateFormat "2006-01-02T15:04:05-07:00" .Lastmod | jsonify }},
            "tags": {{ .Params.Tags | jsonify }}
        }
        {{ end }}
    ]
}

…as well as add this to my config.yaml file (I use YAML for my Hugo config):

outputs:
  home:
    - "html"
    - "rss"
    - "jsonfeed"
  section:
    - "html"
    - "rss"
    - "jsonfeed"
  taxonomy:
    - "html"
    - "rss"
    - "jsonfeed"
  taxonomyTerm:
    - "html"
    - "rss"
    - "jsonfeed"

outputFormats:
  jsonfeed:
    mediaType: "application/json"
    baseName: "feed"
    isPlainText: true

I validated the feed and it shows everything is setup correctly, but if you find a mistake, feel free to contact me.

The JSON Feed is available here: https://jlelse.blog/feed.json


  1. You might need to adopt this to your own needs, for example if your author config doesn’t contain a link etc. [return]
20 years old student who writes about everything he cares about.