Post

GitHub Blog [3]: A comments system, giscus

Posted Updated
By Dyan Lee
2 min read

Prerequisites

[1] Github Blog [1]: Using Jekyll

[2] GitHub Blog [2]: Customizing

giscus

0

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on the website via GitHub. Similar to utterances.

How to use giscus

1. Installation

Install Giscus App in “Repository to use comments”

  • “Repository to use comments” will be {username}/{username}.github.io if you are on GitHub Pages for blog.

2. Activation

Activate Discussion in Settings > General > Features section and check the tab!

1

2

3. Setting the Configuration

Go into giscus setting page and follow the instruction.

(1) Language

(2) Repository

3

(3) Discussion Category

Choose General and check Only search for discussions in this category and rest of them are optional

result

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script src="https://giscus.app/client.js"
        data-repo="rebedy/rebedy.github.io"
        data-repo-id="xxx"
        data-category="General"
        data-category-id="xxx"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

4. Setting _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

...

comments:
  # Global switch for the post comment system. Keeping it empty means disabled.
  provider: giscus # [disqus | utterances | giscus]
  # -> The chirpy supports three different comment providers.
  # Among them `utterances` and `giscus` use GitHub API.
  # `utterances` uses GitHub Issue and `giscus` uses GitHub Discussion.
  # I will go with the `giscus`

  # The provider options are as follows:
  disqus:
    shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
  # utterances settings › https://utteranc.es/
  utterances:
    repo: # <gh-username>/<repo>
    issue_term: # < url | pathname | title | ...>
  # Giscus options › https://giscus.app
  giscus:
    repo: "rebedy/rebedy.github.io" # <gh-username>/<repo>
    repo_id: "xxx"
    category: "General"
    category_id: "xxx"
    mapping: # optional, default to 'pathname'
    strict: # optional, default to '0'
    input_position: # optional, default to 'bottom'
    lang: # optional, default to the value of `site.lang`
    reactions_enabled: # optional, default to the value of `1`

...

5. Deployment

1
2
3

git add .
git commit -m "giscus"
git push

result

4

References

GitHub
blog chirpy github jekyll google
This post is licensed under CC BY 4.0 by the author.