Adding Comments to My Blog with Giscus

50ad7ce @

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.

<!-- 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