Hello comments!

Published on Wednesday, September 30 2020 • less than a minute read

One of the most important parts of any website, is interaction. There needs to be that connection that forms between the content of the site and the user. And for far too long, I had been thinking about a way to go about this, for this site. The most obvious way to implement this, would've been something like Wordpress' Jetpack or Commento. But I wanted something simple, where we coul just talk. Researching this, I stumbled upon this tool called Utterances. And I fell in love with it instantly. The familiar Github Primer Design System, the ease of its setup was just too good to be true. But it is, it was really easy to set up and get started.

How does Utterances work?

Utterances manages comments posted by users authenticated with their Github accounts.
It stores these comments as issues in a repository of your liking.
The design is familiar as it uses Github's Primer Design System to all developers should feel very comfortable using it.
And it also supports markdown.

Setting up Utterances for your website

So I thought, why not show you how easy this is to setup as I'm setting it up. Took less than 20 minutes.

Create a public repository and install the Utterances Github App
Goto Utterances' website and choose how you want the issue's title to be generated.
Copy the script generated based on your configuration. My script looks like this:

    <script src="https://utteranc.es/client.js"
            repo="mrsauravsahu/portfolio-comments"
            issue-term="title"
            label="comments"
            theme="github-dark"
            crossorigin="anonymous"
            async>
    </script>

And you are done. The basic interface should work now. If you want to customize it though, you can use the .utterances and .utterances-frame css selectors to do so.

So be sure to leave a comment!

Sahu, S