Skip to main content

Using GitHub Discussions as a Comments Backend with Giscus

Basic setup

  • Create a public GitHub repo to host your comments
  • Enable the Discussions feature in your repo
  • Install the giscus app in that repo
  • Choose the mapping between the embedding page and the embedded discussion
  • Choose the discussion category where new discussions will be created. It is recommended to use a category with the Announcements type so that new discussions can only be created by maintainers and giscus.
  • Choose which features to enable
    • I chose to enable reactions for the main post
    • May want to avoid lazy loading, at least until the feature has better support on mobile
  • Choose your preferred color scheme
    • I chose “Preferred color scheme” since my site always determines light or dark mode based on the user’s system preferences
  • Copy the code snippet and paste it in your site
  • You can customize the container layout using the .giscus and .giscus-frame selectors from the embedding page.
  • Test by creating a new discussion in your repo and confirming it shows up on your site

Advanced setup

  • Create a giscus.json file in your repo to customize the giscus app
  • Restrict the giscus app to only run on your site by adding your site’s domain to the origins array:
  {
    "origins": ["https://bennypowers.dev"]
  }
  • Avoid loading the wrong discussion by adding the data-strict="1" attribute to the giscus script tag
  • If you want, you can create a custom theme

Inbox