How to add commenting feature on quarto blog

Enabling public comments for blog posts with Giscus

quarto
Author

Eunki Chung

Published

July 5, 2023

Quarto supports commenting features with the following three options.

  1. Hypothes.is
  2. Utterances
  3. Giscus

Hypothes.is enables highlighting and annotation on any part of an article. However, it seems like it only works with several supported browsers on PC.

Utterances leverages Github issues for comments. When someone leaves a comment on a post, the Utterances bot creates an issue on the designated repository.

Giscus, similar to Utterances, uses Github discussions instead of the issue tab and supports some additional customization features.

I chose Giscus, and this post includes the necessary steps to adopt the commenting feature using Giscus.

Firstly, you need a public Github repository to host the discussion on your website. Since I had a public repository for hosting my blog with Netlify, I used the same one for Giscus.

Then, head to the Giscus install page to install Giscus on your repo.

Click ‘Install’ and select the target repository. In my case, I used eunkich/blog.

Finally, you need to enable the ‘Discussions’ feature on your repository. On the main page of your repository, navigate to Settings > Features > Discussions. Check the ‘Discussions’ box if it is unselected.

Now you need to configure Giscus. Head to Giscus and scroll down to configuration section. You should see a green Success sign when you type in your repository.

To complete the process, you can manually finish the configuration and add the result to the blog template. But Quarto has an easier way to implement it. Just add the lines below to _quarto.yml. This enables the comment box for every post, so you may want to disable it for certain pages by adding comments: false in the configuration section of those pages.

_quarto.yml
comments:
  giscus: 
    repo: eunkich/blog

You can also add additional options to customize your comment box, such as theme, input-position, and loading policy. Details regarding available options can be found on the Giscus configuration page.