Setting up Github comments on your blog with Giscus

Posted on September 3, 2022  •  4 minutes  • 764 words

Wait, what happened to Utterances?

In my previous post, I described how to add a GitHub-based comments system to your blog using Utterances. In all the excitement of a free and open source comments platform for my blog, I forgot to check to see if it was still maintained, and it appears to have recently been mothballed. Utterances still works fine - for now, but it’s best practice to implement maintained dependencies.

The folk at Giscus have taken the idea of Utterances, expanded upon it and made it even better. Like Utterances, Giscus is written in typescript, uses the GitHub API, is free and open source and relies on an app to perform the writes to a public repo which you own; however there are some key differences. With Giscus, they use Discussions instead of issues. It’s more expandable and configurable and has some powerful new features, like lazy loading comments and the ability to place the input box at the top of the comments. It’s also slightly simpler to install, with relaxed repository requirements.

Giscus

Giscus uses the discussions API by GitHub in order to facilitate the comments window which you can subsequently supply in your blog’s code. Like Utterances, this means no adverts, no tracking and no irritating 3rd party to deal with. You can provide a comments box to each page you wish. Simply find a suitable place in your blogs’ code and bob’s your uncle. Lets take a look at getting set up.

It’s worth knowing that commenters will need a GitHub account to make a comment or react with an emoji.

Getting set up

1. First of all create yourself a new GitHub repository and set it to public. It needs to be public because that’s how your commenters will be able to comment. Unlike Utterances, you don’t need to create your repository under the github.io domain. Giscus works with the standard github.com domain 🚀

2. Install the Giscus app to your new public GitHub repository.
   

3. Generate your Giscus code. You can generate your own code and customisations here: https://giscus.app
   …or you can use the below template edit to taste.
   
   Remember to enter the name of your new public repo with the Giscus app enabled on line 3:

 1  <!-- Add in Giscus (https://giscus.app) Github Comments  -->
 2  <script src="https://giscus.app/client.js"
 3  data-repo="<github username>/<repository name>"
 4  data-repo-id="xxxxxxxxxxxxx"
 5  data-category="Announcements"
 6  data-category-id="xxxxxxxxxxx"
 7  data-mapping="pathname"
 8  data-strict="0"
 9  data-reactions-enabled="1"
10  data-emit-metadata="0"
11  data-input-position="top"
12  data-theme="transparent_dark"
13  data-lang="en"
14  data-loading="lazy"
15  crossorigin="anonymous"
16  async>
17</script>

Tip 🚀

There’s a bunch of colour themes you can use for your new comments box, but if you’d rather not bother and just assume the colour of the existing CSS, use the transparent themes such as transparent_dark (seen in the comments section below). Check out https://giscus.app/ for all of the possible customisations.

4. Now you have your code, you can now cut and paste it into your site where you want the comments to appear. This blog is currently using Hugo, and the theme I’m running contains a partial for blog pages. For me, this was the perfect place for blog article comments and it was on the following path:

1layouts/_default/single.html

You can see on this article where this ends up being when the site renders at the footer of the page. Here’s the file with some extra context:

 1
 2    {{ .Content }}
 3    <!-- Add in Giscus (https://giscus.app) Github Comments  -->
 4    <script src="https://giscus.app/client.js"
 5      data-repo="<github username>/<repository name>"
 6      data-repo-id="xxxxxxxxxxxxx"
 7      data-category="Announcements"
 8      data-category-id="xxxxxxxxxxx"
 9      data-mapping="pathname"
10      data-strict="0"
11      data-reactions-enabled="1"
12      data-emit-metadata="0"
13      data-input-position="top"
14      data-theme="transparent_dark"
15      data-lang="en"
16      data-loading="lazy"
17      crossorigin="anonymous"
18      async>
19    </script>
20  </article>
21
22  {{- partial "social.html" . -}}

This shows that the comments will appear as part of each blog post article, and before the “socials” which is what delivers the Twitter, LinkedIn and Stack Overflow etc links at the footer of the page.

Deleting Comments

Occasionally you’ll want to delete comments, such as when someone posts something which violates your policies, or to tidy up tests etc. Fortunately you can manage comments in the exact same way as your GitHub comments on discussions. Simply delete the comment in the relevant discussion in your GitHub repository. This works for users too (as long as they made the comments in the first place).

Wrap up

Whichever you decide to use, Utterances or Giscus, they’re both a nice and elegant way of providing an interaction interface with your readers, and well worth a look.

Feel free to give the comments a whirl below 👇