React project deploy to Github Pages

React project deploy to Github pages

If you wanna deploy React project, you can deploy to Github pages.
Github provides free hosting service.

Github Pages

What is GitHub Pages?

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository. You can create and publish GitHub Pages sites online using the Jekyll Theme Chooser. Or if you prefer to work locally, you can use GitHub Desktop or the command line.

Please install this package to React app deploy to Github pages.
react-gh-pages

$ create-react-app app
$ cd app
$ npm install gh-pages --save-dev

To need edit package.json to set deploy. Let’s edit with nano editor
which is a default text editor in UNIX OS.

$ nano package.json

Github account username instead of

//…
"homepage": "http://<YOUR USER NAME>.github.io/react-test"
//…
"scripts": {
//…
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

Ctrl + x command is saved and quit.

And next, please create a new repository in Github
that is named react-test. Actually, You have to use git init
command at the first time, but this project is testing. Please set repository
URL and using deploy command.

$ git init
$ git remote add origin https://github.com/<YOUR USER NAME>/react-test.git
$ npm run deploy

If you couldn’t deploy, try to this command.

$ rm -rf node_modules
$ npm install
$ npm run deploy

Please type URL to your browser.
http://example.github.io/react-test

関連記事