I replaced Disqus with Mastodon-powered comments on this blog. No tracking scripts, no ads injected into my pages, no third-party account required to leave a comment.The idea came from Mike Perham’s post earlier this year. Write a blog post, publish a toot announcing it, drop the toot ID in the frontmatter, and the comments section pulls replies from the Mastodon API.How it worksWhen someone replies to the toot on Mastodon, those replies show up as comments. Readers who want to comment need a Mastodon account, but given my audience, that’s not a problem.The implementation is a web component based on Daniel Pecos Martinez’s mastodon-comments. The core logic (fetching the toot’s context from the Mastodon API, rendering replies, showing boosts and favorites) is his. I adapted the markup and class names to match my blog’s structure and styling. No JavaScript framework. No cookie banner. No disqus.com in the network tab.The setup1. Add the web component to your assets and load it in <head>:<script src="{{ "js/mastodon-comments.js" | relURL }}" defer></script> 2. Configure the Mastodon account in config.yml:Params: mastodon: host: "ruby.social" user: "jweslley" 3. Replace the comments partial. The old comments.html called Hugo’s built-in Disqus template. Now it renders the web component when a tootId is present in frontmatter:<section id="comments" class="comments"> {{- with .Params.tootId -}} <mastodon-comments host="{{ $.Site.Params.mastodon.host }}" user="{{ $.Site.Params.mastodon.user }}" tootId="{{ . }}"> </mastodon-comments> {{- end -}} </section> 4. Add tootId to the blog archetype, commented out by default:When I publish a post, I toot about it, then fill in the ID.5. Remove Disqus from config.yml:# Before services: disqus: shortname: "jweslley" # After: gone The workflowWrite and publish the postPost a toot linking to itCopy the toot ID from the URL (https://ruby.social/@jweslley/<tootId>)Add it to the post frontmatter and redeployReplies to that toot become the ...
First seen: 2026-03-25 23:56
Last seen: 2026-03-26 05:00