How to deploy React Portfolio|Project with Github Pages as @ 2024

Going through the years of tech it’s always interesting to see how things keep evolving. It used to be a whole lot of hassle to deploy applications but I must say it’s really awesome how Github integrated this feature to make life easy. So as a no BS guy, let’s get straight to the point.

If you’ll rather not build things from scratch, then here is an already existing portfolio inspired by the Github design. Feel free to fork and update. Below are the steps

1. Create Portfolio

npx create-react-app portfolio
cd portfolio
npm install gh-pages --save-dev

1. Head to Github account and create repo

1. Update the package.json to reflect commands.

"homepage": "https://<username>.github.io/<repository-name>"
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

1. Commit and push changes, then build & deploy.
   git remote add origin git@github.com:<username>/<repository-name>.git
git add . && git commit -m "initial commit"
git push --set-upstream origin master
npm run build
npm run deploy

2. View your live website at https://.github.io/ and in my case…