I have written several times on the Indieweb. Conceptually it’s fairly straightforward to understand, but actually integrating some of the technologies has proven too challenging for me in the past. Webmentions, in particular, have stressed me out!

Well, as you can see from the bottom of this site, I now have an endpoint of my own set up to receive them! For this I pass on a huge thanks to Horst Gutman, the author of webmentiond. This amazing bit of software is even packaged in a docker container to make deployment super easy. He even helped me out within minutes of asking for some help on the project github page, and clearly has helped others out in deploying his software.

I figured I’d note down my process as I’ll inevitably forget it in the future!

Install

I went with a docker install as I run a docker host anyway. I have never seen Horst’s use of systemd to control docker, but when I think about it, it makes a lot of sense. The guide here largely got me up and running, although the instructions for spinning up the docker container are slightly different on the docker hub page - I found the latter worked best.

Reverse proxy instructions

Horst’s guide used caddy as the reverse proxy. I use apache and found issues with the trailing slash at the end of the URL. I had a play and ended up with this in my VirtualHost file:

      <Location /webmentions/>
        ProxyPreserveHost On
        ProxyPass http://<docker host ip>:35080/
        ProxyPassReverse http://<docker host ip>:35080/
        RedirectMatch 404 ^/webmentions/metrics$
       </Location>

This seems to do the trick, I just have to remember to add the trailing slash to get to the webmentions login page.

Adding to my site template

I am certainly not an experienced web developed, but having messed about with Hugo for about a year now I had a fair idea on how I could integrate the mentions widget into my post pages when they got built. I started by adding them manually. I was pleased that this definitely worked, but I then had to put them into the templates that Hugo uses to generate the pages. The problem here was that the data-target= value needs to be the post URL. I didn’t fancy doing this manually for every post, so I needed to work out what Hugo called this internally. I came up with:

<hr>
<div class="webmentions webmentions-container"
    data-endpoint="https://cshire.xyz/webmentions/"
    data-target="{{ .Site.BaseURL }}{{ .Params.ExternalLink | default .RelPermalink }}"></div>
<script src="https://cshire.xyz/webmentions/ui/dist/widget.js"></script>

The <hr> is the horizontal line above the mentions and is not actually necessary - I just thought it made it look better!

Anyway, I found that my theme had templates for its posts and added the above at the bottom of single.html. This now means that the the individual page is inserted as a string into the data-target= line for each page!

Editing CSS rules

Lastly I found that mentions were rendered with an icon (nice touch Horst!), but also a bullet point. I wanted to remove the bullet point so had a look at Horst’s site and found that a CSS rule was causing them not to display. I learned about adding extra CSS rules to my site back in May so added the following to the same CSS file I created then.

This CSS removed the bullet points from the mentions:

}
.webmention-list__list{
	list-style: none;
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
}

And done! I can now receive webmentions!

While Webmentiond is also capable of sending webmentions, I am more interested in an automated solution - I’m not sure I want to manually send mentions after typing every post. I am thinking of testing Pushl as it seems to automate sending mentions from being fed a sites RSS feeds (which I think is ingenious!).

I also want to look into Brid.gy to potentially better integrate my mastodon account with my site.

In any case, I really feel like I’ve made a breakthrough thanks to the hard work of the community and Horst in particular.