头图

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.


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 740

封面图
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

Git 入门与实践
Git 入门与实践推荐:猴子都能懂的 GIT 入门Git --everything-is-loca 官方文档Git 教程-廖雪峰Git 的使用方式有很多。图形化 —— 小乌龟(Tortoise Git )、命令行—— git bash、IDE 集成等 ......目录1. 基础配置...

RainBow1阅读 2.2k

openKylin 0.9.5版本正式发布,加速国产操作系统自主创新进程!
2023年1月12日,中国桌面操作系统根社区openKylin(开放麒麟)正式发布openKylin 0.9.5操作系统版本。此版本充分适应5G时代需求,打通平板,PC等设备,实现多端融合,弥补了国产操作系统的短板,有效推动国产操作...

openKylin6阅读 7.4k

封面图
Git 分支管理策略汇总
我大概说了一些规则,但仔细想来,好像也并没有形成一个清晰规范的流程。所以查了一些资料,总结出下面这篇文章,一共包含四种常见的分支管理策略,分享给大家。

alwaysbeta3阅读 931

封面图
Serverless Devs 重大更新,基于 Serverless 架构的 CI/CD 框架:Serverless-cd
近日,Serverless 开发者平台 Serverless Devs 重磅发布基于 Serverless 架构的轻量级 CI/CD 框架——Serverless-cd。Serverless-cd 是一款运行在 Serverless 架构上的功能强大而灵活,安全,低成本的CI/CD开源框架...

Serverless1阅读 316

git cherry-pick 同步修改到另一个分支
我们在开发中有时会遇到,需要将另一个分支部分修改同步到当前分支。如下图,想把 devA 分支中 commit E 和 F,同步到下面绿色的 devB 分支中。

大数据王小皮阅读 1.8k

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏