I have joined the IndieWeb

The collapse of Twitter last year got me thinking about closed platforms and reducing the hold that privately owned platforms have over the Internet.

I’ve been blogging for nine years now on my personal website. I like owning my own domain as it allows me to retain control and stay independent of particular services. Private platforms have a tendency to be bought out and/or ruined by commercial interests, especially now with tech growth slowing down and investors getting uneasy.

However, there are some benefits to closed blogging platforms. Medium provides a network effect that small blogs don’t have. It has an algorithm that promotes posts that users may find interesting. This allows the blogs to organically gain new readers. Additionally, Medium makes it super easy to like, comment, and reply to a post, resulting in a platform that feels a lot more like a social network than your standard cloud blogging service.

Last year, I started looking into ways independent blogs could communicate, just like on Medium. I considered making my blog ActivityPub-compatible, as that would allow users on Mastodon and the Fediverse to like, share, and comment on articles. And then, I stumbled upon the IndieWeb.

What is IndieWeb? #

IndieWeb.org describes the IndieWeb as:

To phrase it another way, IndieWeb is about posting the things you make on your personal website and domain, to keep control of your data and stay independent from private platforms (aka silos). You may still post to silos but you should post to your personal website first.

IndieWeb isn’t just about blogging. You might post Twitter-like microposts, photos, location check-ins, reviews, replies to other sites, and more.

POSSE and Backfeeding #

An important concept is “Publish on your Own Site; Syndicate Elsewhere” (POSSE). This means that you should post the original version on your own website and then share links or copies of your content with relevant social media communities. This is simpler and more flexible than adding ActivityPub support to my blog, and is so obvious that I’ve already been doing it without realising it.

You may be thinking that POSSE is pretty obvious and a bit of a cop-out. But where POSSE truly shines is when combined with backfeeding. A Backfeed is a list of replies, likes, and mentions for the current page. Combined with POSSE, this allows you to see replies to the current page across all different private silos. For example, you might see comments from Mastodon and Reddit at the bottom of a blog post, as well as replies from other IndieWeb websites.

Together, POSSE and backfeeding strike a good compromise between owning your own presence and participating in silos. They improve discoverability and allow for reader interaction.

Webmentions #

The IndieWeb community has authored several standards that allow IndieWeb websites to communicate.

Webmentions allow websites to be notified when another site links to them. By receiving a notification, a site can know about replies and mentions without having to maintain impractical web crawlers or subscribe to a backlinking service.

Receiving Webmentions #

I started by implementing support for receiving Webmentions. This was super easy, I just needed to add a couple of link tags to the top of all pages:

<link rel="webmention" href="https://webmention.io/example.com/webmention">
<link rel="pingback" href="https://webmention.io/example.com/xmlrpc">

WebMention.io is a cloud service for receiving Webmentions. You might think it’s odd to use a cloud service for this, but it’s not a problem as I’m still using my own domain for the pages and could switch the Webmentions service at any time. IndieWeb isn’t about self-hosting, it’s about owning your identity and data.

Sending Webmentions #

I currently send Webmentions manually using Telegraph or IndieWebify.

My blog is statically hosted and is built using GitLab CI. As the site is only published when CI finishes, it would be impossible to include sending web mentions as part of the same CI pipeline. In the future, I’ll probably look into using Brid.gy or some other tool to send Webmentions by monitoring my web feeds.

Microformats2 #

Personal websites can contain a variety of content. Long-form articles, Twitter-like notes, location check-ins, reviews, and replies. Microformats2 is a way of marking up the content of web pages so that machines can understand it better. This is a powerful thing when combined with Webmentions as it allows the receiving website to understand what is linking to it and why.

Microformats2 works by adding classes to elements representing content:

<article class="h-entry">
    <h2 class="p-name">Hello world!</h2>
    <a href="/tags/a-tag/" class="p-category">
        A tag
    </a>
    <div class="e-content">
        This is the article's content.
    </div>
</article>

Implementing support for Microformats2 (mf2) was a huge pain, I cannot overstate how much so. The documentation was very fragmented and inconsistent, and the tools I found to test mf2 didn’t match the documentation.

The most extreme problem I had was with authorship - authorship is how you find out who is the author of a piece of content. The documentation says that you should be able to just include a link to the homepage in each piece of content, and tools should fetch the author info:

<article class="h-entry">
    <div class="e-content">This is an example note</div>
    <a href="https://rubenwardy.com" class="u-author"></a>
</article>

However, this did not work at all. Most of the tools I found didn’t make further requests and only looked at the current page. This makes sense I guess, but it’s annoying that the documentation said it was possible.

The next thing I looked at was including the authorship information in the footer of each page, and then referencing it from each piece of content like so:

<article class="h-entry">
    <div class="e-content">This is an example note</div>
    <a href="/" class="u-author"></a>
</article>
<footer>
    <a href="/" class="h-card">
        <img class="u-photo" src="/me.jpg">
        <span class="p-name">Author Name</span>
    </a>
</footer>

Unfortunately, this didn’t work with any of the tools either. The only thing I found that worked was to include the authorship information in full in every single piece of content.

<article class="h-entry">
    <div class="e-content">This is an example note</div>
    <div class="p-author h-card d-none">
        <a class="u-url p-name" href="https://rubenwardy.com/">rubenwardy</a>
        <img class="u-photo" src="/me.jpg">
    </div>
</article>

Thank you to users on the IndieWeb IRC channels for pointing towards useful tools and documentation, and asking my newbie questions. Without them, I wouldn’t have been able to implement support at all. I believe that they have improved the documentation a bit based on my feedback, although the authorship page still mentions the methods I tried that didn’t work.

The three main tools I used for testing Microformats2 were IndieWebify, pin13.net mf2, Waterpigs mf2.

Backfeeding #

A Backfeed is a list of replies, likes, and mentions for the current page. For example, you might see comments from Mastodon and Reddit at the bottom of a blog post, as well as replies from other IndieWeb websites.

Backfeeding likes #

My blog shows likes from Mastodon and other social platforms using Brid.gy and Webmentions. When I post a link to my blog on social media, Brid.gy monitors activity and sends Webmentions. JavaScript on my blog fetches Webmentions and updates the counter. My blog also caches like counts at build time. In the future, I’ll make it so that the JS only fetches activity since the blog was last built, reducing the amount of work the Web Mentions API needs to do.

Backfeeding replies #

I decided not to implement the backfeeding of comments from social media as I’m concerned about the privacy implications. Just because someone decides to reply publicly on social media silos doesn’t mean that they want their post and their profile picture to appear on my website. Additionally, Webmentions can’t be deleted meaning that the comment may continue to appear on my website even after the author deletes it on the silo.

Two good articles discussing the ethics and privacy challenges of backfeeding include “The ethics of syndicating comments using WebMentions” and “The IndieWeb privacy challenge”.

I may reconsider this in the future. I’d need to make it sufficiently clear to commenters and allow them to opt-out. I’d also need to make sure that deleting the comment on the silo also deletes it from my website.

Comment form #

I added a comment form to the bottom of posts on my blog. My blog is statically hosted. To collect comments, I have a service running on another subdomain that collects any comments and sends them to me. Users can also choose to send comments by email or another method. All comments are moderated before showing on my blog.

To avoid spam, the comment form has a “username” form hidden using CSS. Most spam bots don’t bother applying the CSS so will see the field and fill it in. This is called a honeypot field and is surprisingly effective - I was receiving multiple spam comments a day, but since adding the field I’ve only received a single spam comment.

<style>
    input[name="username"] {
        display: none;
    }
</style>
<input type="text" name="username">

You can find the source code behind commenting on GitLab.

Thoughts on the IndieWeb #

IndieWeb standards are fairly obscure and don’t seem to have been adopted much yet. Of all the posts I’ve made since adding IndieWeb support, this is probably the only one that will actually find websites linked to that can receive Webmentions. If a popular Content Management System, like WordPress, added built-in support for Webmentions and mf2, I could see it suddenly becoming a lot more popular.

Whilst Webmentions are pretty cool, Microformats2 is pretty complicated and was pretty annoying to implement. I know that the IndieWeb crowd will have strong opinions on this, but I quite like how simple JSON-LD was to add support for and that it’s JSON.

As for the community side of IndieWeb, personal websites have seen a big resurgence since the fall of Twitter. I think we’re in a new golden age for RSS and personal websites. I’ve been encouraging a lot of my friends to take up blogging.

Conclusion #

I’m certainly a more technical user than the average blogger. I don’t mind being an early adopter of technology and appreciate the goals of IndieWeb. I like how they try to focus on the people before the technology, even though Microformats2 leaves much to be desired.

I currently only post blog posts on my website. I don’t plan to post notes on my website as I prefer to use Mastodon directly. But I might start posting my photography here.

I’m undecided as to whether I’ll stick with IndieWeb technology in the long term, but I’ll certainly continue to own and publish on my own domain.