Syndicating Content with RSS
Hugo creates RSS feeds for your site automatically using a built-in RSS 2.0 template. If you visit http://localhost:1313/index.xml, you’ll find a pre-built RSS feed that includes all of your pages and looks something like this:
| | <?xml version="1.0" encoding="utf-8" standalone="yes" ?> |
| | <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> |
| | <channel> |
| | <title>Brian's Portfolio</title> |
| | <link>http://localhost:1313/</link> |
| | <description>Recent content on Brian's Portfolio</description> |
| | <generator>Hugo -- gohugo.io</generator> |
| | <language>en-us</language> |
| | <lastBuildDate>Thu, 02 Jan 2020 12:45:51 -0600</lastBuildDate> |
| | |
| | <atom:link href="http://localhost:1313/index.xml" rel="self" |
| | type="application/rss+xml" /> |
| | |
| | <item> |
| | <title>Open Source Software</title> |
| | <link>http://localhost:1313/opensource/</link> |
| | <pubDate>Thu, 02 Jan 2020 12:42:17 -0500</pubDate> |
| | |
| | <guid>http://localhost:1313/opensource/</guid> |
| | <description>My Open Source Software:</description> |
| | </item> |
| | ... |
| | |
| | </channel> |
| | </rss> |
Hugo generates RSS feeds for your sections too. Your projects have their own feed at http://localhost:1313/projects/index.xml.
People won’t know there’s a feed for your site unless you tell them about it. To make your feed discoverable, you can add a meta tag to your site’s header that looks like this:
| | <link rel="alternate" type="application/rss+xml" |
| | href="http://example.com/feed" > |
RSS readers and other tools can use this tag to identify the RSS feed automatically.
Add this code to your themes/basic/layouts/partials/head.html file to add links to any alternative formats associated with your page:
| | {{ range .AlternativeOutputFormats -}} |
| | {{- $link := `<link rel="%s" type="%s" href="%s" title="%s">` -}} |
| | {{- $title := printf "%s - %s" $.Page.Title $.Site.Title -}} |
| | |
| | {{- if $.Page.IsHome -}} |
| | {{ $title = $.Site.Title }} |
| | {{- end -}} |
| | |
| | {{ printf $link .Rel .MediaType.Type .Permalink $title | safeHTML }} |
| | {{- end }} |
This iterates over all of the alternative formats associated with the current page. Right now there’s only one, but you may add more in the future. Each content has a type attribute. Hugo will attempt to escape special characters when you print values using the {{ }} notation. One of those values is the plus sign in application/rss+xml, the value associated with RSS feeds.
To avoid escaping special characters, use the printf function to inject the values. Note the backticks around the value for the $link variable. By using the backticks, you don’t need to escape the double-quotes for the HTML attributes.
The title attribute should reflect the title of the page, so you detect if this is the home page or not, and assign the proper title to the $title variable. This is similar to how you set the value for the <title> tag. However, since the range function is operating on the collection of alternative formats, the current scope is limited to values in that collection. Prefixing the scope with a dollar sign tells Hugo that you’re looking for values in the global scope rather than in the current local scope. That is why you use $.Page.isHome here instead of .Page.isHome.
The final printf statement creates the <link> tag. The safeHTML at the end ensures the HTML snippet itself isn’t escaped. Be careful with safeHTML; only use it with HTML snippets you create, and use it sparingly. Never use it on snippets you don’t trust.
When you visit http://localhost:1313/ in your browser and look at its source, you’ll see the RSS link generated:
| | <link rel="alternate" type="application/rss+xml" |
| | href="http://localhost:1313/index.xml" title="Brian's Portfolio"> |
Since this link to the feed is generated using the .Permalink function, Hugo will use the value of the baseURL field in the config.toml file when you build the site. When it comes time to deploy the site, you’ll specify that value so everything works properly.
If you visit http://localhost:1313/projects/, you’ll see the link for that page as well:
| | <link rel="alternate" type="application/rss+xml" |
| | href="http://localhost:1313/projects/index.xml" |
| | title="Projects - Brian's Portfolio"> |
Hugo can support many output formats. Let’s use Hugo to generate a JSON file that lists your projects.