Skip to main content

Hashim Warren

Marketer turned Web Developer - https://hashim.xyz

2 min read · March 26th 2020

Challenge 13 - Enable Comments to Your Gatsby Blog

Gatsby was named the #1 new technology to learn in 2020!

To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.

Learn more about #100DaysOfGatsby here!

Challenge 13: Add Gated Content to Your Website

In a previous challenge you made your Gatsby site into a dynamic app by enabling authentication and private routes. This week you’ll learn how to include another dynamic feature that is common for blogs - user comments!

There are multiple ways to accept user-generated content on your site. So, instead of guiding you to one method, the resources below detail three options, along with the pros and cons of each approach.

Gatsby Comments Resources

Option 1. Embed comments using JavaScript.

Pros and cons: This approach is the simplest option for adding comments to your site. You can choose many low cost or free comment services, like Discus and Facebook Comments. However, this method will have a negative impact on your site performance, and has privacy implications for your users.

Tutorial: Using Javascript-based comment service, Discus with Gatsby

Option 2. Add comments to your content

Pros and cons: A new class of comment services have recently risen that enable users to submit comments that will be server side rendered and displayed within your static HTML. Your site probably won’t see a performance hit, but users will experience a wait time for your comment approval, and the site’s build. Unfortunately, most of these services only work with Markdown-based pages, for projects hosted on GitHub.

Tutorial: Using git-based comment service, Staticman with Gatsby

Option 3. Roll your own comment engine

Pros and cons: If you want complete control of the design and functionality of your commenting on your site, you can create your own commenting workflow using low cost tools. This process is more advanced than using a third-party service, but once you create it, it can be reused for other features on your site, such as lead and feedback collection.

Tutorial: DIY Gatsby comments tutorial

What to Do If You Need Help

If you get stuck during the challenge, you can ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, Spectrum, and Dev.

Tagged with learning-to-code, 100-Days-of-GatsbyView all Tags

Enjoyed this post? Receive the next one in your inbox!