Skip to content

healeycodes/gatsby-serverless-comments

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

gatsby-serverless-comments

My blog post: Adding Comments to Gatsby with Netlify Serverless Functions + GitHub


Use Netlify serverless functions to let users add comments to a static website.

  1. πŸ‘© User enters a comment and clicks submit.
  2. βš™οΈ A serverless function receives the data and hits GitHub's API.
  3. πŸ”§ It reads the existing comments.json , appends the new comment, and saves.
  4. 🚧 A new commit triggers a Netlify build.
  5. βœ… The new version of the website is deployed!

The new comment is visible ~30 seconds ⏰ after the first click.


See /src/pages/index.js for the user visible page.

See /functions/comment.js for the serverless function.

Why?

  • Accept user comments and store them on GitHub. No database required.

  • Avoid using third-party plugin solutions that leak your user's data.


Setup

Set the following environmental variables on Netlify:

  • GITHUB_PAT_TOKEN to your GitHub personal access token.
  • GITHUB_REPO to the repository where this code is located.
  • GITHUB_USER your GitHub username.

Set up the site on Netlify to continuously deploy on commits (this the default).

Visit the deploy preview, or production version, and submit a comment from the root path (/). There is a example form that submits a PUT request.

You should see a 204 response in the browser console. Else, check the Netlify functions logs for errors.