Before I used PaperMod as my website’s base theme, I had it using hugo-clarity. Both these themes couldn’t be further apart from one another. When I look back today, I still wonder why I chose Clarity, maybe it was the fact that it came with an abundant feature-set of which I probably only used like 50% or less. But it was my first experience with Hugo.

Back then I used disqus to enable users to comment on my posts. It was easy to get started with in that theme, there was built-in support. All I had to do was link my diqus account, which I created just for this purpose.

Fast-forward to end of 2022, I realised I had spent way too much time on Clarity and I didn’t even like the colours, so after looking around for a theme that suited my taste, I picked PaperMod. However, I realised that it wasn’t as feature rich as the other. It did have comments, but I had to do some work to get it all set up. Maybe I am just feeling like it is a lot of work because I hadn’t had the time to do such things. But yesterday, I thought to myself, enough is enough, just do it already.

A bit about PaperMod

PaperMod is a Hugo theme inspired by another theme called Paper.

I like this theme for its minimalistic look. It is still pretty feature rich and if you spend enough time messing about with Go Templates and you know your way around javascript and css, you could customise it as you like. I have done this many times over the last year. But I’ll delve into those customisations in various different posts.

Comments in PaperMod

PaperMod’s demo page is also its documentation. So if you head over to the part where it talks about Comments in PaperMod, it will say create a partial in your site called layouts/partials/comments.html and update your config.yml to include comments: true. And then it just says, refer to hugo-comments to add your comments provider.

I had forgotten all about how I had integrated disqus comments into my blog previously and I hadn’t used any other comments provider apart from disqus. So I wanted to introduce one. My only condition was it was to be simple, lightweight, open-source - so that I can learn more about how these things work. There are found Utterances.

Utterances

The concept of using GitHub issue comments in my blog blew my mind as I hadn’t thought of something like that ever being possible. I felt like that’s some use of GitHub comments. This also meant that you didn’t need to host an app to deal with the comments because the implementation was basically a GitHub repository!

I decided, this was the way to go - all I had to do was figure out what’s to be included in my blog to enable this.

How to Integrate

Utterances has a really good set of instructions right on their landing page, so it wasn’t difficult at all.

Pre-requisites

To make utterances work with your blog, you have ensure the following:

  1. Your Github repository for comments must be public
  2. Utterances Github app must be installed on the repository
  3. Ensure that your repository has issues feature turned on

That was simple!

Get the code

Using Utterances, enter your repo name, select the label, how the issue is mapped to the comment and a theme for your utterances section. This should generate a code snippet that you should paste in your blog’s comments.html

Something that looks like:

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Insert code in your site

Assuming that you are using PaperMod as your theme, you have to go to your newly created layouts/partials/comments.html and paste that code snippet you copied from Utterances website.

In your config.yml set:

params:
  comments: true

That’s it. Now run your website and see for yourself how it is all put together!