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 somewhat close to W3C and WHATWG, 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 views and experiences.
If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Read More
Maybe of interest to you, too:
- Next: CSS: The Reason Why Selectors Should Be Ordered, Too
- Previous: The Scientific Irony
- More under Development
- More from 2017
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.