Jens Oliver Meiert

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

Post from November 13, 2017 (↻ August 10, 2021), filed under .

In 2021, I switched from Grow to Eleventy. At the moment, this post should still give reasonable advice, however, and I updated several links to give you an idea of where things stood.

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).

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.

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2017 → Static Site Generation with Grow: How to Set Up Syndication Feeds

Last update: August 10, 2021

Professional frontend developers produce valid HTML and CSS.