Commenting for Static Sites
I’ve been running this Hugo site for almost 2 weeks now and I’m still impressed with what I can do so far with a static site for little monetary cost. While the monetary cost is low, there is still a cost involved in solving problems when it doesn’t do what you want it to do. As I mentioned in my previous post about referencing images from an image server, I had to copy code from the hugo-clarity theme into my site’s GitHub repository so that I can override some of the partials. I can imagine that things like this can be frustrating for less technical people. Heck, less technical people are not as likely to customize their websites as much as I have. But if they do, they will likely hire someone to develop a custom solution using WordPress because you can’t rely on random plugins working together nicely.
One of the things that I sorely missed from WordPress was how easy it was to add comments to posts. WordPress runs on a database, so comments are a built-in capability. On the other hand, static sites do not have a database. You either need to integrate with a third-party service or run your own server and database, which increases technical complexity and can add to the monetary cost.
Hugo has built-in comment integration with Disqus and Utterances. Disqus isn’t a terrible option. It looked decent on my website. One of the good things about Disqus is that it offers spam protection. I don’t have to worry about moderating spam comments. On my previous WordPress website, I had a contact form where I would receive spam regularly. The comment form, provided by a WordPress plugin called WPForms, offered no value and I couldn’t retrieve comments without paying to upgrade. Disqus doesn’t come without controversy. Free comes at a cost and that cost is advertising. Disqus can display ads on your website. However, I haven’t seen any ads on this website when I enabled Disqus. There’s also controversy around user tracking. However, site admins can disable anonymous cookie tracking for site visitors, which I disabled. Finally, site admins can enable guest mode for Disqus comments. As a visitor, figuring out how to post comments without logging in or creating a Disqus account is not obvious and I didn’t want to deter visitors from writing comments.
Utterances is a GitHub project that allows users to comment using GitHub issues. It doesn’t have the same feature set as Disqus, such as spam protection. However, it doesn’t come with controversial behavior either. The biggest downside is that visitors require a GitHub account to comment and I’m 100% positive that most people who visit my website do not have a GitHub account.
As usual, I started Reddit research and I found a thorough matrix of choices and features. I know that software costs money, especially if it’s offered as a service versus a self-hosted solution. I was willing to pay a small price. The lowest price offered was $5/mo, which I thought was too high for the tiny amount of traffic that this site receives.
I repeatedly found references to Cusdis through my Reddit search. Cusdis is a lightweight, privacy-first commenting system. You can either use it as a service or self-host the open-source version. It is no frills, meaning that it doesn’t support a rich text editor nor does it offer spam protection. Every comment requires moderation. There are no ads and it doesn’t require visitors to log in. While visitors can provide an optional email address, that information is never revealed through API calls (I checked).
I attempted to integrate Cusdis and at first I couldn’t get it to work on this site. I kept getting a Javascript error:
1Uncaught SyntaxError: Identifier 'e' has already been declared (at cusdis.es.js:1:1)
Javascript errors are hard to diagnose, especially when the Javascript code is obfuscated. So I gave up immediately and went back to Disqus.
I did some more research into Disqus and was disappointed with what I read online surrounding the controversies that I previously mentioned. So I gave Cusdis another shot. I downloaded the Javascript code and referenced the downloaded Javascript instead of the one hosted on the Cusdis website. I discovered that e was declared in another Javascript file on my site. If you have multiple obfuscated Javascript files that are loaded on the same webpage, it has the potential to collide and produce this type of error. I fixed the error by wrapping the Cusdis Javascript code in braces so that any declared variables are locally scoped. The Javascript code looks like this now:
1window.CUSDIS={};
2{
3 let e;
4 ...
5};
The next problem was the color scheme. In dark mode, the background is black instead of transparent, so it didn’t match my website’s color scheme. This almost certainly was caused by cascading style sheets (CSS). I downloaded the CSS to try to diagnose the problem. That’s when I discovered that the body of the comment form is an iframe with an HTML document that is populated by yet another Javascript file. This was going to be harder than I thought, so I gave up a second time.
Upon re-enabling Disqus, I discovered that Disqus does the same thing with iframes. So I gave Cusdis another shot. After comparing the HTML produced for Disqus comments and the HTML produced for Cusdis comments, I realized that I needed a div wrapper around the code snippet provided by Cusdis, like this:
1<div class="post_comments">
2 <div id="cusdis_thread"
3 data-host="https://cusdis.com"
4 data-app-id="{{{ APP_ID }}}"
5 data-page-id="{{ PAGE_ID }}"
6 data-page-url="{{ PAGE_URL }}"
7 data-page-title="{{ PAGE_TITLE }}"
8 ></div>
9 <script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
10</div>
That was not all. When a visitor switches between light and dark mode, the background changes color again. I observed the change in HTML when dark mode was toggled and realized that I needed to remove this portion of the iframe Javascript code:
1document.documentElement.style.setProperty("color-scheme",l)
When a visitor toggles dark mode, the text in the comment section doesn’t change color. It doesn’t change color when Disqus is enabled either, so I let that one slide. Maybe I’ll figure this one out someday.
Next, I needed to figure out how to change the text color of the Comment button because black text on a dark background is hard to read. I looked for dark:border-gray-100 in the iframe Javascript code and appended dark:text-gray-200. Finally, I wanted different labels for the text boxes. I wanted Nickname renamed to Name, Reply... renamed to Comment, and the Comment button renamed to Post Comment. These were easy to find and update in the iframe Javascript code.
The downside of all of these changes is that I have to host the Javascript code myself instead of relying on the Javascript code vended by Cusdis. Hopefully, there aren’t significant changes soon, resulting in broken commenting. So with that, I apologize in advance if I don’t approve your comments promptly.