<p>While some hosting cloud has a limitation to create # of front-end based applications as a free, github pages does not have any limitations.</p><p>This covers tutorial on how to deploy react front-end application to github.</p><p><br></p><h4>Step1 : Create react app</h4><pre>#shellscript npx create-react-app &lt;your react app name&gt;</pre><p><br></p><h4>Step2 : Prepare dependencies</h4><p>Following code creates gh-pages git branch automatically, which is used for deployment to github later.</p><pre>#shellscript cd {your react app name} npm install gh-pages --save-dev</pre><p><br></p><h4>Step3 : Edit `package.json`</h4><p>Open `package.json` file and add homepage info and 2 more scripts;</p><pre>#shellscript vim package.json</pre><pre>//package.json file //add homepage statebelow, with pasting github link "homepage" : "https://{your github name}.github.io/{your github project for the app}" //add predeploy "scripts" : { //.... "predeploy" : "npm run build", "deploy" : "gh-pages -d build", }</pre><p><br></p><p>So my case for `package.json` is like bleow;</p><pre>//package.json example { "name": "monsters-rolodex", "version": "0.1.0", "private": true, "homepage": "https://tak113.github.io/google-translate-test", //added "dependencies": { "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.6.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "predeploy": "npm run build", //added "deploy": "gh-pages -d build" //added }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ "&gt;0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "gh-pages": "^2.2.0" //automatically added by npm install gh-pages } } </pre><p><br></p><h4>Step4 : Github Operations</h4><p>First, go to github and create a new remote repository for the react app. Copy remote repository link. Note your project name has to be matched with what you've put in package.json<br></p><p>Set created github remote repositoty connecting to local react project</p><pre>#shellscript cd {your react app name} git init git remote add origin https://{your github name}.github.io/{your github project for the app}</pre><p>Then deploy by</p><pre>#shellscript npm run deploy</pre><p>This starts with `predeploy` script in package.json then `deploy`.&nbsp;</p><p>It will take few min to reflect to the URL. Your app is now at `https://{your github name}.github.io/{your github project for the app}` which has been set in package.json.</p><p><br></p><p><span style="font-size: 14px;">You can commit your files by standard procedure at other branch like master;</span></p><pre><span style="background-color: rgb(245, 245, 245);">#shellscript git add . git commit -m 'initial commit' git push origin master </span></pre><p>Then your raw code is stored at `master` branch, while deployment code is stored at `gh-pages` branch at github.com</p>