How to use the github discussions to add a comment feature to your static website built with hexo?

POSTED BY KENNY LEE ON 2021-09-20

What’s the idea?

My website was previously using Disqus for the comment system. After a while, I noticed that it automatically displayed a lot of ads. The number of ads was just too much, and the ads had little to do with my content. If I want to remove the ads, I need to pay money. So I decided to look for anothercomment system. Finally, I found Giscus, which is a system that uses the Discussions feature on Github to leave comments. Of course, there are some other systems that use Issue on Github to leave comments. But I don’t really like the idea of using Issue on Github to record comments on a website. After all, Issue is different from comments. And Github’s newly released Discussions feature was created to discuss issues, with the same purpose as website comments.

What’s the steps?

Step 1 - Create a public repository in Github and let it to be prepared for integrating to your website

There are detail descriptions in Giscus website.

The key points are:

  1. Create a public repository with your Github account.
  2. Enable the Discussions Feature which is disable by default for your repository.
  3. Install Giscus on your repository.
  4. Use Giscus Configration to configure the script for you.

This is a sample script generated by Giscus Configration:

1
2
3
4
5
6
7
8
9
10
11
12
<script src="https://giscus.app/client.js"
  data-repo="kennylee2008/future-labs"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzOTMyMTkzMDQ="
  data-category="General"
  data-category-id="DIC_kwDOF3AM6M4B_Hfp"
  data-mapping="og:title"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-theme="light"
  crossorigin="anonymous"
  async>
</script>

I select the og:title as the data mapping, because my website page has the og:title meta property.

Step 2 - Add the script to Hexo and Landscape theme

  1. Add a configuration variable to the landscape theme configuration file

Add 

1
2
giscus:
  enable: true

to your /themes/landscape/_config.yml file.

  1. Add script to your template

Add code 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<% if (theme.giscus.enable){ %>
  <script src="https://giscus.app/client.js"
  data-repo="kennylee2008/future-labs"
  data-repo-id="MDEwOlJlcG9zaXRvcnkzOTMyMTkzMDQ="
  data-category="General"
  data-category-id="DIC_kwDOF3AM6M4B_Hfp"
  data-mapping="og:title"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-theme="light"
  crossorigin="anonymous"
  async>
</script>
<% } %>

to your /themes/landscape/layout/_partial/after-tooter.ejs .

  1. Add a comment link and the comment UI to the end of you article

Add code 

1
2
3
<% if (post.comments && theme.giscus.enable){ %>
  <a href="<%- post.permalink %>#giscus_comments" class="article-comment-link"><%= __('comment') %></a>
<% } %>

and 

1
2
3
4
5
6
7
<% if (!index && post.comments && theme.giscus.enable){ %>
  <section class="giscus" id="giscus_comments">
    <div id="giscus_thread">
      <noscript>Please enable JavaScript to view the comments powered by giscus.</noscript>
    </div>
  </section>
<% } %>

to /themes/landscape/layout/_partial/article.ejs .


Enjoy it

Left a comment:

On the Discussions tab of your repository:

You can see all the comments there:

No Ads
Always Free
Data stored in your repository