Deploying your ReactJS App to Github Pages

Why host your React portfolio app with GitHub Pages?

1. It's Free!
2. Real time updates
3. Making your code open-source, It is a great way to showcase your skills Custom-domain, if you have existing domain, you can add a CNAME file to your repository
4. It's Easy!

Note: GitHub Pages is a static service and does not support server-side scripting such as, PHP, Ruby, or Python.

Here is a new quick tutorial on how to deploy your reactJS application via Github Pages. I still prefer Heroku for dynamic web apps but here is the quick guide if you have a very simple React App and wanted to deploy it quickly to add it to your Frontend Development skills portfolio

Steps:

Note: I am using yarn as my package manager.
I already created my github repo and React project

1. Install GitHub Pages package as a dev-dependency

yarn add gh-pages 

1. Add properties needed to package.json file

"homepage": "http://{github_username}.github.io/{your-app-repo-title}"
"scripts": {
  //...
  "predeploy": "yarn run build",
  "deploy": "gh-pages -b master -d build"
}

1. Then Deploy it in your local terminal

yarn deploy

And Done! The branch that Github pages used is the gh-pages not the master. Everytime you deploy it will update the gh-pages branch.

You can now check your app at this URL format: http://{github_username}.github.io/{your-repo-title}

Comments

[Matheus de Campos]

Very simple!

[April Smith]

yes it is! I love React!