A guide to adding Giscus comments to Ghost

How to add Giscus comments to Ghost, add a choice of comment system for Ghost users.

26 May 2023 . 3 minutes read .

Giscus is a free commenting app with a database stored in your Github account instead of the service's database like other comment apps.

Giscus links to the Github Discussion API to create comments for your site.

The advantages of Giscus are free, spam-resistant, and quite beautiful. The disadvantage is that it is mandatory to have a Github account to be able to comment.

How to use Giscus is as follows:

1. Create and Configure Github Repo

Log in to your Github account (or create a new Github account) and create a new public repo (not private). You give this Github Repo a memorable name.

Then you need to install the Giscus App for the newly created Repo.

Use the Only select repositories option for your newly created repo (don't use the All repositories option) — Use the Only select repositories option for your newly created repo (don't use **the All repositories option)**

In the settings, turn on the Discussion feature (it turns off by default).

Open the Discussions option for your newly created Github Repo

Get it done on Github.

2. Generate Giscus App code automatically

You go to the Giscus.app to create, here there is old technology available for you to create code.

You need to enter "username/reponame". Username is your Github username, reponame is the Repo name you set above.

Customize the interface and some features of Giscus as follows.

Note, you should choose a preference color because it will be based on the Darkmode (if any) of the Ghost theme you use.

You can also choose to toggle the reaction widget on and off.

Finally, you create the code and paste it into the Ghost theme.

3. Secure your Giscus commenting system

Very important for this step, you need to make sure Giscus is only visible on your site. Since Giscus scripts are client scripts, they are easily stolen.

To avoid that, you need to whitelist the domain you use Giscus.

You create a new file named , paste the code belowgiscus.json

{
  "origins": [
    "https://yourdomain.com"
  ]
}

Change to the domain you are using, insert Giscus.yourdomain.com

Create a new file giscus.json — Create a new file `giscus.json`

Done, now Giscus only loads comments on the specified domain you declared above.

4. Set up comment notifications

This is better than Telegram comments for Ghost because notifications can be created.

You install in Github Repo Setting, at the Notification tab, you enter the email you use to receive notifications.

Every time you have a new comment (including replying to a comment), you'll receive an email notifying you.

Personal experience using Giscus

Due to the requirement to have a Github account to comment, it is quite unsuitable for general readers. In return, good spam protection.

There is no limit on the display of comments, which will be a big issue in terms of display and loading speed if there are many comments on the page.

Depending on the Github Discussion API, Microsoft can change the API anytime they feel "abused" or unnecessary. Hopefully it doesn't happen!

Giscus is still being updated to be more complete, hopefully more diverse configurations in the next updates.

Giscus is only suitable for personal blogs.

Final Thoughts...

Giscus can be used for all platforms, not just Ghost. Each comment will rely on the slug of the article, so you must not change the article slug that will lose the old comment.

Finally, check out the demo below ↓.

Tutorials