Setting up Webmentions on my Static Site 💬 | Alex HyettSkip to main contentJoin 3k+ Subscribers

Setting up Webmentions on my Static Site 💬<br>Alex Hyett<br>05 Jul 2026

#blogging #indieweb #programming<br>IN THIS ARTICLEI have been getting back into blogging recently. I know I write this newsletter every 2 weeks, but I try and keep to a set number of topics as I know my audience is mostly developers.My blog gives me chance to write about whatever is on my mind, without worrying about it being relevant to my audience.When I first started "surfing the web" it was all about personal websites and going from one person's blog to another via links and blogrolls. I miss that style of the internet. You know, before it was consolidated into a handful of tech giants.That internet is still there alive and well, you just need to look a little harder for it. The best way I have found to stumble onto new blogs is to use these:Kagi Small Web - Keep clicking Next Post and it will take you to random websites.Bubbles.town - This is a fairly new addition. It is like HackerNews for personal blogs.Of course it is all very well just writing into the void but what made social media so popular is the social aspect. Being able to comment on posts, like them and share them.The IndieWeb has this too and you can like, comment, and reply to posts in the form of webmentions.How Do Webmentions Work? #<br>For webmentions to work you need to have a sender and a receiver. The receiver in this case is your website, then sender is someone who wants to like or comment on your post.To let other people know that you accept webmentions, you have to have to add a link to your webmention endpoin to your website head.link rel="webmention" href="{your_webmention_url}">People can then send you webmentions using an HTTP request to your webmention URL:curl -X POST {your_webmention_url} \<br>-d "source={a_website_that_is_mentioning_you}" \<br>-d "target={a_post_on_your_website}"Of course all of that seems very manual and how do you even get a webmention URL?Receiving Webmentions on Your Site #<br>You can host your own webmention server yourself but let's save that for another post.The easiest way is to go to Webmention.io and type in your website. This is a great free service hosted by Aaron Parecki. It will then give you the option to sign in via an email address or GitHub if you mention your profile on your website.Once signed in you will get your webmention URL which you can put as a link in your header. It will likely just include your website name as your username.Mine for example is this:link rel="webmention" href="https://webmention.io/www.alexhyett.com/webmention">This handles receiving webmentions from other peoples websites but what about people liking posts when you mention your blog post on Mastodon or Bluesky?This is where Bridgy comes in. You can log in with your Mastodon account and it will monitor your posts for mentions of your website and send them in the form of webmentions.Bridgy even has an option to monitor your RSS feed and automatically post to Mastodon for you. I don't use that as I have my own setup but it is a nice option.Now you just need to display the webmentions somewhere on your site. You can do this by calling the webmention.io API. You will need to generate a token on their website which you can then use to receive your webmentions. Make sure to keep your API token secret.As I am on Eleventy, I used this brilliant example on Brennan Kennith Brown website as my base and adjusted the way the webmentions are displayed to suit my site. Each time I build my site (with a 6h cache) it pulls down my webmentions. They are then formatted and displayed on my site.This is how I render my likes and reposts for example with Tailwind CSS:{% set interactions = mentions | webmentionsByTypes(['like-of', 'repost-of']) | sortWebmentionsByReceived %}<br>{% set hiddenInteractions = interactions.length - 51 %}<br>{% if interactions.length > 0 %}<br>div><br>h3>Likes & Reposts/h3><br>div class="flex flex-wrap items-center gap-2"><br>{% for interaction in interactions | head(51) %}<br>a href="{{ interaction.author.url if interaction.author.url else interaction.url }}"<br>title="{{ interaction.author.name | unsupportedEmoji }}"<br>target="_blank"<br>rel="noopener"<br>class="relative inline-block no-underline!"><br>{% if interaction.author.photo and interaction.author.photo != '' %}<br>img src="{{ interaction.author.photo }}"<br>alt="{{ interaction.author.name | unsupportedEmoji }}"<br>loading="lazy"<br>class="rounded-full w-12 h-12"><br>{% else %}<br>span class="flex h-12 w-12 items-center justify-center rounded-full bg-tertiary font-mono font-bold text-(--header-color)"><br>{{ interaction.author.name | unsupportedEmoji | truncate(1) }}<br>/span><br>{% endif %}<br>{% if interaction["wm-property"] == 'like-of' %}<br>span class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full border-2 border-(--bg-color) bg-(--secondary-color) text-[11px] text-[#e5484d]" aria-label="Like"><br>i class="fa-solid...