What is giscus ?

Giscus is a comments system that is powered by GitHub Discussions. To be able to set up giscus you need a GitHub account and a repository that you have already initialized. Visit the link below to access giscus and the settings.

https://giscus.app/

We are going to start the configurations now. With the repository we have to make sure the following steps are done correctly before we can continue.

• Make sure that the repository that you will be using is public so that the discussions are viewed by visitors.
• Make sure that the giscus app is installed . Here is how you can do it. Follow the link below

https://github.com/apps/giscus

Click on the install button. An choose the repository you want to add the comment section to.

• We have to enable discussions for the repository. Go to the repository you want to use and click on settings then scroll down and look for Discussions and tick it. you will find it under the general setting in your repository. now that you are done we can continue

We can now continue to the other things. Go back to the link I showed in the beginning to access giscus. There is an open space on a to enter your repository . It is a combination of your Github username and your repository name . It is separated by a forward slash see below.

Now you can choose the other options according to how you want to customize it or you can follow the guideline below.

-Disussion category- Announcements
-Features- Enable reactions for the main post.
-Theme- Preferred color scheme

You will see a script with code provided for you . You are going to use it. In our code editor in our Next.js app we will create a components folder and a file where our comment section component will go . Then visit the link below.

https://github.com/giscus/giscus-component

You will see something like the one below

import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

You can now paste the whole code in the file where you want the comments to go. Replace the default values with the ones you got for the script you generated on the giscus page . Install the following:

npm add '@giscus/react'

You are good to go. Run your page you should get something like this:

You have successfully added the comment section to your website or blog.

Thank you for reading my blog.