Setting Up Giscus Comment Box in React

Giscus is a comment system powered by GitHub Discussions. It allows users to comment using their GitHub accounts and stores discussions in your repository.

Step 1: Create a GitHub Repository

1. Go to GitHub and create a new repository (if you don't have one).
2. Enable "Discussions" for the repository:
   • Navigate to Settings → Features → Enable Discussions.

Step 2: Install Giscus Component in React

yarn add @giscus/react
# or
npm install @giscus/react

Step 3: Configure Giscus

1. Go to Giscus setup page.
2. Select the repository where discussions will be stored.
3. Choose a Discussion Category (e.g., Announcements, Q&A).
4. Choose the Mapping (e.g., pathname, title, issue number).
5. Select a Theme (light, dark, or system preference).
6. Copy the configuration settings.

Step 4: Add Giscus Component in React

import React from "react";
import Giscus from "@giscus/react";
 
const CommentSection = () => {
  return (
    <Giscus
      id="comments"
      repo="your-github-username/your-repository"
      repoId="your-repo-id"
      category="Announcements"
      categoryId="your-category-id"
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      theme="light"
      lang="en"
    />
  );
};
 
export default CommentSection;

Replace:

• repo="your-github-username/your-repository"
• repoId="your-repo-id"
• category="your-category"
• categoryId="your-category-id"

(You can find these values in the Giscus app settings you copied earlier.)

Step 5: Add Component in the Page

import CommentSection from "./CommentSection";
 
function App() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <p>This is my blog content...</p>
      <CommentSection />
    </div>
  );
}
 
export default App;

Step 6: Test the Comment Box

npm start

Navigate to the page where you added the Giscus component, log in with GitHub, and post a test comment.

Step 7: Deploy Your React App

Once your React app is working locally, deploy it using:

• Vercel: vercel.com
• Netlify: netlify.com
• GitHub Pages
• Custom server (e.g., Docker, AWS, Railway, etc.)

Bonus: Customizing Giscus

You can customize:

• Themes (light, dark, preferred_color_scheme)
• Reaction Emojis (1 to enable, 0 to disable)
• Metadata Emission (1 to enable, 0 to disable)
• Language (e.g., en, fr, de)

<Giscus
  theme="preferred_color_scheme"
  reactionsEnabled="1"
  lang="en"
/>

🎉 Done! Now your React app has a fully functional GitHub-based comment system! 🚀