Deploy CRA to GitHub Pages using GitHub Actions

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!