How to use GitHub discussions as your blog's chat system

If you have a personal blog, you probably use a commenting system to manage discussions and comments on your blog. If so, it's time to consider updating your commenting system.

With the help of GitHub Discussions, you can take your blog comments to the next level. In this post, I'll explain how to integrate GitHub discussions into your blog and make the most of it.

What is a "GitHub discussion"?

GitHub Discussions is a forum that can be enabled on every GitHub repository. It enables developers to easily discuss new features, get feedback from the community, create polls, make announcements, and more.

GitHub discussion boards are a one-stop collaboration place for developers and community members.

How to use GitHub discussions as a chat system

To integrate GitHub discussions into your blog, we will use giscus .

giscus is a commenting system powered by GitHub discussions. It allows you to integrate discussions in the repository into your blog.

Your readers can leave comments on your blog that appear on both your blog and your codebase's discussion pages.

Advantages of using discussion boards as your blog chat system

• it's totally free
• No ads or tracking
• it's super powerful
• You have full control and full revision rights over comments.
• there are many themes
• it's fairly customizable
• You can self-host on your own server

Keep in mind that this tool is primarily for developer blogs, as most developers use GitHub.

How to integrate giscus in your blog

prerequisites

• a blog (you must have access to the source code)
• a GitHub account
• The codebase you choose must be public

First, you need to enable discussion for your codebase.

Go to Repository Settings -> under Features section -> tick the Discussions box.

Next, install the giscus application in your codebase.

Go to https://github.com/apps/giscus , follow the prompts, and grant access to selected repositories only.

Now comes the important part: we need to configure the giscus widget.

First, go to the giscus home page and scroll to the Configuration section.

Choose your widget language, which is the language in which you want the widget to appear.

=

Then enter your repository name and your username , eg username/reponame .

=

For page ↔️ discussion mapping , I recommend selecting "Discussion title contains page URL ". But depending on your needs, choose the one that suits you best.

Next, create a category on the discussion page on your GitHub repository -- like "Comments" -- or choose an existing category.

Then enable optional features as needed.

Next, choose a theme. Don't worry, you can switch between different themes programmatically.

Finally, copy and paste the generated code.

Giscus will generate a script tag based on your settings that you can paste into your code. But we will see how to use the giscus component.

How to use giscus components

If your blog is built with React/Vue/Svelte or Web Components, then you can install the giscus component.

For example, to integrate giscus in React, do the following:

• Install the giscus package.

   npm i @giscus/react
  or
  yarn add $giscus/react

• Then import giscus in your component and use it. Copy the attributes we got in the previous step, remove data- from all attributes, and convert the attributes into valid jsx attributes.

   import Giscus from '@giscus/react';
  
  export default function MyApp() {
    return (
      <Giscus
        id="comments"
        repo="giscus/giscus-component"
        repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
        category="Announcements"
        categoryId="DIC_kwDOF1L2fM4B-hVS"
        mapping="specific"
        term="Welcome to @giscus/react component!"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="top"
        theme="light"
        lang="en"
        loading="lazy"
      />
    );
  }

This is basically the same procedure for other frameworks.

Summarize

In this article, we saw the benefits of using GitHub discussions as a chat system. We also learned how to create and integrate giscus widgets in our website.

I hope you find this helpful, make sure to star the giscus GitHub repository to support them.