Static Site Generation With Grow: How to Set Up Syndication Feeds

Published on November 13, 2017 (↻ May 18, 2024), filed under Development (RSS feed for all categories).

This post is possibly outdated.

Grow is a static site generator that I’ve slowly been switching to on my own projects—recently with (officially still unannounced) HH Kaffee. I’ve been switching to Grow because of its ambitions around quality, its unique internationalization capabilities, my familiarity with the system (we’ve used like at Google), and my familiarity with the team (I’ve worked with all of them at Google, and they’re some of the greatest people I’ve worked with as well). [Later, in 2021, I then switched from Grow to Eleventy.]

It’s been ages that I’ve last written anything like a technical how-to (if you exclude my books) but here, now, I wish to lay out how to do something with Grow that’s not overly difficult, but also not well-documented—to set up syndication feeds.

1. Set Up a Feed Template

There are differences between RSS and Atom making Atom the more desirable syndication format, however I’m okay with using RSS (2.0) for a feed, and not Atom. You may not find it hard to use Atom instead.

The first step is to create respective view. I suggest to set up a feed.xml like the following:

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
  <channel>
    <title>{{podspec.title}}</title>
    <link>{{doc.pod.env.url}}</link>
    <description>{{podspec.description}}</description>
    <language>{{doc.locale}}</language>
      {% for items in g.collections(['roasters', 'cafes', 'posts']) %}
      {% for item in (items.docs(order_by='date', reverse=True) | list)[0:5] %}
      <item>
        <title>{{item.title}}</title>
        <link>{{item.url}}</link>
        <description>{% if item.html %}<![CDATA[
          {{item.html|striptags|truncate(250, end=' …')}}
        ]]>{% endif %}</description>
        {%+ if item.date %}<pubDate>{{item.date|date(format='d MMM YYYY', locale='en')}}</pubDate>{% endif %}
        <guid>{{item.url}}</guid>
      </item>
      {% endfor %}
      {% endfor %}
  </channel>
</rss>

The template is not perfect yet (I’ve only had one scrutinizing look at the RSS 2.0 spec and I’m still—notice the {%+—improving output formatting) but it should work for this demonstration. I’m thinking about putting the project in question up on GitHub I put the project up on GitHub [latest version using Grow: 1.71.0], and plan to use prettier code sample embeds.

The most important thing to note is probably the selection of news items. In this case, the feed pulls from three collections (the roasters, cafés, and posts featured on HH Kaffee) to pick five of each in reverse chronological order.

You can leave the collections array blank or should otherwise select your own collections (g.collections(['roasters', 'cafes', 'posts'])); likewise, then, can you choose a different number of items to be included ([0:5]).

2. Set Up a Feed View

Next, define the feed’s view, which is just a simple frontmatter YAML file (/pages/feed.yaml here):

$path@: /feed/index.xml
$view: /views/feed.xml
$hidden: true

This is also just from my own setup, where $view is key to link the template and $hidden is useful not to link the feed in the navigation (I populate the nav through all /pages).

3. Test

Lastly, test your feed file—with this and the default Grow setup, it should reside at localhost:8080/feed/index.xml. (To compare with HH Kaffee’s current output, check hhkaffee.com/feed/.)

There are different views on correct feed MIME types but make sure to test your feed to be delivered correctly. Personally I rely on my providers’ defaults (which all seem to be application/xml) and don’t have any problems with those.

❧ That much for how to add feeds in Grow. As I’m moving away from my old (but accidental) “either manual or WordPress” approach, specifically in those projects where I want quality and scalability, I may write more about Grow in the future. Keep it locked.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)