jlelse’s Blog

Thoughts, stories and ideas

Added JSON Feed to this blog

Published on in 💭 Thoughts
Updated on
Short link: https://b.jlel.se/s/76
Share online Translate
⚠️ This entry is already over one year old. It may no longer be up to date. Opinions may have changed.

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. ↩︎

Tags:

Jan-Lukas Else
Interactions & Comments