Deploying an existing React app to GitHub Pages

I recently just deployed my portfolio on GitHub pages and I would like to share more information about how to deploy GitHub Pages on an existing React app.

1. Go to Github and login in your account.
2. Click on New Repository in the “+ section” as follows:

3. Add name for repository and click Create Repository on Create a new repository page as follows:

4. You could easily copy the code in the section “…or create a new repository on the command line” and paste in your terminal.

5. You can use npm or yarn to install gh-pages

npm

npm install gh-pages --save-dev
npm i gh-pages

yarn

yarn add gh-pages

6. Go to the package.json file and add properties as follows:

you should type the below line (“homepage”) and replace the sections labeled {your-github-username} and {repository-name}

"homepage": "http://{your-github-username}.github.io/{repository-name}"

example for github pages

7. Then go to the “scripts” section and add scripts as follows:

npm

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

yarn

"scripts": {
//...,
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
}

8. After the scripts have been added, go back to the terminal and run “yarn deploy” or you could run “npm run deploy”. In my case, I installed yarn so I used the yarn script. When yarn finishes deploying, you will see following messages:

gh-pages published

9. You need to add, commit, and push files to github (check below script). Once you have pushed files on github, you should see “gh-pages” branch in the repository.

git add .
git commit -m "Adding files to github for deploying"
git push origin master 

10. Then go to the settings and “GitHub Pages” section which should show “source Branch: gh-pages” and link to the website.

This should finalize the deployment of GitHub Pages. Thank you for reading my blog and I hope it was helpful.

Resources

1. gh-pages: yarn
2. gh-pages: npm