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

mrchike

Mr Chike

Posted on September 30, 2024

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

Image description

  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…

Image description

💖 💪 🙅 🚩
mrchike
Mr Chike

Posted on September 30, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related