GitHub Pages or gh-pages is one of the easiest ways to deploy static sites. But, did you know that you can also easily deploy a simple React app on GitHub Pages? Without any further ado, let’s get started.
First, install gh-pages on the React app by typing:
npm install gh-pages --save-dev
Next, edit package.json by adding:
"homepage": "https://yourdomain.github.io/your-react-app"
at the top, just after { and add a couple of lines inside “scripts” object:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Now create a new repository on GitHub. In your React app, initialize git by typing git init and add everything by typing git add .. After that, commit the changes. Next, type the following commands to sync to the remote repository and push the code.
git branch -M main
git remote add origin https://github.com/Your-Username/your-react-app.git
git push -u origin main
Finally, run
npm run deploy
It’ll prompt for username and authentication; if everything’s done right, at the end the Published message is displayed.
Now go access your React app at https://yourdomain.github.io/your-react-app