Setting up Github Actions for a React App on Github Pages
In this tutorial, we deploy our changes on master to production (your domain) on each push. The idea: if you are hosting a React GH-Pages app on Github, then you no longer need to manually deploy.
This lesson goes along with Host a React App for Free using Github Pages.
Like the Host a React App for Free using Github Pages, our starting point will be this code repository. I would recommend pulling from the source (and not my fork). Please star my fork, so I know people are using it!
Create a new project on Github and upload the source code. Run the following commands:
This would be for local development. You can run:
This would be used to deploy your code to Github Pages.
If you have a custom domain, you'll have to update the
package.json to copy the CNAME file to the build. Update your
package.json to match:
If you run:
It should ship your project as expected.
Creating the Workflow
The plan: push to master, run deploy, update custom domain.
From your project folder, start by creating a workflow for master with:
The contents will be the following:
The last step is an echo on purpose. The first step is to confirm we have setup the Node environment correctly.
The only catch, it deployed for Node 8, 10, and 12. I run on 10. For now, I'll make it only run on 10.
It failed for this reason. What happen? It doesn't have permission on my private repo via HTTPS. We need to provide access using Personal Access Tokens. This is only for private repositories and the access token should remain private. If you commit an access token to a remote branch, you need to rotate it.
Open Settings from the dropdown.
Developer Settings on the left side. Click
Generate New Token.
You will need permission on the repository.
We will now update our workflow to be as follows:
The changes to this workflow. First, it only runs in Node version 10. You can run and test it in more but that's your call. Second, we have to set up authentication to run
git checkout during the
gh-pages deploy steps. If you look at the gh-pages docs, we can set the authentication within the URL. Github forces identification and that's why we add the config settings. The last step is to simply run the deploy.