Adding Comments Into Hugo Powered Website

May 23, 2021 · 2 min read · Hugo utterances GitHub Tutorial  ·
Share on:
Adding Comments Into Hugo Powered Website

Overview

Having a comment system integrated with our blogging system is obviously interesting and fun, even for a low traffic blogging website like mine:)

But when it comes with some constraints, like:

  • The comment system must be open source, free;
  • The comment system must be easily integrated with GitHub Pages website powered by Hugo.

This can be interesting and let's implement that with the recommended utteranc.

How it works

According to utteranc's website:

1When Utterances loads, the GitHub issue search API is used to find the issue 
2associated with the page based on url, pathname or title.
3If we cannot find an issue that matches the page, no problem, 
4utterances-bot will automatically create an issue the first time someone comments.

So utteranc makes use of GitHub's issue system and turns issues into comments, which is super smart and cool.

Coniguration

The utteranc's website offers a simple form for us to fill up in order to generate the configuration.

What we need is to prepare some simple info:

  • The repo, say mine is: brightzheng100/brightzheng100.github.io
  • Blog Post <-> Issue Mapping, let's pick the default option: Issue title contains page pathname
  • (optional) Issue Label, why not simply just: utterances comments 💬
  • Theme, let's pick the default option: GitHub Light

Now it will automatically help us generate the scripts:

1<script src="https://utteranc.es/client.js"
2        repo="brightzheng100/brightzheng100.github.io"
3        issue-term="pathname"
4        label="utterances comments 💬"
5        theme="github-light"
6        crossorigin="anonymous"
7        async>
8</script>

Integrate it with Hugo website

Create layouts/partials/comments.html containing above scripts generated by utteranc.

For example:

 1$ mkdir -p layouts/partials
 2$ cat > layouts/partials/comments.html << EOF
 3<script src="https://utteranc.es/client.js"
 4        repo="brightzheng100/brightzheng100.github.io"
 5        issue-term="pathname"
 6        label="utterances comments 💬"
 7        theme="github-light"
 8        crossorigin="anonymous"
 9        async>
10</script>
11EOF

Install the utterances app

Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.

Navigate to here, click the Install button and follow through the installation guide.

Make sure you grant it only to your blog website, for example, mine is: brightzheng100/brightzheng100.github.io

And you will see the blogging website like mine come with a comment system, powered by utteranc!

Enjoy!

References