3.8 KiB
title | aliases | date | draft | toc | description | images | tags | |||
---|---|---|---|---|---|---|---|---|---|---|
Add a Json Feed to Any Hugo Site |
|
2024-12-27T20:13:26-07:00 | false | false | I fought with Hugo to add a JSON Feed so you don't have to #hugo #posse |
|
Super quick post tonight as a precursor to a post that I am working on about me adopting a "Post Once Syndicate Everywhere" (POSSE) strategy for my content.
I just spent way too long wrestling with Hugo (which runs this site) to add a JSON Feed compatible feed so that I can more reliably publish updates to this blog to the Fediverse/Threads/Bluesky and discovered that, ultimately, it is actually really simple. So I decided t document here in case anyone else needs a hand.
- Add the following to your hugo.toml file
[outputFormats.jsonfeed]
mediaType = "application/json"
baseName = "feed"
rel = "alternate"
isPlainText = true
[outputs]
home = ["html", "jsonfeed", "rss"]
section = ["html", "jsonfeed", "rss"]
This creates the JSON Feed output format and adds the outputs to both "Home" and each section (for example, Posts).
-
In the root of your project (no need to mess with the theme if you are using one) make sure you have a layouts folder, and a _default folder inside of it (so layouts/_default)
-
In the layouts/_default directory create list.jsonfeed.json and copy the following into it:
{{- $pctx := . -}}
{{- if .IsHome -}}{{ $pctx = site }}{{- end -}}
{{- $pages := slice -}}
{{- if or $.IsHome $.IsSection -}}
{{- $pages = $pctx.RegularPages -}}
{{- else -}}
{{- $pages = $pctx.Pages -}}
{{- end -}}
{{- $limit := site.Config.Services.RSS.Limit -}}
{{- if ge $limit 1 -}}
{{- $pages = $pages | first $limit -}}
{{- end -}}
{{- $title := "" }}
{{- if eq .Title .Site.Title }}
{{- $title = .Site.Title }}
{{- else }}
{{- with .Title }}
{{- $title = print . " on "}}
{{- end }}
{{- $title = print $title .Site.Title }}
{{- end }}
{
"version": "https://jsonfeed.org/version/1.1",
"title": {{ $title | jsonify }},
"home_page_url": {{ .Permalink | jsonify }},
{{- with .OutputFormats.Get "jsonfeed" }}
"feed_url": {{ .Permalink | jsonify }},
{{- end }}
{{- if (or .Site.Params.author .Site.Params.author_url) }}
"authors": [{
{{- if .Site.Params.author }}
"name": {{ .Site.Params.author | jsonify }},
{{- end }}
{{- if .Site.Params.author_url }}
"url": {{ .Site.Params.author_url | jsonify }}
{{- end }}
}],
{{- end }}
{{- if $pages }}
"items": [
{{- range $index, $element := $pages }}
{{- with $element }}
{{- if $index }},{{end}} {
"title": {{ .Title | jsonify }},
"id": {{ .Permalink | jsonify }},
"tags": ["{{ delimit .Params.tags "," }}"]
"url": {{ .Permalink | jsonify }},
{{- if .Site.Params.showFullTextinJSONFeed }}
"summary": {{ with .Description }}{{ . | jsonify }}{{ else }}{{ .Summary | jsonify }}{{ end -}},
"content_html": {{ .Content | jsonify }},
{{- else }}
"content_text": {{ with .Description }}{{ . | jsonify }}{{ else }}{{ .Summary | jsonify }}{{ end -}},
{{- end }}
{{- if .Params.cover.image }}
{{- $cover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
{{- if $cover }}
"image": {{ (path.Join .RelPermalink $cover) | absURL | jsonify }},
{{- end }}
{{- end }}
"date_published": {{ .Date.Format "2006-01-02T15:04:05Z07:00" | jsonify }}
}
{{- end }}
{{- end }}
]
{{ end }}
}
This lets Hugo know how to format these feeds.
... And that's it! You can check out my JSON feed at https://thesatelliteoflove.com/posts/feed/json