preloader

Learning to Hugo Part 8: Using Gitalk instead of DisqusBlog

How to configure Hugo and GitHub to use Gitalk commenting system

BY Justin / ON Jun 02, 2021

This post was originally posted on justinjbird.me by Justin

Intro

This is the eighth part of the learning to Hugo series detailing my journey to getting this site up and running! Typical dev appraoch I just installed Hugo and got going. But I have learnt a few things along the way that have improved my development time and hopefully these things will help you. In this section I'm going to walk through configure Gitalk commenting system using a theme that is preconfigured to utilise it.

Health & safety warning

I'm no web dev! My world is data and so this stuff is outside my area of expertise. I'm learning as I go and so the info I'm sharing is my interpretation of that in a way that makes sense for me as a data-person-doing-web-dev. Some of the technical aspects might be a little misunderstood and I'd love to hear from you in the comments if you think there's a better way or if I've misunderstood a concept. Hopefully outlining my understanding of it might make it easier for someone wanting to give it a go. If you want advanced CSS understanding or web development skills though these are not the posts you're looking for!
obi wan kenobi saying these are not the posts you're looking for

obi wan says these might not be the posts you're looking for

Not a good start Disqus

Hugo comes with Disqus commenting system built in, but I had issues with it very early on with almost the first person who attempted to comment on a post being unable to log in to comment! This feels like a pretty fundamental issue to have! I did a bit of research into Disqus and whilst the concept of it is cool it seems (at least on the surface) to be riddled with issues and this specific one seems to pop up very regularly. There doesn’t appear to be enough support either (just check the number of open issues in their forums).

Turning to Gitalk

In my quest for a different commenting system I had a look at the various options listed on the Hugo page but all of them required too much effort for my liking or leant of skills I’d have to learn. My major requirement was to have something simple.

Next I turned to my theme itself. I’m using keepit and there’s a few systems made available out of the box and I warmed to Gitalk. This seems a good fit for me - it uses GitHub for comments. Perhaps it’s a bit limiting since it requires someone to actually have a GitHub account but since I’m in tech and my peers are in tech it’s a fair assumption that most will have a GitHub account. Most commenting systems require some form of registration, this is good enough for me.

Minimal steps required

Since it is already built in I don’t have to do any web dev to get it up and running, just some configuration in GitHub and some parameter setting in Hugo! Let’s go!

Preparing GitHub

In order to use Gitalk you need to prepare two things;

  • A public repository to store your comments
  • A GitHub application that will be used to communicate with the repository

Setting up a public repository

Go here and create a new repo, make sure it’s set to public and make a note of the name. Completing this task should be straightforward enough, but if you need more info read through the docs.

Set up GitHub application

Go here to create your application. When you create the application, give it a meaningful name and ensure that both the URL and the Callback URL are your own website’s URL. Below is an example for my site;

image shows the creation page for your GitHub application, required fields are a name for your app and url and callback url which should be your websites url

Once you hit hit register application you will be presented with a configuration page. Here you will see a client ID which you should take note of, you will need this when configuring your site. You now need to create a secret, click on the generate a new client secret button;

image shows configuration page, you should make note of your client Id which will be used to configure Hugo

Once you have done this your secret will be generated. You need to make a note of this now since you cannot read it once you’ve left this page;

image shows that a secret has been created, you should make a note of this in order to configure Hugo

If you forget your secret you can generate new ones, but you won’t be able to retrieve existings ones! Simply hit the generate a new client secret button to create a new secret and don’t forget to make a note of it! You’re best putting both this and the client ID inside a text file temporarily since you’re going to need to copy it into Hugo config (or just leave the page open whilst you configure Hugo).

I’ve already cycled the secret, this one isn’t going to work just in case you thought to give it a go!

Configuring Hugo

If your theme is already set up for Gitalk then configuring it will likely follow the same process from here. Open your config.toml file, hopefully it will already have a preconfigured set of parameters. If it doesn’t, you can also check the exampleSite folder inside of your theme to see whether this config.toml file includes the parameters. From here you simply need to set the parameters accordingly;

  • owner is your GitHub ID
  • repo is the name of the repository you set up to store the comments
  • clientId is the client ID from the GitHub application you created
  • clientSecret is the secret you just generated

So based on the example screenshots above, my parameters would look like this;

[params.gitalk]
owner = "justinjbird"
repo = "site-blog-comments"
clientId = "05963a3ef57aeeec1238d"
clientSecret = "5d7f9c71119f9878de78dc72d90cd90064b43ff4"

Testing locally

If you’ve configured everything correctly, once you build your site locally, you should see a Gitalk stub similar to this;

image shows a message from Gitalk saying related issues not found, it should also present your GitHub handle

All this means is that Gitalk hasn’t found an entry for this page in your public repo. This is because you are running it locally. Once the site is published, an issue will be created and the comment block will look like this;

image shows a comment block with a GitHub logo and a button asking to log in with GitHub

Github issues

Each page creates a github issue within your repo, the first comment is a link back to the page that created it and any additional comments become part of the issue. Pretty neat! Here’s an example;

https://github.com/justinjbird/site-blog-comments/issues/5

What if theme doesn’t support Gitalk natively?

The Gitalk repo walks through the steps to configure however, I’ve not looked into it in too much detail because I didn’t need to! However, I will probably have a need to explore this in the future so I may end up updating this post in the coming months. If you’ve done this yourself, let me know in the comments!

Any comments?

I'd love to hear from you in the comments. If you think something needs more explanation or I've not quite understood a concept, if you have a question or just want to say hi please drop me a message in the comments!

Thanks

If you made it all the way down here, thanks for reading my post and enjoy your day.

#mtfbwy

#mtfbwy

Share:
comments powered by Disqus