Jamstack Cfp screenshot

Jamstack Cfp

Author Avatar Theme by Codegram
Updated: 12 May 2020
21 Stars

Run your call for papers using JAMStack + GitHub Actions

Categories

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:

  1. Fork the repository and adapt it to your project.
  2. Add a GH_TOKEN_PERSONAL secret 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.
  3. Update the hardcoded owner and name values in src/pages/Pending.vue and functions/submit.js to match your GitHub username and repository name.
  4. To run the project locally, create an .env file containing the GH_TOKEN_PERSONAL variable. Then run npm run develop.
  5. To deploy to Netlify, add the GH_TOKEN_PERSONAL environment 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.
  6. 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.