Github Powered Comments With Gitalk


gitalk logo

I decided to change the comment system on the site to something based on Github as it seems more fitting to the continuous deployment with JAMstack.

Gitalk seems to be the best free option available at the moment.

I looked around at gatsby sites with gitalk on github & found they all seem to use old components with no hook support.
So I ended up creating a new component that allows the use of hooks for the GraphQL queries.

Gitalk Features

  • Authentication with Github account
  • Serverless (all comments stored as github issues)
  • Both personal and organization github projects can be used to store comments
  • Localization, support multiple languages [en, zh-CN, zh-TW, es-ES, fr, ru, de]
  • Hotkey submit comment (cmd|ctrl + enter)
  • Markdown support

Creating a Component With Hooks

I used useEffect to load Gitalk after the comments component is loaded.
(old non hook components I found use componentDidMount)

useEffect(() => {
  const GitTalkInstance = new Gitalk({
    clientID:  "...",
  // ...
  // options below
  })
  GitTalkInstance.render('gitalk-container')
})

This allows use of react hooks.
I use useSiteMetadata hooks for the GraphQL queries.

Source Code

The source for the site is available on github.

equk-gatsby