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ā¦