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

1. 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.

2. Visit giscus.app and configure your repository

   Open 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.

3. 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.

4. 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.

5. 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:

   <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.

   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.

6. 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:

   <!-- 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.

   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.

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

Deployment

Deploy the portfolio to GitHub Pages and configure Cloudflare.

Troubleshooting

Fix common issues including Giscus not loading.