A Decentralized Comment System

If you have a blog, you’ve probably thought about adding a comment section, and if you’re using a blogging software that has it built-in, you just need to enable it. Otherwise, you either need to implement it yourself or use a third-party service like Disqus; the former isn’t possible with a static site host, and the latter has privacy concerns.

But may I suggest something better? A decentralized comment system powered by webmentions, an open standard to notify any URL when you link to it from your site. What this means is that other people can comment on * Or like, or repost, or mention, or bookmark. your blog posts, using their own websites!

While you can manually implement this yourself on your blog, I’m gonna show you an easier way, and additionally support Bluesky as a comment source!

Setting up IndieAuth#

Before we can work with webmentions, we need to first set up IndieAuth on your website. It’s pretty simple: you link to your GitHub profile from your home page using this HTML, and on your GitHub profile you need to link back to your URL.

<link href="https://github.com/chailotl" rel="me">

Setting Up Webmentions#

Courtesy of Aaron Parecki, we have the Webmention.io service to collect and validate webmentions for us! To use it, you need to log in with your website, and then you put this HTML in your header. This will let other websites know where your webmentions endpoint is.

<link rel="webmention" href="https://webmention.io/axoga.to/webmention" />

And with a bit of client-side JavaScript we can fetch our webmentions and format them into a comment section! Adding support for likes and reposts will be left as an exercise for the reader

const comments = document.getElementById("comments");
// This way will work in your dev env
const url = "https://axoga.to" + window.location.pathname;

fetch("https://webmention.io/api/mentions.jf2?target=" + url)
	.then(response => response.json())
	.then(json => json.children.filter(entry => entry["wm-property"] == "in-reply-to"))
	.then(replies => replies.forEach(reply => {
		let blockquote = document.createElement("blockquote");
		let a = document.createElement("a");
		let p = document.createElement("p");

		a.textContent = reply.author.name;
		a.setAttribute("href", reply.url);
		p.textContent = reply.content.text;

		blockquote.appendChild(a);
		blockquote.appendChild(p);
		comments.appendChild(blockquote);
	}));

Setting up Brid.gy#

In a perfect world, everyone would have their own blogs and support webmentions. Unfortunately, that is not the case. Aside from convincing them to start a blog, * Which you should still do! we have another way that leverages Bluesky to generate webmentions, using another service called Brid.gy!

To use it, make sure your URL is on your Bluesky profile before you log in with your handle and an app password; you can remove it afterwards. Once you’ve done that, it will now automatically search Bluesky for valid webmention targets!

To start receiving comments, you just need to post your blog post URL on Bluesky, and any comments your Bluesky post receives will be syndicated as webmentions to your blog post! How cool is that? This extends to likes and replies as well.

There is a lot more you can do with webmentions and Brid.gy, and set up all sorts of fancy integrations, but for just adding a comment section to your blog I think this is plenty sufficient ^^