A comment system for static websites using Github Discussions

I’ve been searching for an easy alternative to a comment system for this blog, which is built with Pelican and served through Github Pages. Being a static website, traditional server-based solutions are not a good fit or they require too much setup work that I really didn’t want to do. So after many months procrastinating on this, I finally sat down and got it work in less than an hour. Easy!

Setting up

I looked mainly at two solutions, utterances (based on Github issues) and giscus which is still under active development since it’s based on a newer feature, Github Discussions. So naturally, I chose the more unstable and experimental solution.

The setup is extremely straight-forward and can be found either on the app website or the repo, so make sure to check those sources as well.

Start by heading to https://giscus.app to begin the process.

Make your website giscus-ready

Your website’s repo needs to be on Github, for obvious reasons, and needs:

• public access, so discussions can be viewed
• the giscus app installed
• the Discussions feature turned on

You can simply follow the guidelines in the website to generate you definitive script tag which just needs to be plugged into your HTML template, and it looks like this:

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

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

Plug-and-play

The only necessary step left is to go into your desired template (article.html in my case) and just paste that snippet of code wherever I want my comments to show up:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!-- article.html -->
  ...
  <div class="article_text">
    {{ article.content }}
  </div>
  <div class="article_meta">
      ...
  </div>

  {% if GISCUS_ENABLED %}
  <div id="article_comments">
    <div id="comment_thread">
    </div>
    <script src="https://giscus.app/client.js" data-repo="gonz4lex/gonz4lex.github.io"
    data-repo-id="MDEwOlJlcG9zaXRvcnkyMjU5MTg3MDM=" data-category="Announcements"
    data-category-id="DIC_kwDODXc-784COr2Q" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0"
    data-input-position="bottom" data-theme="light" data-lang="en" data-loading="lazy" crossorigin="anonymous" async>
      </script>
  </div>
  {% endif %}

I added an option GISCUS_ENABLED flag on my settings file, but that’s entirely optional.

After that, just reload and regenerate your site, and comments should show up on your posts!

Some closing thoughts

Even if this isn’t a big change or project, it’s another reminder of why it’s almost always better to dive right away into demos or proofs of concepts rather than getting stuck on an endless loop of analysis paralysis. If I hadn’t waited so long because I wasn’t sure how to best tackle this feature, I would had probably finished months ago.

However, before implementing this feature yourself, make sure it works by trying out the comment section below!