Article 3: Creating an Atom feed
2022-02-14
Goal
In this article we want to create an Atom feed for our blog. An Atom feed is very handy, because users that want to follow the blog will be able to subscribe to the Atom feed and will automatically be notified whenever there is new content. I personally use Feedly, but there are a lot of other tools out there. I found this nice article that has other recommendations.
What do we need to do?
- create the Atom feed xml file
- add a reference to the feed file to index.html
- summary
Implementation
1. Create the Atom feed xml file
In order to provide an Atom feed to the user, we need to describe our blog in the Atom XML format. The specification for this format can be found in RFC 4287. This is the atom.xml for the two last blog posts:
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<!-- Feed metadata -->
<title>fanderl.rocks</title>
<link href="https://www.fanderl.rocks" />
<updated>2022-02-14T12:00:00Z</updated>
<author>
<name>Florian Fanderl</name>
</author>
<id>urn:uuid:f6b6c8b8-1a30-46b9-b7af-48160b53f3a8</id>
<!-- Feed entries -->
<entry>
<title>Creating an atom feed</title>
<link href="https://www.fanderl.rocks/creating-an-atom-feed.html" />
<id>urn:uuid:57eac036-b8d0-43c2-963a-c8b561c14c51</id>
<updated>2022-02-14T12:00:00Z</updated>
<summary>
In this article we want to create an Atom feed for our blog. An Atom feed is very handy, because users that want to follow the blog
will be able to subscribe to the Atom feed and will automatically be notified whenever there is new content.
</summary>
</entry>
<entry>
<title>Using cloudfront to enable https on top of s3</title>
<link href="https://www.fanderl.rocks/using-cloudfront-to-enable-https-on-top-of-s3.html" />
<id>urn:uuid:580422dc-c460-48ef-9043-79233b912c3a</id>
<updated>2022-02-10T12:00:00Z</updated>
<summary>
In this second article we will have a look at how to enable HTTPS on top of S3.
</summary>
</entry>
<!-- older entries skipped -->
</feed>
Feed metadata
The feed metadata block holds information about the feed itself. The title is the name of the feed, which is basically the website. The link contains the website this feed belongs to. The updated field holds the date of the last update of the feed, which is typically the publishing date of the last entry. Author holds some more information of the author. The last field id provides a technical id to identify this blog/feed.
Feed entries
The feed entries correspond to the single articles on our blog. For every article we create, there will be a matching entry. The title holds the title of the article. Link provides the link to the article, where people can go to read the entire article. Id is a technical id that should be unique for every article. Updated tells the reader when the article was published or last updated. Updated in this case means that the article changed drastically and you want to republish it. Updated should not change on minor updates. Summary provides a summary of the blog entry, that is displayed in the feed reader.
2. Add a reference to the feed file to index.html
Now we need to add information to our homepage that this blog does have an atom feed that people can use to follow our content. We need to a link element with some metadata to the <head> section of index.html:
<link rel="alternate" type="application/atom+xml" href="atom.xml" title="fanderl.rocks Atom feed">
One important bit to mention is, that this link is marked as alternate. This means that the linked element holds an alternate version of this pages content. Thus e.g. Google does not mark the content in the feed as duplicate content, because we state that the feed is an alternate representation of the content on index.html.
3. Summary
This time we created an Atom feed for our users, so that they will be able to subscribe to our blog and get udpated when there is new content available. I've always just used this standard, but I never really dove into the details. So that was pretty interesting. Thanks for reading and see you next time!