This is an example call for papers application, made to showcase how to make use of GitHub Actions to add user generated content to your JAMStack static site! It's built with Gridsome but the same approach can be done with Gatsby or any other static generator.
When a user submits the from, a serverless function triggers a GitHub workflow that generates a pull request that adds a json file to the repository. Once this PR is merged, Gridsome generates the site statically listing all the accepted submissions. Connecting the GitHub's GraphQL API to Gridsome, it also generates the pending submissions list from the open PRs. The result is a 100% static site that is able to handle user generated content!
To make it easier to test and play with, I have not added any authentication method, but you can easily connect the app with a GitHub OAuth app or similar to prevent abuse and be able to communicate with users. Just take into consideration not to store any sensitive information if your repository is public (I'm not sure if storing it in a private repository has any legal issues).
Obviously, this approach has some limitations. The submission process can take a few minutes, so if you need immediate feedback it's not a good option. Same if the amount of submissions you need to handle in a short period of time is super high. As a rule of thumb, this is a good usecase for a proof of concept, MVP or small app.
Feel free to fork this repository and adapt it to your project. If you do, I'd love to hear about it! Open an issue or reach me on twitter.
You need to 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. It's going to be used to run GitHub Action workflows, connect with GitHub's GraphQL API and to be able to trigger a repository dispatch event to your repository.
You will need to update the hardcoded owner and name values in src/pages/Pending.vue and functions/submit.js to match your GitHub's uername and repository name.
Create an .env file containing the GH_TOKEN_PERSONAL variable, then run:
npm run develop
Deploying to Netlify is the easiest option, as we need a serverless function.
Add the GH_TOKEN_PERSONAL environment variable in your project settings.
You will also need to configure a hook if you want your page to be rebuilt when a new submission PR is opened. Create a Build hook in your settings. Copy the url, and go to your GitHub repository settings: https://github.com/your-username/your-repo/settings/hooks. Add a new webook, paste the URL and select Let me select individual events., then choose Pull requests.
Ready to go! 🚀
You can choose to deploy to GitHub pages too. The front-end deployment workflow is ready, including the trigger to rebuild the page after a PR is open, but you should handle yourself the deployment of the serverless function to AWS or similar.
If you are not serving the project from the root of your domain (usually the case when using GitHub pages, when deploying to https://your-username.github.io/your-repo), you should also a BASE_PATH variable with the correct path (/your-repo) to your repository's secrets in order to load the assets correctly.