How to deploy a static React app on GitHub Pages and Setup GitHub Actions to automate the build process

Photo by Yancy Min on Unsplash

After some sleepless nights, you have finally finished building your static site and now it’s time to show the world of your feat. This article will be a short tutorial on how to deploy a static React webpage using GitHub Pages, and we will also be using GitHub actions to automate the build process.

What is GitHub Pages?

GitHub Pages is a handy service that can be used for hosting static websites, whether it is a personal project, a portfolio, a landing page for your organization, or even documentation — straight from a repository. It turns a repository into a live website easily and it is completely free.

First Steps

First step is to create a remote repository in GitHub. For this tutorial, let’s name it gitpage.

New Git repository called gitpage

Let us then create our React app. For this, we will use create-react-app. We will also be calling the app gitpage. After npm finishes creating our app, let us head into the directory and run npm start to see our project.

npx create-react-app gitpage
// wait for create-react-app to finish...
cd gitpage
npm start

Our browser should automatically open and we can now see our React app hosted at port 3000. Awesome!

Pushing to GitHub and setting up

Before pushing to GitHub, let’s make one small important change. Inside our gitpage directory, go to package.json and add the following line:

“homepage”: “https://{username}.github.io/gitpage/",

Now it’s time to push our brand new React app to our remote repository ie. GitHub. Doing so is very easy. Run the following commands at the terminal:

git remote add origin git@github.com:{username}/gitpage.git
git push -u origin master

Let us also create a new branch, and push it to the remote as well. We’ll call this new branch gh-pages.

git checkout -b gh-pages
git push -u origin gh-pages

Pay a visit to the git repo at https://github.com/{username}/gitpage. You should now see some files in there. You can also notice that we have 2 branches: the master and gh-pages. The gh-pages branch will be the one where we will put our built code. We’re getting close!

Now go to the Settings tab, under Options, scroll down to the GitHub Pages section and under it you should see something like this:

Make sure that the Branch is selected as gh-pages and for the folder, root. If you try clicking the link https://{username}/github.io/gitpage/ right now, you would see a “Getting Started with Create React App” page. Why is that? Where is our site?

The one we are currently seeing right now is the contents of our README.md file which is located at the root directory. That is because GitHub Pages is built at the root folder of our gh-pages branch, which currently contains our initial code in the /src directory, which we haven’t built yet. So let’s get into it.

Setting up GitHub Actions to build and deploy on new push

We will now use GitHub Actions to basically automate building our github page for us. For this, we will use Deploy to GitHub Pages. This action will be triggered everytime we make a push to the master branch. Once again, go to the repository and click the Actions tab. Click on set up a workflow yourself and copy and paste this block of code.

What this script essentially does is it runs everytime a push is made to the master branch. GitHub will perform the commands npm install and npm run build for us, which will produce a build folder in the project directory. This build folder will then be deployed to gh-pages branch, with the help of the Deploy to GitHub Pages Action.

Let us go back to our terminal, and pull these changes to our local copy.

git checkout master
git pull

Testing out

Let us go ahead and edit our App.js file. Let’s make a small change by replacing the paragraph element with:

<p>
Hello GitHub Pages!
</p>

Save, then add, commit and push the changes to master.

git add .
git commit -m "Changed to Hello GitHub Pages!"
git push origin master

Now go back to our GitHub repository and pay the Actions tab a visit once again. Wait for a few minutes and you will see in the workflow runs area something like this:

That is our GitHub Actions script doing the work! It magically made a production ready version — the build version for us and pushed it to the gh-pages branch. If you go check the gh-pages branch, you should now see a bunch of new files.

Now pay our site a visit and you should see our React App finally deployed!

Serialize Yourself. Full-stack web developer with a focus in ReactJS, Node, Mongo, Redux and GraphQL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store