This post is a step-by-step guide to deploy a CRA (create-react-app) on GitHub Pages with GitHub Actions.
I hope you are trying everything you can to stay safe and healthy in this global pandemic. I wish you a good day.
Spin up a react application
The first thing we need is a React application of course. We will use create-react-app
to build one.
Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application to React.
To save you some time, I have published a create-react-app
repository on GitHub. It has routing
and a basic component
setup already.
Note: Make sure you wrap the top-level component with HashRouter
instead of the normal BrowserRouter
. GitHub Pages
does not work well with BrowserRouter
.
Deploy to GitHub Pages
Before using GitHub Actions
to deploy our app, let's first deploy it manually. We will use the gh-pages
package, which does all the heavy lifting for us.
yarn add gh-pages
It's time to configure the package.json
file.
{
"name": "cra-gpages-actions",
"version": "0.1.0",
"private": true,
"homepage": "/cra-gpages-actions-starting",
/* Rest of config */
"scripts": {
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
/* Rest of config */
}
We have added predeploy
, deploy
scripts and homepage
to our package.json
file.
Note: Make sure you put the correct repository name for homepage
.
Looking good. It's time to deploy our application on GitHub Pages.
npm run deploy
You have now successfully deployed the production build of your react application on GitHub pages. To view it, simply go the settings
tab of your repository and scroll down until you find the link.
So, from now on you can deploy the latest changes on your react application to GitHub pages with just npm run deploy
.
Here comes GitHub Actions
, with this you can just push the changes to your master branch and it will automatically create a production build and deploy it to GitHub pages.
Add GitHub Actions to your workflow
GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.
The above quote is pulled straight from their homepage :)
Since we already have configured our project to work with GitHub
pages, setting Actions
is a walk in the park.
From your project folder, start by creating a new directory to hold the .yml
file. This file will hold the configuration for our GitHub Actions
. You have to create this file using this path.
mkdir .github/workflows/
cd .github/workflows
touch deploy.yml
Add this configuration code to deploy.yml
file.
name: Deployment
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install Packages
run: npm install
- name: Build page
run: npm run build
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./build
To explain this configuration simply, on each and every push to the master branch, GitHub Actions
will performs these set of tasks.
If you look closely, you will notice that we are using a deploy_key
variable. If you have already enabled ssh
for your GitHub
account, you can use that public/private key pair. Else you will need to create a new one.
You can create a public/private key like this.
cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages-actions -N ""
Don't forget to replace user.email
with your e-mail address. After generating the keys, it's time to add them to our repository. Go to the settings
tab of your repository. Select deploy keys
from the sidebar.
You need to insert the public key you have generated into the text-area. Insert Public key of ACTIONS_DEPLOY_KEY
for the title input field. Check Allow write access
and click on the Add key
button.
To view the public key, you can run
cat ~/.ssh/gh-pages-actions.pub
Next, up go to the secrets
tab and add a new secret key. This is the private ssh key that you generated. You can view it like this. In the name field, add ACTIONS_DEPLOY_KEY
. It's important.
cat ~/.ssh/gh-pages-actions
That is it. We have integrated GitHub Actions
into your workflow. To test it, make some changes in your components and push it to master. To see it live, go to the GitHub Actions tab in your project repository. It will look like this.
Congratulations! 🎉
If you manage to reach this far, then I hope you have successfully integrated the GitHub Actions into your workflow. If you run into any trouble, shoot a comment below.
Here is a link to my repository on GitHub.
Thank you!
Top comments (0)