Blog Tutorial 4 - Adding Discussions

Introduction

In this fourth part of the multi-part tutorial I will be walking you through setting up the discussions/commenting system for your posts. Its is always nice to learn from improvements pointed to by the readers and therefore a commenting system is a must for any blog post.

There are a number of options available to accomplish this. A few options are below:

• Disqus
• Staticman
• Giscus
• Cusdis

After looking at all the options I honed in on two. Cusdis for its very lightweight nature and Giscus as its part of github discussions tool. I will show how to setup both. The issue with cusdis was that since my theme used switchable theme (‘dark’ or ‘light’), I was not able to get the cusdis box to change colour scheme as well. After lot of failed attempts I decided Giscus was a better option. Disqus is also nice but loads a lot of trackers etc which I don’t like.

Giscus Setup

To do this first we have to setup github discussions first. ^{1 2 3 4 5}

Github Discussion Setup

Go to your repository <USERNAME>.github.io settings page and enable discussions, like shown below.

Click on the setup discussion button and accept the defaults and press start discussion button shown below.

Giscus App Settings

First head over to the giscus app site. Navigate down to the configuration settings, and fill in the repository name, the discussion title setting, discussion category, Features and theme setting as shown in the screenshots below.

Once the settings have been added, scroll to the Enable Giscus setting as shown below for my repository. The giscus site shows a script of setting needed to enable giscus. Here I have deliberately changed the repo-id and the category-id to *.

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

These data fields in the script above are then to be used to modify your _config.yml file appropriately. Here is a snippet of the _config.yml file changes.

comments:
  active: giscus        # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
  # The active options are as follows:
  disqus:
    shortname:    # fill with the Disqus shortname.
  utterances:
    repo:         # <gh-username>/<repo>
    issue_term:   # < url | pathname | title | ...>
  # Giscus options › https://giscus.app
  giscus:
    repo:  pemd-sys/pemd-sys.github.io            # <gh-username>/<repo>
    repo_id: MD************************************=
    category: General
    category_id: MDE********************************
    mapping:           # optional, default to 'pathname'
    input_position: top   # optional, default to 'bottom'
    lang:              # optional, default to the value of `site.lang`
    reactions_enabled: # optional, default to the value of `1`

Push the changes to github, and navigate to any of your blog posts and you will see a commenting section as shown below.

Cusdis Settings

Cusdis is not supported by default in the _config.yml file ^{6 7}. So, first we have to head over to the cusdis site and create an account with the name of the github.io repository. After setting up the dashboard will look something like this below.

clinking on the embedded code button will show the integration script, like that it shows for mine.

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="ec**************************************"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

In your repository go to the _layouts/post.html and ADD the following lines at the end.

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="ec**************************************"
  data-page-id="{{ page.id }}"
  data-page-url="{{ site.url }}{{ page.baseurl }}{{ page.url }}"
  data-page-title="{{ page.title }}"
  data-theme="{{ prefers-color-scheme }}"
></div>

Go to your _includes/head.html and add the following lines in the script section of the file, just before <\HEAD> tag.

<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

Once done perform a git push and check if the github actions throws any errors. Then head to your github.io page and check if the commenting system is working.

That’s All Folks ! Happy Blogging.

References

1. https://docs.github.com/en/discussions/quickstart ↩

2. https://blog.arkey.fr/2022/10/16/moving-from-disqus-to-giscus/ ↩

3. https://lazyren.github.io/devlog/use-utterances-for-jekyll-comments.html ↩

4. https://www.cesarsotovalero.net/blog/replace-disqus-with-a-better-alternative.html ↩

5. https://github.com/apps/giscus ↩

6. https://github.com/djyde/cusdis ↩

7. https://github.com/Young-Lord/Young-Lord.github.io/blob/b6b4cefbb24ac3e9cc65f40965e7cdd650bb0481/_includes/comments-providers/cusdis.html ↩