Deploy React App on GitHub Pages Automatically | by Hanie Asemi | Feb, 2022

At no charge, whatsover

Hanie Asemi
Image by author

We all have static websites such as wikis, documentation sites, or resumes, and what we need is a free place to host them. To this end, GitHub Pages appears to be an ideal option, because It provides free hosting for static sites. If you notice I’m just talking about hosting static websites which means your websites should include HTML, JS, or CSS files. Static websites are limited by the fact that they can’t take advantage of a server changing the content for each request. For example, if you want to use databases or user authentication you should choose another host. After submitting your page, you will receive a subdomain URL such as username.github.io/repository But the URL can be changed to anything you like.

In this blog, you’re going to be familiar with how to deploy a react project on GitHub Pages automatically.

Create a new react app with npx create-react-app helloworld command and then install the jest package with npm install jest command for running tests. Then make build-deploy.yml under .github/workflows in your project. Your file should contain the following code, respectively.

With the name syntax, you’re defining a name for your workflow and GitHub displays this name on your repository’s actions page. As you can see I’ve named my workflow Build & deploy.

In the next line of code, I define the events that cause the workflow to run automatically. This workflow will be run when you push to the main branch or merge a pull request to the main branch.

Two jobs will run in this workflow first the build job and then the deploy job. First, let’s explain what is happening in the build job:

The build job will run in the ubuntu environment which is specified by the runs-oncommand.

A job contains a sequence of tasks called steps. Steps can run commands, run setup tasks, or run an action in your repository, a public repository, or an action published at a Docker registry. Not all steps run actions, but all actions run as a step. The actions/checkout@v2 used to check out a repository so a workflow can access it. By using the actions/setup-node@v2 action you can install node.js. In the 3 next steps, some commands will run to install npm packages, build the app, and run tests. The actions/upload-artifact@v2 action will create an artifact of the production file in the ./build path.

In the next section, I’ll explain the Deploy job.

With theneeds:build syntax I’m defining that deploy jobs will run after the build job run successfully. If the build job fails the deploy jobs will be skipped.

The deploy job will run in the ubuntu environment which is specified by the runs-oncommand.

if: github.ref == ‘refs/heads/main’ is a conditional statement that will validate the current branch is main.

With the actions/download-artifact@v2 action the artifact that we uploaded in the build job will be downloaded and the last line will deploy ./build directory to the remote gh-pages branch using the peaceiris/actions-gh-pages@v3 action.

After applying this change to your project, commit these changes and push them to the main branch of the repository. If you scroll to the Action tab in the repository page you can see that your action is running and after if the process finishes successfully a new branch with gh-pages name will be created.

Image by author

For creating a page for your website go to the setting tab in the navbar, select pages from the left sidebar, from the source section select the gh-pages branch and the click on the save button, your subdomain will appear after a second.

Image by author

Click on the URL and here we are. you deploy a react app on GitHub pages successfully. Don’t worry if you see a 404 error it can take a few minutes to host the website. Clear your cache and refresh the page after a few minutes.

I hope this blog will be useful and you can use it for deploying static websites on GitHub Pages at no charge.

Leave a Comment