So this is just a quick setup, at the end you should be able to see how comments can be added. We’ll be doing this with utterances which uses some JavaScript to integrate with the uterrances-bot which you will give permission to create issues in your Github repo.

Let’s do this

  1. So you’ll need a public Github repo. If you’re already using Github to host your website like I am then it’s fairly logical to use that one.
  2. Logged into your Github account, in the same browser select to install the Uterances app by opening this link: https://github.com/apps/utterances
  3. It makes no sense to give it access to all your repositories, just use the one you configured in step 1
  4. Go here and fill in:
    1. Your repo: Look in the URL of your repo and copy everything after https://github.com/
    2. Mapping: I just selected the first one, feel free to do otherwise
    3. Label: This is optional, labels are used to differentiate between issues. If you want to use one you’ll need to make sure it exists in your repo. To create one, in your repo go to Issues, select “Labels” and then “New label” and be creative (I used “blog” which isn’t very creative).
    4. Theme: So this depends on your blog theme. Mine supports dark and light so quandary 🤔 Stay tuned for what I selected.
  5. Copy the resulting HTML with all the details filled in
  6. So this is a post about a Hugo blog. Most Hugo blog themes have a comments.html lying around (in layouts/partials for instance). Depending on your setup you can just replace the contents of the file with what you copied above but I’d recommend reading up on the particular theme’s recommendations.
  7. And this is particular to the PaperMod theme I’m using, I needed to change a parameter “comments” to “true” in the config.yml. Again, know your theme!

And after all that, serving your site locally you should now be able to see an extra comments section at the end of your posts. This will require your readers to login to their Github account before commenting. Neato! 🤘

Once a comment has been added you should see a corresponding issue being added.