Adding Webmentions to My 11ty Blog

• February 03, 2026
• 4 min read

• 11ty
• update

I was thinking about this for a long but I finally added webmentions to my blog. I had zero knowledge about this from earlier, so I had to do a lot of reading about the webmention protocol to completely understand it. But I did... and it's live on my website. You can check out this post which has received some webmentions via Mastodon by the time of writing this post.

When you talk about webmentions, receiving and sending them are two different things. And it becomes little tricky to implement this on a static website like mine, which is built using 11ty static site generator.

In this post, I will explain my process of how I implemented both the receiving and sending of webmentions. Let's get to it.

1. Receive incoming webmentions

When other people link to your website from their blogs or interact with your blog posts on Mastodon or Fediverse, they send you webmentions that you need to receive to show on your website.

Using webmention.io service

To receive, I used webmention.io, created by Aaron Parecki, that automatically scans receiving webmentions and lets you access them via an API. When you sign up for it, it gives you a username, and you need to add below <link> tags to your HTML. It looks like this on my blog:

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

And after you add this, the webmention.io service starts collecting webmentions on your behalf. You can pull these and show on your website via their API.

From here, you need to get the webmention.io API key token that we will need in the next step.

Showing webmentions on my blog

Each website is built differently so here I will only explain how I built the setup, and provide you with actual code snippets that I am using.

At first, I created a webmentions.js file in my _data folder with the following content:

import "dotenv/config";
import EleventyFetch from "@11ty/eleventy-fetch";

export default async function () {
  const domain = "deepakness.com";
  const token = process.env.WEBMENTION_IO_TOKEN;

  if (!token) {
    console.warn("WEBMENTION_IO_TOKEN is missing – returning empty webmentions.");
    return { children: [] };
  }

  const url =
    `https://webmention.io/api/mentions.jf2?domain=${domain}&token=${token}&per-page=1000`;

  // Always fetch fresh on each build
  const data = await EleventyFetch(url, {
    duration: "0s",
    type: "json",
  });

  return data;
};

I added the API key in the environment variable WEBMENTION_IO_TOKEN on Netlify, as it will be used during the build time.

Then I created a comments.njk file (here are entire contents of the file, including CSS) in the _includes folder, and used it inside my post template like below:

After this, I also used a service called Bridgy that connects some services that do not explicitly send webmentions, still grabs the webmentions from those platforms, and sends them to webmention.io. I added Bluesky to Bridgy and it will now grab comments and reactions from Bluesky as well, even though it doesn't natively support it.

And it was live. I could see some webmentions collected in my webmention.io dashboard and then those pages on my website were also showing them.

Above is an example of my current design for showing webmentions below posts and notes. I also created this /webmention page that educates people on what this is and how this works on my blog.

The webmention sections on my blog only updates when I publish something new and the site gets re-built on Netlify.

2. Send outgoing webmention notifications

I am using this amazing tool webmention.app, created by Remy Sharp, that automates your outgoing webmentions.

There are multiple ways to use the service, as explained in the docs. I am integrating the service with Netlify by using the "deploy notification" feature.

1. Open your project in Netlify
2. Go to Project configuration
3. Scroll down, click on Notifications
4. Scroll to Deploy notifications under Emails and webhooks section
5. Click on Add notification, select HTTP POST request option
6. In Event to listen for: select Deploy succeeded
7. Enter below URL in URL to notify field

https://webmention.app/check?token=[your-token]&limit=1&url=[your-feed-url]

Make sure to replace [your-token] with the Token that you get from webmention.app, and [your-feed-url] with the RSS/Atom feed of your website. By the way, there are ways to work without a feed URL as well, you need to go through the docs carefully.

Here are some useful resources that I found helpful during my setup:

• Using Webmentions in Eleventy, by Max Böck
• Webmentions for your Static Site by Rowan Manning
• Sending webmentions from a static site by Sophie
• Using Web Mentions in a static site (Hugo) by Paul Kinlan

I am new to this thing, and I am sure that the setup will evolve to become even better in the future. I will keep this page updated.