If you want to add comments to your blog quickly there is a nice tool called utterances that uses a GitHub Repo as the api.
Here is how I setup utterances for my gatsby blog in typescript.
Utterances
Utterances is a javascript tool that uses a GitHub repo as the store and api. This makes it ideal for static sites.
People will have to log in to their GitHub accounts to post a comment so spam shouldn’t be too much of an issue. This does mean that Utterances is mostly suited to a site with a developer audience.
Because data is stored in a GitHub repo, you actually own it! This is much nicer than tools like Disqus.
Setup on Github
You have to have a public GitHub repo. My blog content is private so I set up a specific repo for blog comments.
The you install the app on that repo by visiting
https://github.com/apps/utterances
Click “install” and then select your comments GitHub repository.
Adding the UI to your site
You have to inject a script where ever you want the control. I created a component for this. You can see how each of the settings work below.
import React, { useEffect } from 'react'
export const Comments = () => {
const commentsInjectionRoot: React.RefObject<HTMLDivElement> =
React.createRef()
useEffect(() => {
if (commentsInjectionRoot.current?.children.length === 0) {
const scriptEl = document.createElement('script')
scriptEl.setAttribute('src', 'https://utteranc.es/client.js')
scriptEl.setAttribute('crossorigin', 'anonymous')
scriptEl.setAttribute('async', 'true')
scriptEl.setAttribute(
'repo',
'darraghoriordan/darragh-oriordan-com-comments'
)
scriptEl.setAttribute('issue-term', 'pathname')
scriptEl.setAttribute('theme', 'github-light')
commentsInjectionRoot.current?.appendChild(scriptEl)
}
}, [])
return (
<div className="container pt-8">
<h1 className="mt-0 mb-0 text-3xl font-normal leading-normal">
Comments
</h1>
<hr className="my-0" />
<div ref={commentsInjectionRoot} />
</div>
)
}Then where ever you want the comments add the component.
<Comments />
Summary
Utterances is an easy way to add comments to a developer site and you own all the data so it’s low risk.
Give it a try today! - https://utteranc.es/
