Skip to main content

IndieWeb-ifying my personal website

Marking up relevant content with microformats and adding the ability to receive webmentions

I've been interested in the IndieWeb since my colleague, Chris R, hosted the first London IndieWeb meetup years ago and at various points I've played with a few bits of it on my website, e.g. OpenID and IndieAuth. As part of my efforts to move away from Twitter and Facebook, I recently joined the very friendly fosstodon.org Mastodon instance and I noticed quite a lot of toots about the IndieWeb including one which mentioned the indiewebify.me website which walks you through various levels of IndieWeb "compliance". I've been interested in finding out more about Webmentions for a while and this gave me the motivation I needed to give them a try.

It turns out I had already become a citizen of the IndieWeb, i.e. Level 1 compliance, back in June 2013 and amazingly (to me anyway) that functionality was still working. Level 2 compliance is about publishing on the IndieWeb and Level 3 compliance is about federating IndieWeb conversations.

Publishing on the IndieWeb

For level 2, the first step was to markup my home page using the h-card microformat, not to be confused with the older hCard microformat. I started doing this by creating separate hidden markup, but I was unhappy with the amount of duplication. And so, after faffing about with middleman for a while and discovering its nested layouts, I managed to markup some of the existing content to reduce the amount of duplication: h-card & p-name, p-org, p-job-title, p-locality & p-country-name and u-photo, p-note, u-uid & u-url. The validator suggested that it was working OK. So far, so good.

h-card validation success

The next step was to markup my blog posts with the h-entry microformat. This was relatively straightforward to implement now that I had a separate blog layout and the validator suggested that it was working OK.

h-entry validation success

At this point, I should have added the ability to send Webmentions to other IndieWeb sites, but it's not completely obvious to me how to do this for a static site. I think I could do it by hooking the webmention gem into my GitHub Action-based build, but I decided to skip this step for now given that it's relatively easy to send a Webmention manually using curl and it's not as if I currently blog that frequently!

Federating IndieWeb conversations

I also decided to skip the steps about posting replies to other people's posts and adding reply contexts to my own site until I actually want to reply to something someone has written.

However, I did configure my site to receive Webmentions using the excellent hosted webmention.io service. This was very easy.

I then added some very basic code to display Webmentions at the bottom of each blog post closely based on Sebastian De Deyne's implementation. For the moment, I'm using JavaScript running on the client-side, but I can see how in time this might lead to putting an unfair load on webmention.io.

A better solution might be to incorporate fetching the latest Webmentions and rendering them in HTML into the automated build, perhaps enhancing them with the latest Webmentions using JavaScript. I think this might be how the webmention.io Jekyll plugin works, but that's a job for another day.

I checked that my website is receiving Webmentions OK by commenting on a blog post using commentpara.de. 🎉🎉

comment added using commentpara.de

Clearly I haven't yet fully achieved even level 2 IndieWeb compliance, but I'm pleased with what I've done so far and, more to the point, what I've learnt in doing it. I should also mention that I found lots of useful advice in the following articles: