Indiewebifying My Website

3 minute read

Note: I’ve updated my site to use a newer template, losing the changes I describe in this post in the process. If you want to understand how IndieWeb works, I suggest you read the links at the end of this post.

In this post I try to explain how I am IndieWebifying my website.

I’ve been on a vacation for a while and apparently when I get off work, I turn into a web developer. I updated all my servers, tinkered with new software and updated how my website is built.

I also came across something – a movement, idea or perhaps a technology for taking control of your online presence. The basic idea is simple: you mostly focus on updating your own website instead of sending your data (images, posts, other updates) to different corporate “silos,” as they are called in this parlance. Then you use different technologies to send your updates to whatever services you also use: perhaps pictures end up on Instagram, short updates on Twitter and so on. The technologies used are built to make sure this is first possible and then perhaps easy.

Another core idea seems to be webmentions, which are an interesting alternative to comment fields. The idea is that I add some metadata to my updates that enables others to refer to those updates in their own updates. So I post an update on my blog and you think you have something interesting to answer, so you post an update on your blog. You add my blog post as a reference and your blog post appears as a comment on my blog. Maybe somebody has some short idea to add, so they comment the post on Twitter and their tweet also ends up as a comment. Everybody gets to use whatever tools or services they prefer and the technology is just there to ensure that everything talks to each other.

This sounds great to me, but there are still a lot of technical details that are either difficult or cumbersome.1 The standards are in development, most of the software seems flaky and getting everything to work together is not as easy as it could be. But I’ve been on vacation and apparently what I want to do with my spare time is web development, so I tested things out on my website.

In practice this means adding metadata to the site about who I am (called a h-card), which is now hidden in the copyright notice. There could be more info, like a canonical picture of me, but I would have to include that on the front page and I couldn’t figure out a nice way of doing that. Additionally, each post now has some new HTML classes that help software figure out what the title is, what is the main text, who wrote the post and when (together they form a h-entry). The site head also has some links that help me to identify myself on different services, currently linking to my Twitter and GitHub profiles (those are the rel=me links).

These are all tied together with two services, Webmention.io and Brid.gy. Webmention.io collects webmentions from my site and sends them forward and Brid.gy connects my website to my Twitter account. This means that if you see a tweet with this post’s address and like it, it shows up on my website at the end of this article. I build my website with Jekyll, which means that it won’t show up instantly, but those likes are added whenever my site is rebuilt.

There is still work to do, like building a custom template for posts that are answers to someone else’s post, adding more metadata to my site, and enabling more services (I would love for Mastodon to work, but it seems a bit complicated) but at least some of it works now.

There’s still a Disqus comment field in use on this site, but my plan is to get rid of it when I get all types of mentions working. For now, you can comment on Disqus if you have any ideas or questions – and you can like this post on Twitter to show up on this page as a like.

  1. You might wonder why this is not more widespread and easy to use if it’s so great. My best guess is that because it’s in the best interest of everyone running corporate online services to make sure this doesn’t happen. They make more money if people stay in their silos. 

Categories:

Updated: