Choosing a commenting plugin and integrating Hyvor Talk in Hugo

You can see Disqus on most blogs, but there are multiple privacy-respecting, cheap and appealing alternatives. I have decided to add Hyvor Talk to my blog.

Why

This post is an opinionated guide to picking a cheap/free, appealing, and functional third-party non-self-hosted commenting plugin for a static blog. I have only included service-based plugins to keep it simple.

When I first created this blog, I chose to not include a commenting system since I didn’t see the point of it, and it made the site sluggish (Disqus). I have never been much of a commenter, and you can find my social accounts if you have any questions about the content. But I guess it’s much more convenient for people to drop in a comment without leaving the article.

So the plan is to test it a year and see if the activity can justify the price and maintenance.

Alternatives

There are quite some to choose from, but they vary by their level of trustworthiness and the number of ads, trackers, and American spies they inject.

Disqus

  • Price from: Free
  • Size: 267,14 KB (241,13 KB JS and 26,01 KB CSS)
  • Ads: Yes but you can remove it by paying

The de-facto standard for online comments, but I have never been a fan of it. It’s also huge and loads nasty ads, so no thanks.

A blog should load blazingly fast so we cannot sacrifice precious speed by adding an enormous amount of JS just for the sake of providing a commenting system. One option is to have a button that loads it so it won’t affect the initial page load.

Facebook Comments

  • Price: Free
  • Size: 600,39 KB (576,65 KB JS and 23,74 KB CSS)
  • Ads: Yes

Ah, Facebook. The interface and overall commenting system are not bad at all. But it’s loaded with trackers, ads, and more trackers. It’s gloomy that we have to load 600 KB of data just to comment online in 2020.

Remarkbox

  • Price from: $7/month
  • Size: 49,18 KB (43,65 KB JS and 5,53 KB CSS)
  • Ads: No

Well, it’s lightweight, fast and have markdown support. Apart from that, it doesn’t have too much going for it. The landing page is nice and you can easily control the behaviour and apperance which is a nice addition.

JustComments

  • Price from: $5
  • Size: 36,94 KB JS
  • Ads: No

First impressions from the landing page is good but I don’t feel the same when I see the commenting system itself. It is customizable and JustComments is a pay-as-you-go service so that’s swell.

CommentBox

  • Price from: Free (100 comments per month). $10 for unlimited comments.
  • Size: 9,79 KB JS
  • Ads: No

CommentBox has a limited free plan and the interface feels familiar. You can reply, vote, flag and pin comments. It’s also extremely lightweight with just under 10 KB of JS.

FastComments

  • Price from: $5
  • Size: 14,04 KB JS
  • Ads: No

FastComments is also very lightweight. The interface is functional and simplistic. They also have a lot of neat features like spam fighting and the ability to import from other commenting systems like Disqus.

Commento

  • Price from: $10
  • Size: 16,48 KB (9,51 KB JS and 6,97 KB CSS)
  • Ads: No

I like the catchphrase “Embed comments without giving up your privacy.”. The website itself gives a good first impression. Modern, sleek and fast. The design is sleek and pretty. The cheapest plan is tad expensive for a simple dev blog compared to other offers.

Hyvor Talk

  • Price from: $5
  • Size: 112,3 KB (104,34 KB JS and 7,96 KB CSS)
  • Ads: No

Hyvor Talk boosts more KB but at least it’s lazy-loaded so it won’t affect the page performance. What wins me over is the playful, lovely, and feature-packed interface. The reactions part is a delightful addition since it doesn’t require much effort for readers to click on and it gives me valuable feedback on my posts.

In other words, Hyvor Talk feels like it was built with love and passion. Those are values I can stand behind and it feels good to support them. So let’s see how it goes and if you want to test it out, scroll to the bottom and write a comment.

Add Hyvor Talk to Hugo

To add Hyvor Talk to your Hugo based blog, simply paste this code in the bottom of the footer (found in the template you are using). This code may change so be sure to verify with the official docs.

{{ if in .Page.Dir "posts" }}
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = 2018; // DO NOT CHANGE THIS
    var HYVOR_TALK_CONFIG = {
        url: "URL_TO_YOUR_WEBSITE",
        id: 'UNIQUE_POST_ID'
    };
</script>
{{ end }}

The ID is a unique ID that links the comments and your post. You can use ìd: '{{ .File.UniqueID }}' but remember that if you change the file name of the post, the ID will also change since it’s a hash of the file name.

The better way is to include an ID in the filename. Example filename: 07-hyvor-talk-hugo.md and if you want to use 07 as the ID, use this code id: '{{ index (split .File.LogicalName "-") 0 }}'.

If you disagree, agree, or have anything in your heart, please, feel free to write a comment.

If you would like to test it out yourself, I’d appreciated it if you used my affiliate link to sign up.