Add github based comments on your gridsome blog

Overview

This is a guide on how you can add GitHub based comments on your Gridsome powered blog like shown in the picture below.

We will use a component named Gitalk in this article. All the comments are stored in a github issue. So, you don't need a seperate database for storing the comments.

Let's Start

Create a GitHub OAuth application

• Go to your Github App Settings.
• Go to OAuth Apps.
• Create new OAuth application.
• Fill in all the required details. In the Authorization callback URL fill in the URL where your site will be deployed.
• Copy the Client ID and Client Secret from your OAuth App.

Configure your Gridsome app

First of all, install the gitalk gridsome plugin.

yarn add gridsome-plugin-gitalk

Now, in your gridsome.config.js add the following block to your plugins.

module.exports = {
  ...,
  plugins: [
    ...,
    {
      use: "gridsome-plugin-gitalk",
      options: {
        clientID: "kuy78h87gg87g8g89", // The client id you copied earlier.
        clientSecret: "r248hf924hfhh8fh8a2", // The client secret you copied earlier.
        repo: "nishantwrp-website", // The name of the github repo where the comments should be stored.
        owner: "nishantwrp", // The username of the owner of the github repository.
        admin: ["nishantwrp"], // The usernames of the admins of the repository.
      }
    }
}

Now, you're all set. You can just use the gitalk component in your Vue files like below.

<Gitalk />

That's all

If you did everything correctly, the comments and github authentication should work correctly when you deploy it. For further advanced configurations please refer to the plugin docs. Thanks!

---

Hi, I'm Nishant Mittal. Thanks for reading this post. Feel free to comment or reach out on Twitter in case of any queries. You can also find me on Github, Linkedin.