Hugo Comments

Comments are an important part of communicating with your audience. This is where static pages struggle a bit as they are immutable by design. To add comments to a Hugo (or any other static) blog you need to resort to some third party solution. Personally I’m using ReplyBox but Disqus works with Hugo out of the box so it would be the easy way.

In this post I’ll show you how to add Disqus or ReplyBox to your site but I will also talk about other alternatives.

The Hugo comments page contains information about configuring Disqus as well as lists some alternatives to it.

Note: I’ve disabled comments on the blog and now embed a tweet at the end of the posts instead. I have an article that goes into more details about the experiment.

Disqus

Disqus is a free comment platform that also offers premium description options. The free version (“Basic”) is ad supported while the paid subscriptions have a monthly cost starting from $9.

Personal blogs, nonprofits, etc. that do not run other advertising can subscribe for a free “Plus” plan where advertising is optional. So if your site is not monetized then this can be a good option.

When you create a site configuration in Disqus you’ll get a shortname which is used to identify your website on Disqus. To add comments to your Hugo site you need to add the shortname parameter to config.toml.

disqusShortname = "yourshortname"

Then all you need to do is to use the internal template on the correct page template files such as layouts/blog/single.html.

{{ template "_internal/disqus.html" . }}

Here are some reasons I chose not to use Disqus:

1. They potentially add ads. If I want to show my own ads on this site then I also need to allow them for Disqus.
2. They seem to do a lot of tracking.
3. Partly related to the previous point, because they download so many resources they can slow the page down.

The last part really makes Disqus just feel wrong. After all one of the reasons to even have a static website in the first place is that they are really fast. If you need more to convincing then I suggest you take a look at this blog post form wpbeginner.com.

ReplyBox as an alternative

ReplyBox is still a rather new project developed by Ashley Rich. The value proposition on the home page really is to my liking:

ReplyBox, a simple, honest comment system. No ads, no dodgy affiliate links, no fluff.

According to the ReplyBox site their embed size is under 17 kB which is almost 30x smaller than Disqus. ReplyBox is free to use for small sites with under 10,000 monthly pageviews. If you go above that then the “Pro” version is $10 for the first 100,000 pageviews and 5$ per additional 100,000 pageviews.

The first thing you’ll need to do is of course to sign up to ReplyBox to create an account. When logged in there is a button “Create Site” which you should use to create a new site configuration with a name and URL. This will give you a Site ID which ReplyBox uses to link the comments to your account.

Then you’ll need to add the ReplyBox div to the location where you want the comments to be shown. Below is an example that fits the theme that we’ve been building, add it to the layouts/blog/single.html file.

<section class="section">
    <div class="container max-800px">
        <div id="replybox"></div>
    </div>
</section>

Next, add the ReplyBox script definition at the end of the file, right before the last {{ end }} statement.

<script>
window.replybox = {
	site: 'yourSiteID', 
    identifier: '{{ .Permalink }}'
};
</script>
<script src="https://cdn.getreplybox.com/js/embed.js"></script>

Change the site ID to the one found on your ReplyBox configuration page. The identifier field is optional but recommended so I’ve set it to the page permalink.

After the initial testing and layout creation you probably don’t want to load the comments for local builds. To disable comments on local page builds you can wrap the script tags with this check:

{{ if not (in (string .Site.BaseURL) "localhost")}}
    ....
{{ end }}

It simply checks that the site is not currently being served from localhost before adding the ReplyBox JavaScript to the page. This helps you keep the amount of pageviews down for the monthly limit as the Hugo development server refreshes every time you save a file.

Other alternatives

The world of comment systems doesn’t stop at these two options. Here are some alternatives to be considered as your new comment platform.

Staticman

Staticman is an open source application built with Node.js that stores comments as data files in the GitHub repository of your static site. When someone makes a new comment Staticman generates a corresponding commit to your site which will then hopefully build automatically. If you enable moderation then the comments will be pushed to a branch and you need to approve the generated pull requests manually.

It is free to use.

However, now that Netlify has started to count the build minutes (300 minutes free per month) having your comment system rely on site rebuilds might eat up that quota if you get a lot of comments.

Talkyard

Talkyard is a forum software that is also suitable for blog comments. The requirements are an Ubuntu 18.04 server with at least 2 GB of RAM. If you have the skills and time you can set it up on your own server. For those that want to have a hosted version you can get a plan for €0.5 a month for up to 100 new comments/month, or €9 a month for more active commenting.

GraphComment

GraphComment seems like a nice comment platform that has a free basic tier which contains 1M data loads per month so there’s definitely lots of room to grow there. Some more advanced features can be enabled with $7/month.

Installing GraphComment to your site is similar to the other hosted solutions. You’ll need to set up an account and then add some JavaScript to your site. Visitors also have to register an account to be able to comment.

Muut

Muut is yet another hosted commenting system. They have a fixed pricing model where the amount of traffic is unlimited for all plans and you only pay more for features. The pricing starts from $16 though so if you have a really small site you’ll probably want to look for some other alternative.

Isso

Isso is one of the self-hosted options. It is a simple comment system written with Python. The comments are stored in a SQLite database and it supports importing comments from WordPress or Disqus. The comments are embedded with the help of a small JavaScript file.

Utterances

Utterances is another free option that goes the GitHub way but this time using GitHub issues for blog comments. The idea is that Utterances uses the GitHub issue search API to find the issue that matches the current page.

To add comments the user must allow Utterances to post on their behalf or comment to the related issue directly. While it’s not a very traditional solution it seems to work all right.

remark42

Remark42 is a simple self-hosted comment engine. The recommended way to deploy it is using Docker containers. That means you’ll need some sort of a server to run it on. The GitHub page contains extensive documentation on how to set it up and running so check it out if you’re looking for something that you want to host on your own.

The project is privacy focused and doesn’t include any sort of tracking. You can check the demo here.

Commento

Commento is an open source comment platform with both self-hosted and hosted paid plans. The paid plans are on a “pay what you want” basis with a minimum of $3 for up to 50,000 pageviews a month. If you want to host the thing yourself then going with Docker might be the easiest solution.

The combined size of JavaScript and CSS is only about 11 KB so it’s a really lightweight option. They have a demo for testing.

Discourse

Discourse is a forum software which also powers the Hugo forums. You can embed Discourse comments to your site with JavaScript.

It is open source so you can run it on your own server. The hosted paid plans are quite expensive, starting from $100/month.

JustComments

Finally we have JustComments. They have an open source self-hosted version as well as the paid hosted version. The open source version is more limited and does not contain all the features that are included in the paid product such as social login, reactions or nested comments.

The price for the paid version is $5 a month plus an amount based on your usage. They have a pricing calculator for estimating the monthly costs.

Conclusion

So to summarize it all, there are lots and lots of options to choose from and Disqus isn’t by all means the one that you should pick automatically. Review the alternatives to find out which one might be best for your use case.

You’ll need to consider the price, look and feel, performance, features, privacy, etc. to make the choice.

Do you recommend some other comment system that is not listed here?