Motivation

Being relatively new to the world of blogging, I quickly realized that my recently created website was missing a crucial element – reader feedback. It was evident that I needed to find a way to bridge this gap and encourage readers to voice their opinions and thoughts on my posts.

The Search for a Good Commenting Solution

My website is on GitHub and uses Hugo static site generation. So, I needed a commenting solution that fits this setup. Even though Hugo supports Disqus for comments, my experience with it wasn’t good due to its slow speed and ads. I found Giscus as an alternative. However, Giscus has its good sides, like using GitHub Discussion and being open-source, but it also has some possible drawbacks. Giscus might not have all the customization and features of other comment systems because it relies on GitHub Discussions, which could lead to to a less satisfactory commenting experience. Also, since it needs a GitHub account for commenting, people who don’t want to make a separate account just to comment might not engage as much, especially if they want to stay private or don’t know much about GitHub.

Steps to set up Giscus

  1. Create a public respository on GitHub (GH) to hold your site comments, GH guide can be found here.
  2. Enable Discussions for the created repository, GH docs.
  3. Install Giscus app from GH Marketplace, direct link to install is here.
  4. Suggestion: restrict access for Giscus only to specific repository created for comments in step 1. giscus.jpg
  5. Configure Giscus directly from their site. As result I got this code script tag:
<script src="https://giscus.app/client.js"
        data-repo="prutonis/prutonis-comments"
        data-repo-id="R_k9DOKFLCjg"
        data-category="General"
        data-category-id="DLC_kwDOCFLCjs4CYe3b"
        data-mapping="pathname"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="{{ .Site.Params.giscusTheme }}"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>
  1. To avoid direct theme editing, Hugo enables you to customize any theme using Partial templates. So I created a new file layouts/partials/giscus.html with this content:
{{- if (eq (.Site.Params.disableComments | default false) false) -}}
    {{- if (eq (.Params.disableComments | default false) false) -}}
        <script src="https://giscus.app/client.js"
                data-repo="prutonis/prutonis-comments"
                data-repo-id="R_kgDOKFLCjg"
                data-category="General"
                data-category-id="DIC_kwDOKFLCjs4CYe3b"
                data-mapping="pathname"
                data-strict="1"
                data-reactions-enabled="1"
                data-emit-metadata="0"
                data-input-position="top"
                data-theme="{{ .Site.Params.giscusTheme }}"
                data-lang="en"
                data-loading="lazy"
                crossorigin="anonymous"
                async>
        </script>
    {{- end -}}
{{- end -}}
  1. I’m using the PaperMod theme, so I duplicated themes/PaperMod/layouts/partials/comments.html to layouts/partials/comments.html and made edits to include the newly created partial from step 6.
{{- /* Comments area start */ -}}

{{ partial "giscus" . }}

{{- /* Comments area end */ -}}
  1. Hugo config.yml setup:
params:
  ...
  comments: true
  giscusTheme: preferred_color_scheme
  disableComments: false
  ...
The result:

comments.png

Wrap-Up

Thanks to GitHub, I am able to both host my website and facilitate comments for it. This free feature provided by GitHub is truly invaluable. In the future, I intend to explore the possibility of implementing a self-hosted commenting system like Commento or StaticMan, and I will be sharing my experience on the blog.

P.S. Special thanks to Justin Bird for the insightful blog post on setting up Giscus.

Feel free to share your thoughts and join the conversation by leaving a comment using the newly added comment section on my blog. Your input and feedback are highly appreciated!