Adding Comments to My Blog with Giscus

Giscus Logo

I started writing for this blog a few weeks ago, and at the time, I didn’t even think about the inclusion of a comment section. I began to think about including one a couple of weeks ago when I discovered Tania Rascia’s website and noticed the use of utterances to manage the comments on her blog.

Utterances is a widget that uses GitHub Issues to store comments. I liked that. The target audience for my blog is developers. They might already have a GitHub account, so using this widget seemed to be a great idea.

I was about to try it on my blog, but yesterday I discovered a giscus while browsing GitHub. Giscus relies on GitHub Discussions instead of Issues. The main advantage of Discussions is that they have a threaded format (Think about Reddit). But also, by using them, the Issues page can stay just as an issue tracker. I prefer this way of managing comments.

Installation

Using giscus is very straightforward. Go to their website and fill out the configuration form. The website will generate a code snippet that you can copy directly into your HTML. In the case of my blog, it looked something like this.

html
<!-- Container -->
<section class="giscus mx-auto mt-10 max-w-screen-md">
<!-- Giscus Script -->
<script
src="https://giscus.app/client.js"
data-repo="piero-vic/pierolescano.com"
data-repo-id="R_kgDOGd9pjg"
data-category="Comments"
data-category-id="DIC_kwDOGd9pjs4CBO-U"
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="transparent_dark"
data-lang="en"
crossorigin="anonymous"
async
></script>
</section>

Final words

I’m planning to share a lot of content during the coming months, so stay tuned for more articles on web development. Feel free to leave some comments below.


Comments