I debated on whether to allow comments on my posts. But after some deliberation, I figured it’d be okay—I can always remove the option later. Without further ado, here’s my journey to enabling comments.

Is it possible?

After a quick google search, it turns out it is! I came across this question on the Web Applications Stack Exchange, and I was greeted with two contenders:

Utterances,
and Giscus

I started reading about Utterances first as it was mentioned in the (only) answer (Giscus was mentioned in the comments.)

Utterances

You can get this info from the Utterances website, but I thought I’d highlight a couple of things for my own sake:

Comments are created via GitHub Issues.
The reader needs a GitHub account to comment.
I (Ian, hello 👋) need to install the utterances app to the it176131.github.io repo to allow users to comment
I (me again) need to confirm that the repo’s issues feature is turned on
Blog posts can be mapped to issues in one of six different ways
Utterance comments have their own theme
Comments show up like this

So far I’m liking it! But what about Giscuss? Why does it exist when Utterances seems to have solved the “Comments on GitHub Pages” question?

Giscus

Again, you can get this info from the Giscus website. Highlighting things for my own sake.

Heavily inspired by utterances
Comments are powered by GitHub Discussions
Giscus, GitHub Discussions and its API are all under active development
The reader needs a GitHub account to comment
I need to install the giscus app to the repo to allow users to comment
I need to confirm that the repo’s Discussions feature is turned on
Pages can be mapped to discussions in one of six ways
Giscus has a number of additional features including:
- the ability to reaction to the post rather than individual comments (think “liking” a page)
- the option to move the comment box to the top of the comments instead of leaving it at the bottom (big fan after trying to comment on a page using Utterances)
- Lazy loading of comments (i.e. don’t load until scrolled into view)
Giscus comments have their own theme
Comments look similar to those on utterances
This is what page reactions look like

Which one?

Sometimes all the fancy features can be a turn-off; they make me think setting up the software will be challenging. I was going to invest in Utterances simplicity, but the final selling point for Giscus was the amount of activity in its repo. Giscus had 6.4k Stars at the time of writing. While Utterances had a couple thousand more (8.4k at the time of writing), the most recent commit was almost two years ago. The most recent commit to Giscus was four days ago. I choose Giscus—+1 ⭐ from me.

Set up

I started with the instructions on giscus.app under the Repository header.

Repository

~~The repository is public…~~
✅ Has been from the beginning!
The giscus app is installed…
I decided to install the giscus app for only this repo. I can always go back and change it later if I so choose. After the installation I was taken to my installations page. Here you can find other apps you’ve installed to your GitHub repos.
The Discussions feature is turned on…
This had its own subset of instructions.

Page ↔ Discussions Mapping

After completing the three tasks above, I had to choose how to map between pages on my blog and Discussions. My options were:

Discussion title contains page pathname
Discussion title contains page URL
Discussion title contains page <title>
Discussion title contains page og:title
Discussion title contains a specific term
Specific discussion number

I decided to go with the default since this is my first implementation. Like always, I can change it later.

Discussion Category

I took the advice in the instructions and selected Announcements.

Features

Four features are offered. I chose to enable three.

Enable reactions for the main post
Emit discussions metadata
Place the comment box above the comments
Load the comments lazily

Theme

I selected the “GitHub Light” theme so that it would match the rest of my blog. I’ll change it all later 🤷.

Enable giscus

This HTML <script> was written based on my selections.

<script src="https://giscus.app/client.js"
        data-repo="it176131/it176131.github.io"
        data-repo-id="R_kgDOK1ukqg"
        data-category="Announcements"
        data-category-id="DIC_kwDOK1ukqs4CcOnS"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="light"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

The instructions said to add it to my website’s template. I don’t actually know what that means, so I dropped it at the bottom of this post. Turns out that works 😅 I’ll eventually make edits when I “add the script to my website’s template,” but until then, happy commenting! Oh, and do please be respectful 🙇.