Unlock the Power of Engagement: Building a Custom Comment System for Your Gatsby Blog

Why Comments Matter

Interacting with your blog readers is crucial for building a loyal community. A comment system allows you to foster discussions, gather feedback, and create a sense of belonging among your audience.

Demo and Workflow

Take a look at our demo GIF to see the commenting system in action. Our comments are stored in GitHub Issues, and here’s a breakdown of the workflow:

1. Authentication: We check if the user is authenticated with GitHub. If so, they can comment directly. Otherwise, they’ll need to sign in.
2. Issue Creation: When a user clicks the comment button, we check if an issue exists in the blog slug, title, or unique attribute. If not, we create a new issue.
3. Comment Publication: We publish the comment into GitHub Issues, making it visible in our blog comments.

Building GitHub Authentication

To build a secure and simple authentication system, we’ll use a custom server with Passport.js. Create a custom server and add the following code to App.js:

// Handle Passport.js GitHub authentication and callback
//...

Next, create a Passport.js file to configure the passport, and obtain your client ID and client secret from GitHub settings.

Building the Comments System

Using Gatsby Starter Blog, let’s build a comments section. We’ll create a New Comment component that posts comments to GitHub Issues and a Comment component that renders each comment.

New Comment Component

Create a newComment.js file and add the following code:

// Check if the user is authenticated, and handle comment submission
//...

Comment Component

Create a Comment/index.js file and add the following code:

// Render each comment from GitHub Issues
//...

Posting Comments and Creating Issues

In templates/blog-post.js, add the following code to post comments and create issues:

// Load the issueByTerm, post the comment, and load comments
//...

Rendering Comments

Finally, render the comments in your blog by adding the following code to templates/blog-post.js:

// Render the comments component
//...

You now have a simple commenting system for your Gatsby blog using GitHub Issues. Feel free to add more features, such as reactions and spam filtering, to enhance the experience.