Comments for Hugo Academic (Wowchemy) with Utterances

There are endless numbers of blogs out there, often providing tidbits of useful information which I find useful. And occasionally, someone even finds my posts useful and uses the Wowchemy (Hugo Academic) ‘Contact’ widget to send me a comment or question! But these questions are not attached to any particular blog post. Wouldn’t it be nice if the a viewer could comment on an individual post in the blog?

The most commonly used commenting system on Hugo websites appears to be Disqus. Disqus does have ‘native’ and easy support in Wowchemy. And I’ve certainly used Disqus to provide feedback on other blogs. But there are also numerous complaints about Disqus’s speed (or lack thereof), resource intensity, advertisements and - even worse - potential violations of privacy.

But what - preferably free and ‘open’ - alternatives are there?

I initially planned to use Staticman for commenting, but setup seemed a little involved, and I would need to register for a (free) Heroku account.

I finally chose utterances, which cleverly uses Github‘s own ’issue’ system to provide comments on my blog, which is also ‘sourced’ from Github.

The disadvantage of utterances are

• Commenters need to have a registered Github account
  • Github is owned by Microsoft. I’m okay with that, actually.
• Comments are not ‘nested’

But ‘utterances’ is very easy to set up. I used the advice from Maëlle Salmon and Michele Sciponi. The instructions at the beginning of these blogs are clear, the final instructions at the end less so, so here are my notes for Hugo Academic version 4.8.0.

• Install ‘utterances’ to my website’s Github repository
  • This website ‘originates’ from a Github repository - https://github.com/DavidPatShuiFong/vkelimHomepage
  • Github App - utterances
• Retrieve/copy the ‘utterances’ script to be added to the blog’s “comment partial”
  • The script is provided, after answering a few questions such as the location of the website’s Github repository, at the utterances website
• Copy the script to [ROOT]/layouts/partials/comments/utterances.html
  • According to Annie Lyu and Anabelle Laurent’s talk to an ‘R ladies’ workshop we should not touch the files in the ‘themes’ folder. (btw, Annie Lyu’s blog has a good introductory post to setting up a Hugo Academic/Wowchemy site with R. It is what I used to get started…)
  • This concept is confirmed on Hugo’s website “Customizing a Theme”
  • So, create the file [ROOT]/layouts/partials/comments/utterances.html, not [ROOT]/themes/hugo-academic/layouts/partials/comments/utterances.html
  • This is what my script snippet looks like…

<script src="https://utteranc.es/client.js"
        repo="DavidPatShuiFong/vkelimHomepage"
        issue-term="pathname"
        label="comments 💬"
        theme="github-dark-orange"
        crossorigin="anonymous"
        async>
</script>

• Then I reference the script in [ROOT]/layouts/partials/comments.html
  • not [ROOT]/themes/hugo-academic/layouts/partials/comments.html
  • I added two lines, referring to site.Params.comment.engine 3
  • Here is the resulting script…

{{ if site.Params.comments.engine | and (index site.Params.comments.commentable .Type) | and (ne .Params.commentable false) | or .Params.commentable }}
<section id="comments">
  {{ if eq site.Params.comments.engine 1 }}
    {{ partial "comments/disqus.html" . }}
  {{ else if eq site.Params.comments.engine 2 }}
    {{ partial "comments/commento.html" . }}
  {{ else if eq site.Params.comments.engine 3 }}
    {{ partial "comments/utterances.html" . }}
  {{ end }}
</section>
{{ end }}

• Then I reference that comments.html script by changing the settings in [ROOT]/config/_default/params.toml
  • Here is the relevant part of params.toml
  • I added the comment about the ‘Utterances’ provider, and set the engine to ‘3’

[comments]
  # Comment provider:
  #   0: Disabled
  #   1: Disqus (https://disqus.com)
  #   2: Commento (https://commento.io)
  #   3: Utterances (https://utteranc.es/)
  engine = 3