Overview:
JAMStack CFP is a call for papers application that showcases how to add user-generated content to a JAMStack static site using GitHub Actions. It is built with Gridsome, but the same approach can be used with other static site generators like Gatsby. This application allows users to submit their papers through a form, triggers a GitHub workflow to generate a pull request with the submitted content, and generates a static site with the accepted submissions once the pull request is merged.
Features:
- Serverless Function: A serverless function triggers a GitHub workflow that generates a pull request when a user submits a form.
- Static Site Generation: Gridsome generates the site statically, listing all the accepted submissions once the pull request is merged.
- GitHub GraphQL API Integration: The application connects to GitHub’s GraphQL API to generate the list of pending submissions from open pull requests.
Installation:
- Fork the repository and adapt it to your project.
- Add a
GH_TOKEN_PERSONALsecret in your repository settings, containing a token with repo scope. You can create the token in your GitHub settings. This token will be used to run GitHub Action workflows, connect with GitHub’s GraphQL API, and trigger repository dispatch events. - Update the hardcoded owner and name values in
src/pages/Pending.vueandfunctions/submit.jsto match your GitHub username and repository name. - To run the project locally, create an
.envfile containing theGH_TOKEN_PERSONALvariable. Then runnpm run develop. - To deploy to Netlify, add the
GH_TOKEN_PERSONALenvironment variable in your project settings. Additionally, configure a hook in your GitHub repository settings to rebuild the page when a new submission pull request is opened. - Alternatively, you can choose to deploy to GitHub pages. The front-end deployment workflow is ready, but you will need to handle the deployment of the serverless function yourself.
Summary:
JAMStack CFP is an example call for papers application that demonstrates how to add user-generated content to a JAMStack static site using GitHub Actions. It triggers a GitHub workflow to generate a pull request with the submitted content and generates a statically generated site with the accepted submissions. While it does not include authentication, it can be easily connected to a GitHub OAuth app for authentication purposes. The application can be used as a proof of concept, MVP, or for small apps where immediate feedback is not required. It can be forked and adapted to other projects, and deployment options include Netlify and GitHub pages.