https://github.com/healeycodes/gatsby-serverless-comments

🔧 Use Netlify serverless functions to add commenting to a static website
https://github.com/healeycodes/gatsby-serverless-comments

blog comments gatsby netlify netlify-serverless-functions serverless

Last synced: about 1 month ago
JSON representation

🔧 Use Netlify serverless functions to add commenting to a static website

• Host: GitHub
• URL: https://github.com/healeycodes/gatsby-serverless-comments
• Owner: healeycodes
• License: mit
• Created: 2020-05-03T13:22:39.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-01-22T11:59:13.000Z (almost 3 years ago)
• Last Synced: 2024-11-30T14:49:12.382Z (about 1 month ago)
• Topics: blog, comments, gatsby, netlify, netlify-serverless-functions, serverless
• Language: JavaScript
• Homepage: https://healeycodes.com/adding-comments-to-gatsby-with-netlify-and-github/
• Size: 428 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gatsby-serverless-comments

> My blog post: [Adding Comments to Gatsby with Netlify Serverless Functions + GitHub](https://healeycodes.com/adding-comments-to-gatsby-with-netlify-and-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.