Embracing the IndieWeb

I’ve used Disqus comments on this site for a long time. At the time I set it up, it was ubiquitous, easy to set up, and a no-brainer. However, after converting my site to Gatsby and getting the site to load Blazing Fast™, the Disqus embed code was the slowest thing on my site. It’s gotten fat over the years and like a bad husband, I’m finally dumping it.

I don’t remember how I stumbled upon it, but the inspiration for this change came from the IndieWeb, a group of hipsters with websites trying to take down THE MAN (aka the “corporate web”). I read through a bunch of their stuff and got really into it.

Anyway, long story short, I decided to go with the distributed & standards-based WebMentions. This gives me control over my content again, doesn’t subject my visitors to a bunch of ad-tracking nonsense, and allows me to remove bloat which was slowing my pages down.

Migrating Existing Comments

I have a fair amount of comments from Disqus that I don’t want to lose. I thought about a bunch of different ways to pull over that comment data. I eventually settled on this workflow:

• Export comment data from Disqus
• Save the exported XML (ugh) to source control
• Use a gatsby-source plugin to convert the XML to GraphQL so that it can be easily used throughout the site

That last step was the hardest one as a plugin didn’t exist to do what I wanted. I ended up writing it myself and am now sharing it with you, dear reader. I did throw it together very quickly and it works very well for my use-case but if you have improvements, don’t hesitate to open a PR.

The New Hotness

In order to get WebMentions working, I made use of Chris Biscardi’s source plugin to pull data from webmention.io’s API. WebMention.io takes care of the nitty gritty of accepting & storing WebMentions so that I don’t have to setup a server for myself (since this is a static site after all). However, that by itself would not be enough since WebMentions aren’t exactly mainstream yet. I still want a way to allow muggles to comment on my posts. That’s where brid.gy comes in. It takes care of converting “normal social media activity” into WebMentions so that my mother, who only knows how to use Twitter, can still comment (if she ever read one of my “weird computer articles”).

This is one spot where I think the philosophy of the IndieWeb really shines. Rather than force an ideal, focus on where people are and bring them over gradually:

Friends are more important than federation. By focusing on actual social relationships that matter to people rather than architectural ideals, from a human perspective, POSSE is more important than federation.

Webmention.io & brid.gy are both OSS IndieWeb projects which means I don’t have to worry about them messing with my data or all-of-a-sudden barfing ads all over me and my visitors.

The new workflow for writing a post and getting feedback now goes something like this:

• I write a pretty cool post
• I post a link to the post on Twitter (or POSSE if you are into acronyms)
• Maybe a few people read it, maybe someone likes or replies to my tweet
• Bridgy looks at the post linked in my tweet, loads the link tag pointing it to webmention.io, and sends a WebMention
• My site rebuilds nightly pulling data from webmention.io, mixing it with my “legacy” Disqus comment data and rendering it all via normal React components which I control
• Or also, maybe someone sends over an actual WebMention not from one of those evil social media sites.

I’m pretty happy with the way it all turned out even though, effectively, until WebMentions proper becomes more ubiquitous, I’m effectively just outsourcing my comments to Twitter now. 🤷‍♂️

Now, I need to figure out how to send a WebMention…