Migrating an RSS feed from Jekyll to Hugo

Posted on

If you’re making the switch from building your site with Jekyll to Hugo then you may have noticed that the default RSS feed URL in Hugo is different, and the content/structure of the feed changes too.

If you have followers of your RSS feed then you’ll want to make sure that they continue to get notified of your posts.

Here I’ll run through the steps to modify the RSS template and configuration so that the transition is seamless.

Change the RSS Feed URL to /feed.xml #

The first thing to do is change the default RSS feed’s URL from Hugo’s default /index.xml to /feed.xml. To do this add the following to your config.yml:

outputFormats:
  RSS:
    mediatype: "application/rss"
    baseName: "feed"

Now, if you check your site’s /feed.xml you’ll see your RSS is now there. Hurrah!

Changing the RSS feed template #

We’re not done yet though. The content/layout of the RSS feed is different - for example, it only shows a summary of each post and not the full content.

To make changes here you’ll want to make a copy of the default RSS template and add it to your site in \layouts\rss.xml.

For each item change the <description> (this is the content of each post) from {{ .Summary | html }} to {{ .Content | html }}.

I recommend adding an icon for your feed in the <channel><image> as follows:

 <url>https://yoursite.example.com/icon.png</url>
 <title>{{ .Site.Title }}</title>
 <link>{{ site.BaseURL}}</link>

There are some other fields in Jekyll’s Atom feed (see https://jekyllrb.com/feed.xml for an example) which you could consider migrating over such as media:thumbnail and media:content for each post. To add those:

 {{ with .Params.images }}
 {{ range first 1 . }}
 <media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="{{ . | absURL }}" />
 <media:content xmlns:media="http://search.yahoo.com/mrss/" medium="image" url="{{ . | absURL }}"/>
 {{ end }}
 {{ end }}

Hope that helps. Happy blogging!

You might also like

Monetizing your Content with Coil

Setting up the Web Monetization API

Styling External Links with an Icon in CSS

Using a CSS pseudo selector targeting only external links