How to use github discussions (giscus) for hosting comments

#tutorial

Introduction#

Giscus is a open source tool which uses github discussions to integrate a free comment system in your website.

Steps#

  1. Go to Giscus website and follow the steps given in Configuration section and generate your own configuration. The configuration will look like this:
<script
  src="https://giscus.app/client.js"
  data-repo="giscus/giscus-component"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
  data-category="Announcements"
  data-category-id="DIC_kwDOF1L2fM4B-hVS"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="light"
  data-lang="en"
  crossorigin="anonymous"
  async
/>

  1. Just including this in your html won't show the comment widget. You need to add giscus component in your project.

  2. For using it in react/preact, just add @giscus/react dependency and use the <Giscus/> component like:

import Giscus from '@giscus/react';

export default function App() {
  return (
    <>
      {/* Your code before */}
      <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"
      />
    </>
  );
}

Note that data- prefix is not used in react and you need to remove it from your configuration and convert each prop to camelCase.

Check giscus component if you want to integrate in project which uses different library or framework.

  1. Done