Since I moved my blog over to Hugo, I’ve been wanting to do a little series of posts about various aspects of my set-up, just in case they help anyone else thinking of doing the same. This first post is about how I’ve enabled Webmentions , an important building block of the IndieWeb. As you might notice, my blog posts don’t have conventional comment forms underneath them. Instead, any comments you see displayed have been sent as Webmentions, meaning they’ve been posted elsewhere and syndicated here. But how did I do that?

Step 1: Set up IndieAuth

This isn’t directly related to Webmentions itself, but is a prerequisite for a few of the services I use, and generally good practice anyway. IndieAuth  is an authentication system, which basically hooks into those “Sign in with Twitter”, “Sign in with GitHub”, etc. functions that you see around the web. To get it going, on your site’s front page you should link to different profiles you have around the web, either in the body (visibly) like:

<a href="https://twitter.com/thejayeless" rel="me">@thejayeless on Twitter</a>

…or in the head (invisibly) like:

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

The important part is the rel="me"; that’s what tells the parser that you’re linking to the site because it’s your own profile, and not for some other reason.

Then, you need to make sure your profiles link back to your own homepage, too.

With that done, you should now be able to log into things with IndieAuth. You just type in your homepage’s URL, and IndieAuth will direct you to verify your identity by logging in with a service like GitHub or Twitter.

Step 2: Receiving Webmentions

While there are other options, like webmention.herokuapp.com , for this I decided to use Webmention.io , a free service from Aaron Parecki. To set it up, I logged into it using IndieAuth, and it gave me a little snippet of HTML to go in the <head> section of my theme to tell any prospective senders of Webmentions where to send ’em. The snippet includes your Webmention.io username in it, which would usually be your domain name, so for example, if your website was at example.com your include would be:

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

With this include in place, any Webmentions to you will be sent to webmention.io and collated on their server for you. In fact, if all you want to do is see who mentions you, you can do that through the webmention.io interface. But assuming you want to actually display them on your site, there is another step.

Step 3: Displaying Webmentions

For this, I’m using a little Javascript include called Webmention.js . There are clear instructions at that link for how to integrate it, and it also comes with a webmention.css stylesheet so you can have something presentable without having to faff about writing the CSS yourself. Of course, I have tinkered with the CSS a little bit myself, because I wanted comments to display in full on my site and not truncate at the end of one line. Overall, I’ve found this to be a great solution for me.

Of course, before I moved my blog entries across I’d already posted a large number at Micro.blog, and got plenty of replies there. If possible I wanted to transfer those across, but I didn’t see how I could really re-send replies to the posts’ new locations, because they link to (i.e. are mentions of) the old locations. So in the end, I specified an old_url field in the front matter of every imported post, and in my Hugo template I include the following:

{{ if .Params.old_url }}
	<script type="text/javascript" src="https://micro.blog/conversation.js?url={{ .Params.old_url }}"></script>
{{ end }}

That is, “if old_url exists, run Micro.blog’s Conversation.js  script to fetch the webmentions for old_url”. Hopefully Micro.blog doesn’t mind me using their resources this way 😃

Step 4: Marking Up Webmentions

So, receiving and displaying is only one half of the puzzle: realistically, you also want to send webmentions. And then, to make sure that webmention parsers actually understand what you’re trying to send, you need to make sure that your HTML is marked up correctly – basically to tell it what type of webmention you’re trying to send, what URL you’re sending it to, what the content is of your webmention (if it’s a reply), who you are as in what is your name, avatar and homepage URL, etc.

The handy guide I followed to set up my theme to do this is Aaron Parecki’s Sending Your First Webmention From Scratch . I don’t want to replicate all the content of that guide here, so I’ll just explain what I did in addition to that.

Firstly, I created a content type in Hugo called “interactions”, with templates to ensure that these are displayed (and sent) as replies, likes or bookmarks instead of the generic “mentions”. My “interactions” front matter includes the following possible fields (plus a few others that aren’t really relevant to this discussion):

  • response_type: for either “like”, “reply” or “bookmark”, which are the only ones I saw myself using. At the moment if I specify anything else it should fall back to just sending as a “mention”. I can easily modify my template to enable further types of responses if I ever feel the need
  • date: self-explanatory
  • link: the URL of the page I’m responding to
  • link_name: the name or title of that page
  • link_author: optional, but here I can specify the author of the page if I want
  • op, op_name, op_author: I haven’t needed to use these yet, but these are for situations where I’m replying to a reply on an original post, and want a Webmention to go back to that original post as well, so all the discussion can appear in one place
  • quote: also optional; this is if I want to quote something (like a bit I particularly liked, or a specific bit I want to reply to)

Then I’ve created a template – making use of Aaron Parecki’s guide that I linked above – to present that information in an intelligible way and also, behind the scenes, to be marked up with the correct classes so a Webmention parser can understand what parts of the page are relevant to it.

Step 5: Sending Webmentions

You can send webmentions manually, either from the command line or using a number of web interfaces. However, I wanted to automate my sending out of webmentions. For this, I decided to use Webmention.app . To get that up and running, I used IndieAuth to sign into – and get a token for – Webmention.app, then registered an account at IFTTT  and created a “recipe” on there as per Webmention.app’s instructions. That means that IFTTT checks my RSS feed every hour for new posts, and if there are any, it makes a call to Webmention.app to check that feed for Webmentions and send out any that are there. I can also manually tell IFTTT to do a check, if for example I know I’ve posted something with Webmentions that I want to go out ASAP.

Bonus Round: Bridgy

I’ll probably talk a little more about Bridgy  in a post down the line, about POSSE-ing , PESOS-ing  and backfeeding  more generally. However, because most of the webmentions on this site come via Bridgy, it’s worth mentioning here too.

Basically, Bridgy is a nifty little tool that, among other things, takes interactions with your posts (likes, replies, retweets/boosts) on social media sites like Twitter and Mastodon and forwards them to the corresponding posts on your own site, as webmentions. How does it know which posts correspond? Well, either your social media post can link back to your blog post, or your blog post can link to your social media post, with that link having to have a class of u-syndication. (You can also have both posts link to each other; it won’t hurt anything.) With a Bridgy account and those links set up, you can see that, for example, my review of The Fifth Season  displays likes and a comment that I got on this toot linking to that review . If you like, you can also use Bridgy to automate the posting of those syndicated copies on some sites, just by sending webmentions to specific pages on Bridgy from any post you want auto-syndicated. For me this works well for Twitter, and no longer so well for Mastodon, for some reason. But still, overall Bridgy has really impressed me with just how much it can do.