Add github based comments on your gridsome blog

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.

Gitalk Demo

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.