> ## Documentation Index
> Fetch the complete documentation index at: https://github-52.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Giscus GitHub Discussions Comments to Your Portfolio

> Learn how to set up Giscus on your portfolio site. Enable GitHub Discussions, configure the widget, and embed the comment script on your pages.

Giscus powers comments on this portfolio using GitHub Discussions, giving readers a way to leave feedback, ask questions, and react to projects without ever leaving the GitHub ecosystem. Because Giscus stores comments as Discussion threads in your repository, you own the data, there are no third-party tracking scripts, and moderation is handled entirely through GitHub's existing tooling. This guide walks you through enabling Discussions, configuring Giscus, and embedding the comment widget into your pages.

## Prerequisites

Before configuring Giscus, confirm the following:

* Your repository is **public** — Giscus cannot read Discussions from private repositories
* You have admin access to the repository to enable the Discussions feature
* You have a GitHub account (visitors will also need one to comment)

## Setup steps

<Steps>
  <Step title="Enable GitHub Discussions on the repository">
    Navigate to your repository on GitHub and open **Settings → Features**. Scroll down to the **Discussions** section and check the box to enable it. GitHub will create a Discussions tab in your repository navigation. Once enabled, you can create categories to organize comments by topic.
  </Step>

  <Step title="Visit giscus.app and configure your repository">
    Open [https://giscus.app](https://giscus.app) in your browser. In the **Repository** field, enter your repository in the format `owner/repo`, for example:

    ```
    Sumit-SC/Sumit-SC.github.io
    ```

    Giscus will verify that the repository is public and that Discussions is enabled. If the check passes, a green confirmation message appears and the configuration form unlocks.
  </Step>

  <Step title="Select a Discussion category">
    In the **Discussion category** dropdown, choose an existing category or create a dedicated one. For portfolio comments, creating a category named `Comments` keeps project feedback separate from general repository Discussions. To create the category:

    1. Go to your repository's **Discussions** tab.
    2. Click **Manage categories** (pencil icon on the right).
    3. Click **New category**, name it `Comments`, choose the **Open-ended discussion** format, and save.

    Back on giscus.app, select `Comments` from the dropdown.
  </Step>

  <Step title="Choose the page-to-Discussion mapping">
    Giscus needs to know how to associate each page with a Discussion thread. The available mapping options are:

    | Option     | How it works                                   |
    | ---------- | ---------------------------------------------- |
    | `pathname` | Uses the URL path (recommended for most sites) |
    | `URL`      | Uses the full URL including query parameters   |
    | `title`    | Uses the page `<title>` element                |
    | `og:title` | Uses the Open Graph title meta tag             |

    For a static GitHub Pages site, **pathname** is the most reliable choice because paths are stable even when the domain changes.
  </Step>

  <Step title="Copy the generated script snippet">
    After completing the configuration form on giscus.app, the page generates a `<script>` tag at the bottom. Copy it in full — it includes your repository ID and category ID pre-filled. The snippet looks like this:

    ```html theme={null}
    <script src="https://giscus.app/client.js"
            data-repo="Sumit-SC/Sumit-SC.github.io"
            data-repo-id="YOUR_REPO_ID"
            data-category="Comments"
            data-category-id="YOUR_CATEGORY_ID"
            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>
    ```

    Replace `YOUR_REPO_ID` and `YOUR_CATEGORY_ID` with the actual values shown on giscus.app — these are unique identifiers that Giscus uses to create and retrieve Discussion threads for the correct repository and category.

    <Tip>
      Use `data-theme="preferred_color_scheme"` to automatically match the visitor's operating system dark or light mode preference. This prevents the comment widget from appearing jarring if your portfolio uses a dark theme but the visitor's OS is in light mode, or vice versa.
    </Tip>
  </Step>

  <Step title="Embed the script in your page template">
    Paste the copied `<script>` tag into your HTML template at the location where you want the comment widget to appear — typically near the bottom of the page content, after the main article body. Place it inside the shared page layout or template file that wraps your project pages:

    ```html theme={null}
    <!-- At the bottom of your page template, inside <body> -->
    <section class="comments">
      <h2>Comments</h2>
      <script src="https://giscus.app/client.js"
              data-repo="Sumit-SC/Sumit-SC.github.io"
              data-repo-id="YOUR_REPO_ID"
              data-category="Comments"
              data-category-id="YOUR_CATEGORY_ID"
              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>
    </section>
    ```

    After saving and pushing this change, visit any page of your portfolio and scroll to the bottom to confirm the widget loads.

    <Note>
      Visitors must sign in with their GitHub account to post a comment or add a reaction. Visitors who are not signed in will see the comment widget but will be prompted to authenticate via GitHub OAuth before they can interact.
    </Note>
  </Step>
</Steps>

## Managing comments

All comments submitted through Giscus appear as replies inside the corresponding Discussion thread in your repository's **Discussions** tab. You can moderate, edit, pin, or delete comments directly from the GitHub Discussions UI. You can also lock a Discussion thread to prevent further comments on a specific page.

## Related setup guides

<CardGroup cols={2}>
  <Card title="Deployment" href="/setup/deployment">
    Deploy the portfolio to GitHub Pages and configure Cloudflare.
  </Card>

  <Card title="Troubleshooting" href="/setup/troubleshooting">
    Fix common issues including Giscus not loading.
  </Card>
</CardGroup>