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 theURL
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.
Top comments (0)