· John Dummy  · 1 min read

Setting up Giscus Comments

How to integrate GitHub Discussions-backed comments into your blog posts.

How to integrate GitHub Discussions-backed comments into your blog posts.

This blog uses Giscus for comments. Giscus leverages GitHub Discussions as a backend, providing a powerful, free, and GitHub-native commenting system.

Setup

  1. Create a Repository: Create a public GitHub repository to hold your comments (e.g., blog-comments).

  2. Enable Discussions: Go to the repository settings in GitHub and enable Discussions.

  3. Install Giscus App: Install the giscus GitHub App and grant it access to your discussions repository.

  4. Configure Giscus: Visit giscus.app and follow the instructions to generate your configuration.

  5. Set Environment Variables: Copy the following values from the Giscus website into your .env file (or your CI/CD environment variables):

    PUBLIC_GISCUS_REPO="username/repo"
    PUBLIC_GISCUS_REPO_ID="R_..."
    PUBLIC_GISCUS_CATEGORY="Announcements"
    PUBLIC_GISCUS_CATEGORY_ID="DIC_..."

Implementation Details

  • The comments widget is rendered by the Comments.astro component.
  • It only renders if the PUBLIC_GISCUS_REPO variable is configured, allowing for an easy opt-in/out.
  • Comments are automatically associated with the post based on its URL pathname.
Back to Blog

Related Posts

View All Posts »