DEV Community

Mr Chike
Mr Chike

Posted on

2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more