How to Set Up Giscus Comments for Your Website

If you want to add a clean, GitHub-powered comment system to your website, Giscus is one of the best options.
This guide walks you step-by-step through everything required:

Creating a comments repository
Enabling Discussions
Installing the Giscus GitHub App
Getting your repoId and categoryId via GitHub GraphQL
Configuring the <Giscus /> component in your site

By the end, you’ll have a fully working comment system—powered entirely by GitHub Discussions.

1. Create a Repository for Storing Comments

Create a new GitHub repository dedicated to comments:


Q-Z-L-Corp/giscus-comments

This is where all the comments from your website will be stored as GitHub Discussions.

2. Enable GitHub Discussions for the Repo

Go to:

Settings → General → Features → Discussions → ✔ Enable

Without Discussions enabled, Giscus cannot store or load comments.

3. Install the Giscus GitHub App

Giscus relies on its GitHub App to read and write discussions.

Install it here:
https://github.com/apps/giscus

During installation:

Select your GitHub account or organization
Select the comments repo (e.g., Q-Z-L-Corp/giscus-comments)
Grant required permissions (Discussions, Contents, Metadata)

Once installed, Giscus is authorized to create and read discussion threads.

4. Get Your GitHub Repository ID (repoId)

Giscus requires the GraphQL repository ID, not the repo name.

To query it, you need a GitHub personal access token (PAT) with:

public_repo (for public repos)
or repo (for private repos)

Then send this GraphQL query:

GraphQL Query – Get Repo ID


query {
  repository(owner: "Q-Z-L-Corp", name: "giscus-comments") {
    id
    name
  }
}

Example Response


{
  "data": {
    "repository": {
      "id": "R_kgDOQX9xSQ",
      "name": "giscus-comments"
    }
  }
}

Your repoId is:


R_kgDOQX9xSQ

5. Get Your Discussion Category ID (categoryId)

Your repo must have at least one discussion category.
Giscus typically uses something like “Blog Comments”.

Get your category ID with this query:

GraphQL Query – Get Discussion Category ID


query {
  repository(owner: "Q-Z-L-Corp", name: "giscus-comments") {
    discussionCategories(first: 20) {
      nodes {
        id
        name
        slug
        description
      }
    }
  }
}

Example Response


{
  "data": {
    "repository": {
      "discussionCategories": {
        "nodes": [
          {
            "id": "DIC_kwDOQX9xSc4Cx7Fn",
            "name": "Blog Comments",
            "slug": "blog-comments"
          }
        ]
      }
    }
  }
}

Your categoryId is:


DIC_kwDOQX9xSc4Cx7Fn

6. Use the Values in the Giscus Component

Now you can embed Giscus into your website.

Here’s a working example:


import Giscus from "@giscus/react";

export default function Comments() {
  return (
    <Giscus
      id="comments"
      repo="Q-Z-L-Corp/giscus-comments"
      repoId="R_kgDOQX9xSQ"
      category="Blog Comments"
      categoryId="DIC_kwDOQX9xSc4Cx7Fn"
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="bottom"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

This will automatically create a discussion for each page and load all comments.

7. Done — Giscus Is Live

You’ve now completed all required steps:

✔ Created comment repo
✔ Enabled Discussions
✔ Installed Giscus GitHub App
✔ Retrieved repoId
✔ Retrieved categoryId
✔ Embedded Giscus configuration

Your website now has a GitHub-powered commenting system with:

zero backend
no user accounts to manage
spam-resistant GitHub authentication
clean UX

San Song Daddy :)