Adding Discussions To Hugo
Posted on January 16, 2024 • 7 min read • 1,279 words
I mentioned last time that in the meantime I’ve switched again, now from WordPress to Hugo. One of the things I missed was a way for you, the reader, to respond.
That’s now been resolved.
Static Pages
As I indicated in my previous post, I switched to a static page generator. One of the properties of static pages is that they are, well, static. You can obviously add JavaScript, but in principle, the pages are already generated. Therefore, hosts for static pages often do not have databases or the like to store comments. Now, you have to ask yourself if you really want that, because let’s face it, comments are not exactly ‘Big Data.’ So, you need to use something else, or not allow comments. Since I’m hoping for some interaction, I decided to add a comment system.
Criteria
When choosing a comment system, you have to make some choices, such as: Do I want to host it myself or am I planning to purchase it? Or: Am I willing to pay for it, or not? And if you decide to use a SaaS service, which one do you choose? One that is free, but you pay with your (customers’) data? Or one that is privacy-friendly?
For me, the criteria were:
Inherently respects privacy. I want readers to be able to leave their comments safely and voluntarily, without being afraid that their data will be out in the open or sold.
Is preferably free. It seems like I want to sit in the front row for a dime (do we still have those?), but I am certainly willing to pay for good products. Since I’m just starting with this blog, or at least this iteration, I wanted to keep the initial costs as low as possible.
Is easy for me and the reader. It shouldn’t be too difficult for me to filter, approve, or mark comments as spam. In addition, it should not be too difficult for a reader to be able to leave a comment.
Is easy to set up. I don’t mind at all spending hours tweaking to get something working. That’s the fun part! Long tinkering, and you finally get it working. The downside often is that you don’t set up these systems daily. Once a problem occurs, you don’t know where to look immediately. The knowledge you gained has long since faded. Therefore, a system that is easy to set up is also preferred.
Is easy to integrate. Since I don’t have a WordPress site anymore, I can’t just download and install a plugin. I will need to work with HTML and JavaScript to ensure it will eventually work in Hugo.
Data must be exportable. Since I don’t assume this is the final stop, I want the data to be exportable. Especially if the choice ends up being a SaaS solution, I want to make sure I can download the data and, after converting, import it into another system.
Preferably self-hostable.
When you host it yourself, you also know what happens to your data. At least, you have the possibility to monitor everything properly and you can block unwanted access to your data.
Options
There are many different options and platforms for comments or forum functionality.
One of the larger ones, Disqus, I didn’t consider. Previously, there have been some incidents with users’ data that, in my opinion, were unacceptable.
Alternatives that I have looked at:
I passed on some because they might not be very accessible to my readers. For example, you need a GitHub account (Utterances, Giscus). Some others cost money after the trial (ReplyBox). And with a couple, I had some trouble getting them to work (Isso, Schnack). That latter wasn’t due to the products, but rather my time and the requirements and configuration.
Of course, there are many more alternatives, but at some point, you must stop searching and ‘just’ get started.
Final Choice
In the end, I settled on GraphComment . I don’t think this is the final destination. In the spirit of ‘better done than perfect,’ I at least have a comment system that meets my minimal requirements. Now I can quietly look for an alternative that I can host myself. As it stands, it looks to be Isso or Schnack, but I still need to choose a good hosting solution for that.
GraphComment is a SaaS solution, so I do not host it myself. I must rely on the texts on their website that they do not sell the data.
Integration
Despite my theme, Hinode , already having support for Utterances, I had to delve deeply into the code to figure out how to add GraphComment. Besides logging in to the website of GraphComment and registering an account and adding your website, you must also add some code to your pages/layout.
In params.toml I have added an item under [comments], namely [platform = "graphcomment"]. This way, I can quickly add a different platform in the configuration. In the code, I check if the platform is configured. If not, then it assumes Utterances, as in the original theme.
Also, I added a bit so I can include the commentID that GraphComment needs.
Adjustments in the files
config/part_default/params.toml
[comments]
enabled = true
platform = "graphcomment"
#repo = "" # Replace with your repository.
#issueTerm = "pathname" # pathname, url, title, og:title
#label = "comment"
# By default, light and dark mode correspond to github-light and github-dark, respectively.
# Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark.
# theme = ""
[comments.graphcomment]
commentID = "<commentID from GraphComment>"layouts/partial/assets/comments.html
Below <h2>{{ T "comments" }}</h2> I added a check and the piece of code that you get from GraphComment when you register your site. In the line of graphcommentId, I replaced the hardcoded Id with the variable that I have added in config.toml. That’s graphcommentId: "{{$params.graphcomment.commentID}}".
{{- if in $params.platform "graphcomment" -}}
<div id="graphcomment"></div>
<script type="text/javascript">
/* - - - CONFIGURATION VARIABLES - - - */
var __semio__params = {
graphcommentId: "{{$params.graphcomment.commentID}}", // make sure the id is yours
behaviour: {
// HIGHLY RECOMMENDED
// uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
},
// configure your variables here
}
/* - - - DON'T EDIT BELOW THIS LINE - - - */
function __semio__onload() {
__semio__gc_graphlogin(__semio__params)
}
(function() {
var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
})();
</script>
{{- else -}}and at the end of the file, I added an extra {{- end -}}. And you see the result at the bottom of this page.
Conclusion
Comments are important on a blog, especially if you want some interaction. You can use a world of commenting systems for this, but you will be able to run and integrate them. Above, I showed you that the integration is relatively straightforward, as long as you can read a bit of HTML/JavaScript code.
