At no charge, whatsover
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
.github/workflows in your project. Your file should contain the following code, respectively.
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
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
In the next section, I’ll explain the Deploy job.
needs: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
if: github.ref == ‘refs/heads/main’ is a conditional statement that will validate the current branch is
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
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.
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.
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.