A stateless blog with Webmentions

It happened. I have rebuilt my blog using Next.js and Markdown files. It was an opportunity to further improve my React skills and experiment with Next.js' server-side rendering. While doing this, I have decided to throw out my old database-powered comment system and replace it with Webmentions.

Webmention is a W3C recommendation that describes a simple protocol to notify any URL when a website links to it, and for web pages to request notifications when somebody links to them.

To receive webmentions, you will need to add a small link tag to your website's head that describes where to send webmentions to if your page is mentioned somewhere on the web:

<link rel="webmention" href="...">

The thing is, the protocol only describes a way of letting the owner know about a mention in a webhook-like way. You will still need to set up a database to keep track of mentions and platforms like Twitter don't magically send out webmentions (yet). Thankfully, 2 services solve that.

The first service webmention.io is a hosted service which provides you with webmention urls so that they can keep track of all your mentions. They provide you with small backend management system and an API to retrieve all mentions for a specific page.

<link rel="webmention" href="https://webmention.io/jenssegers.com/webmention" />

The second service brid.gy enables webmention support for your Twitter and other social media accounts. After authorizing it simply checks your recent tweets and sends out webmentions based on the webmention url found on your website. There's not really anything you need to configure after setting it up.

Once you've received some webmentions, you can use the API provided by webmention.io to display webmentions on your page:

const webMentionsUrl = new URL('https://webmention.io/api/mentions.jf2');

webMentionsUrl.searchParams.append(
  'target',
  window.location.href
);

webMentionsUrl.searchParams.append(
  'token',
  'your-api-token'
);

const mentions = await fetch(webMentionsUrl.toString())
  .then(response => response.json())
  .then(data => data.children);

That's it. I went through this quite quickly because there are tons of other posts about webmentions. I discovered webmentions a while ago after reading Sebastian De Deyne's blog post, so be sure to check it out!

Find out what happens if you mention this post on Twitter!