A Webmention implementation for Hugo

People have been asking about Webmention support before so I thought that I would give my solution here. Mind you, it is neither trivial nor very generic, but maybe it can serve as an inspiration to someone.

A while back I implemented my commenting functionality: comments are always pre-moderated, blog owner receives a notification and a review URL. Once approved, comments are added to the repository and become regular Hugo content.

I now added Webmention and Pingback support using the same principle. Whenever a request is received, the blog owner has to review it. The source page is only downloaded when the review interface is opened, this avoids a number of potential security issues. In this step the source page is being validated (the link has to be present) and metadata is extracted. If approved, it is added to the repository with this metadata just like a comment would be, and it is displayed in the blog only minimally differently.

2 Likes

Like many other posts in tips & tricks, this should be marked as sticky. I believe your commenting functionality is a good alternative to the Disqus standard. Many blogs don’t want to have Disqus, mainly because of the ads and how sluggish it sites become once integrated.

Your solution is perfect for those cases.

And now you have Pingback support. This should be sticky.

Thanks for sharing. Some months ago, I did the same; your posts were an inspiration.

I use a lightweight self-hosted webmentiond. Hugo pulls approved Webmentions through webmentiond’s JSON API and turns them into HTML.

I don’t want to create something resembling a “comments” section. I prefer that readers navigate away from my website to discuss, and to see comments in context. I also elected against loading avatars, since I want to keep my site as textual as possible. For these reasons, I only display Webmentions as plain timestamped links or likes.

Website: Seirdy’s Home
Code: https://sr.ht/~seirdy/seirdy.one/

The relevant file: single.html.

SSG-based Webmention setups are really underrated: they create a decentralized feedback section, help promote other sites, and require absolutely no JS.

1 Like