Skip to main content
  1. Posts/

Choosing giscus on Hugo Site

·4 mins
git hugo GitHub
Table of Contents

Back in 2018, I used Disqus comments on my WordPress site. However, as time went on, I found it injecting scripts and ads into my site, even after I opted out. Not only did this slow down my site’s loading time, but the paid plan was also too expensive for my blog. Frustrated, I decided it was time for a change.

For a while, I went without a comments option on my blog. However, I soon began to feel like I was missing out on valuable feedback and engagement from my readers. I wanted to know what people thought of my articles and if there were any useful critiques or tips they wanted to share (even though sometimes I think no one cares). So, despite my initial reluctance, I decided to explore adding a commenting system back to my site.

Since my sites are powered by Hugo, I began looking for recommendations. Hugo does ship with an internal Disqus template, but I wanted something simpler and less intrusive. I didn’t want to deal with the complexities of commercial alternatives, nor did I want to risk the spam and lack of monitoring that can come with open-source alternatives.

After some research, I stumbled upon two promising options: utterances and giscus. Both use GitHub to store data and setting them up seemed simple enough. As my sites are already hosted on GitHub, using a commenting system that integrated seamlessly with it made perfect sense to me. After comparing the two, I decided to go with giscus.

Why giscus?
#

giscus uses GitHub Discussions as its commenting system, making integration easy and straightforward. It leverages GitHub’s native APIs, and all you need is a GitHub account and repository, which you probably already have for hosting your Hugo content.

Here’s how it works:

  • When a page loads, giscus uses the GitHub Discussions search API to find the discussion associated with that page based on a chosen mapping (URL, pathname, title, etc.).
  • If a matching discussion cannot be found, giscus automatically creates one the first time someone leaves a comment or reaction.

Setting Up giscus
#

Setting up giscus is relatively easy:

  1. Choose the repository to which giscus will connect, ensuring that it is public and that the giscus app is installed.
  2. Make sure the Discussions feature is turned on for your repository.

💡It is not necessary to use the same repository. If your content repository is private, you can create a new public repository, enable GitHub Discussions on that repository, and use it instead.

  1. Add the giscus script block to comments.html under layoutspartials, replacing the placeholders with your repository and discussion details.
 1<script src="https://giscus.app/client.js"
 2        data-repo="[ENTER REPO HERE]"
 3        data-repo-id="[ENTER REPO ID HERE]"
 4        data-category="[ENTER CATEGORY NAME HERE]"
 5        data-category-id="[ENTER CATEGORY ID HERE]"
 6        data-mapping="pathname"
 7        data-strict="0"
 8        data-reactions-enabled="1"
 9        data-emit-metadata="0"
10        data-input-position="bottom"
11        data-theme="preferred_color_scheme"
12        data-lang="en"
13        crossorigin="anonymous"
14        async>
15</script>

Provide the actual repository details to giscus.app to generate an output for you.

📌 If you are using the ‘Discussion title contains page’ option for mapping discussions to pages, you will need to include atag in the header. This tag will contain the title of the discussion topic for your blog post. Since I have chosen this option, I added thetag to the layoutshead.html file.

That’s it! You can now enjoy a simple and effective commenting system for your Hugo blog, hosted right alongside your content on GitHub.

📌 However, it’s worth noting that this adds a barrier for readers. To comment, visitors must have a GitHub account and authorize the giscus app, which not everyone may want to do.

By using giscus, I was able to run my entire Hugo blog on GitHub, including hosting the comments. With its seamless integration with GitHub, it’s never been easier to engage with your readers and gather valuable feedback on your articles.


Cover image generated by Bing

Related

Private GitHub Repo with Public Updates: A Fork-Like Solution
·2 mins
git
Formal Methods for Software Engineering: A Semester in Review
·3 mins
buw weimar fm