How to host React portfolio website on github pages?

This tutorial is only for those people who are already developed a react app on local machine(host:3000 port) and now want to deploy/publish their app to github pages so others can view their website.

Step 1: You must have a github account. If you don’t have one create one and click on “create new repository”. You can name it whatever you like.

Step 2:Open up your terminal and use following command to get into your project directory :

a. cd {name of your project directory}

b. Run the following :

1

$ cd {your app name}

2

$ git remote add origin https://github.com/username/{your app name}.git

3

$ git push origin master

3. Next we need to config GH pages:

Run the following command inside your app’s root directory to install the gh-pages package as a dev-dependency :

$ npm install gh-pages --save-dev

Open the package.json file in your React application and add the following properties:

1. The homepage property with its value being the string http://{username}.github.io/{repo-name} , where username is your GitHub username and {repo-name} is the name of your app’s Github repository.
2. In the existing scripts property, we need to add the predeploy and deploy script fields:

"scripts": {
"predeploy":"npm run build",
"deploy":"gh-pages -d build"
}

4. Now we are ready to deploy app:

Run the following command to deploy your app:

npm run deploy

Your website is published