In a conversation, one shares their thought, other ones respond. When you share a post in your blog, you may want to know someone's thought about your post. With comment system, you invite the readers to share their thoughts, ask questions and provide advice for the blog content.
 
In this article, we will use giscus to create a comment system powered by GitHub Discussions.
 

 

 

What is comment system?

 
A comment system allows users to comment on a website, typically below a blog post or a product on e-commerce. Comment system gives website visitors the ability to engage with a website by commenting their thought or reacting to the content on the page.
 
To build a comment system, basically, you need those info (context is using RDBMS)
 

 

1. A table to store comment for a post
2. A table to store reaction for a post
3. An association table to store a reply of comment
    

 
There are a lot of works needed to be done for a comment system. Usually, people prefer an existing system instead of building their own system.
 

 

 

What is giscus?

 
giscus is a comment system powered by GitHub Discussions. It allows readers to leave comments and reactions on your website using your public repository's discussion on GitHub. Inspired by utterances.
 
With giscus installed in your GitHub repo, you will have a nearly zero configuration comment system and without storing anything to your database. The readers only need to sign in to comment using their GitHub account via its OAuth flow.
 
There are some existing libraries to integrate with SPA:
 

 

• @giscus/react
• @giscus/vue
• @giscus/svelte
• @giscus/solid
   

 

 

Install giscus

 
First of all, if your repo is private, you should public your repo or create a new public repo. Or else your readers cannot see the discussion.
 
Next, you need to install giscus to your GitHub by access this page and click Install.
 

 

Choose the organization that contains the public repo you want to use as comment system
 

 

Pick repo that you want to integrate with giscus and then click Install
 

 

After giscus intalled, access to your repo settings and enable Discussions
 

 

 

giscus with React

 
Install giscus to your react app using command:

pnpm add @giscus/react 

 
Next, import and use it in your react app.

import Giscus from '@giscus/react'; 
 
export function CommentBlock(): JSX.Element { 
  // some code here 
 
  return ( 
    <Giscus 
      lang='en' 
      theme='dark' 
      mapping='url' 
      loading='lazy' 
      category='Q&A' 
      emitMetadata='0' 
      repo='your-repo' 
      inputPosition='top' 
      term='Q&A for post' 
      reactionsEnabled='1' 
      repoId='your-repo-id' 
      categoryId='your-discussion-category-id' 
    /> 
  ) 
} 

 

How to get repo info for giscus?

 
To get info like repoId and categoryId, you should use GitHub Graphql API (REST API does not respond categoryId). Access to their playground and use the schema below (you need to sign in to use their explorer).

{ 
  repository(name: "your-repo-name", owner: "your-username") { 
    id 
    discussionCategories(first: 10) { 
      edges { 
        node { 
          id 
          slug 
          name 
        } 
      } 
    } 
  } 
} 

 
You will get your repo and repo's discussion categories info

{ 
  "data": { 
    "repository": { 
      "id": "R_kgDOJn-tPw", 
      "discussionCategories": { 
        "edges": [ 
          { 
            "node": { 
              "id": "DIC_kwDOJn-tP84CWxFP", 
              "slug": "announcements", 
              "name": "Announcements" 
            } 
          }, 
          { 
            "node": { 
              "id": "DIC_kwDOJn-tP84CWxFQ", 
              "slug": "general", 
              "name": "General" 
            } 
          }, 
          { 
            "node": { 
              "id": "DIC_kwDOJn-tP84CWxFS", 
              "slug": "ideas", 
              "name": "Ideas" 
            } 
          }, 
          { 
            "node": { 
              "id": "DIC_kwDOJn-tP84CWxFU", 
              "slug": "polls", 
              "name": "Polls" 
            } 
          }, 
          { 
            "node": { 
              "id": "DIC_kwDOJn-tP84CWxFR", 
              "slug": "q-a", 
              "name": "Q&A" 
            } 
          }, 
          { 
            "node": { 
              "id": "DIC_kwDOJn-tP84CWxFT", 
              "slug": "show-and-tell", 
              "name": "Show and tell" 
            } 
          } 
        ] 
      } 
    } 
  } 
} 

 
Use those data for the component.
 

 

Store those info to your env if you want to change it someday without changing your code. Because your repo is public, you do not need to keep those info as secret. You can set it as fixed code.

 
Or you can access to giscus page, provides your info and they will give you full info you need to pass to the component.

<script src="https://giscus.app/client.js" 
        data-repo="[ENTER REPO HERE]" 
        data-repo-id="[ENTER REPO ID HERE]" 
        data-category="[ENTER CATEGORY NAME HERE]" 
        data-category-id="[ENTER CATEGORY ID HERE]" 
        data-mapping="pathname" 
        data-strict="0" 
        data-reactions-enabled="1" 
        data-emit-metadata="0" 
        data-input-position="bottom" 
        data-theme="preferred_color_scheme" 
        data-lang="en" 
        crossorigin="anonymous" 
        async> 
</script> 

 
Finally, see the result in your page.
 

 

 

Wrap up

 
giscus is a hidden gem to integrate a comment system to your blog, especially when your blog is about programming where your audiences are almost programmers.
 
Using this one, you do not need to do anything and store anything. Your GitHub's discussion is like a database to store all the comments from your website. It will reduce the resource for your backend, especially a personal blog which has a low budget and almost no income.
 
If your audiences are not programmers, you should consider other plugins like Facebook comment plugin or something like that.