I recently switched my Hugo theme from PaperMod to Gokarna. Since it doesn’t have native support of commenting platforms (by enabling in config.toml), I went out and did some shopping .

Hugo comes with native support for Disqus but the free version is loaded with ads. I narrowed down the choices to Utterances and Giscus . I finally picked Giscus because of the followings:

  • no need to self-hosted, but reliably used Github as the backend. That means I don’t need to create an additional free or paid cloud-hosted service, but can leverage my existing Github account to create a new public repo.
  • open source
  • free and no ads (unlike Disqus)
  • simple and easy to configure UI
  • can even allow reactions via emoji!
  • use Github Discussion which feels more intuitive than Issues (Utterances)

To add Giscus to a Hugo blog, just do the followings:

Setup Giscus on Github

  1. Create a new public Github repository
  2. Install Giscus to your repository
  3. Go to the new repository’s Settings page and make sure that under Features, Discussion is checked. You can safely uncheck everything else.
  4. Click Discussion in the top menu bar.
    1. In the left pane, click the edit icon for Categories.
    2. Create a New category to host new comments for your blog.
    3. Choose Announcement for Discussion Format so only you can start new discussions but anyone can comment.
    4. You can safely remove the other discussion categories.
  5. Go to the Configuration section of Giscus . Provide your new repository and accept all the other default settings.
  6. Now Giscus will generate an HTML script block for you to enable it on your site.

Bonus: If you want to be notified of any new comment, you can go back to the Github repo you created, click the Unwatch menu item and check Discussions to subscribe to this event.

Setup blog layout

While Gokarna claimed support for any commenting platform, I did not following its documentation to add the Giscus script to customFooterHTML param in config.toml. It might sound easy enough, but doing so will add commenting to EVERY page of my website, including homepage, tags, categories, about, etc. Your usage scenario might vary, but I think it is not relevant to comment on taxonomy pages.

Rather, we will just add commenting on individual posts in the following steps:

  1. Go to your blog’s root folder, then layouts\partials. Create a new file called giscus.html and paste the script you get at step 6 above.
  2. Edit layout\_default\single.html to include the following code before the last {{- end }}. If you don’t have this file in the folder, copy it from themes\<your-theme>\layouts\_default.
     {{ if (.Site.Params.GiscusComments) -}}
 <div class="comments">
     <h4>Comments</h4>
     {{ partial "giscus.html" . }}
 </div>
 {{- end }}
  3. In config.toml, add the following parameter in the [param] section: GiscusComments = true

That’s it! Comments have now been enabled in blog posts only. Now your site’s visitors will be able to comment and pick a reaction after they login with their Github credentials.