How (and why) to create a h-feed
Published on under the IndieWeb category. Toggle Memex mode
Assumed audience: This post is most relevant to people who code websites and want to make a feed so people can subscribe to their content. But, this post may be enjoyed by developers more generally, too.
You can subscribe to James' Coffee Blog with RSS. Here is my RSS feed. You may be thinking "James, how do you create your feed? How is that feed generated?" My RSS feed is not created directly. I use a service called Granary that takes special h-feed markup from my homepage and turns it into RSS.
h-feed is a microformat. Microformats are a way of marking up special types of content in a HTML document like a profile page (using h-card), a blog post (using h-entry), or a feed (using h-feed). Using microformats, you can add semantics to certain pieces of information on a web page. For example, I can use h-feed to indicate that the HTML should also be a feed.
I love h-feed because my main feed is written in HTML. This is much easier to maintain than RSS. RSS has a lot of weird quirks. For instance, apparently the format for an author is <author>youremail@example.com - (Name)</author>. If you don't have an email, you need to set <author> - (Name)</author> as your author. James facepalms.
When I publish a new post, anyone polling my feed will make a request to Granary. Granary then converts the h-feed to RSS for subscribers to the RSS feed. You can subscribe directly to the h-feed in supported feed readers, too! I use Monocle and Aperture for feed reading, with which I have had an excellent experience.
How to make a h-feed
That was a lot of jargon. Let's show an example of a h-feed.
<div class="h-feed">
<h2 class="p-name"><span class="p-author">James</span>' Coffee Blog</h2>
<ul>
<li class="h-entry"></li>
<h3 class="p-name"><a href="/edinburgh/" class="u-url">Edinburgh</a></h3>
<p>Published on <time class="dt-published" datetime="2024-01-09 00:00:00">January 09, 2024</time> under the <a href="https://jamesg.blog/category/life/" class="p-category">Life</a> category.</p>
<div class="p-summary e-content" style="max-width: initial;"><p></p></div>
</li>
</ul>
</div>
The HTML above is a slightly modified version of the feed on my homepage. Let's walk through it step by step.
First, I specify a h-feed class, which declares that the code within relates to a feed. I specify a p-name which states the name for the feed and a p-author which states the name of the feed author ("James"). I use h-entry to denote the start of a specific entry in the feed. I use the following attributes to mark up specific entries:
p-name: The blog post name.u-url: The URL of the blog post.dt-published: When the post was published.p-category: A category for the post.p-summary e-content: A summary for the post. The post above doesn't have a summary, but they usually do!
Read the h-feed specification to see all the properties you can add to a h-feed.
Read the h-entry specification to see all the proprerties you can add in your h-entry.
Help feed readers discover your feed
Some feed readers support subscribing to h-feed directly. With that said, most feed readers look for an RSS or Atom link. To create an RSS feed, you can use Granary. Granary takes a h-feed and converts it to other formats. The source code for Granary is open source, but the hosted version is more convenient.
Add the following text to the <head> tag of your website:
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://granary.io/url?input=html&output=rss&url=https://example.com">
Replace example.com with the page on which your feed is published.
When someone enters your website into their feed reader, they will be able to subscribe to your RSS feed generated from your website h-feed. When you subscribe to my homepage, you are subscribing to my Granary RSS feed.
Tagged in IndieWeb.
Responses
Comment on this post
Respond to this post by sending a Webmention.
Have a comment? Email me at readers@jamesg.blog.