Search code examples
reactjsgithub-pages

React application for github pages

I have next github repo with my react project: https://github.com/AlexeyVolosnikov/livedune-test

And I tried to place it in github pages with next steps:

  1. Created branch gh-pages
  2. in package.json I added "homepage" : "https://AlexeyVolosnikov.github.io/livedune-test" and "predeploy": "npm run build", "deploy": "gh-pages -d build"
  3. npm run deploy

But npm run deploy raises an error:

C:\Users\Horseman.mini\PhpstormProjects\livedune-test>npm run deploy

> [email protected] predeploy C:\Users\Horseman.mini\PhpstormProjects\livedune-test
> npm run build


> [email protected] build C:\Users\Horseman.mini\PhpstormProjects\livedune-test
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

src\forms\AuthForm\AuthForm.js
  Line 1:16:  'Component' is defined but never used  no-unused-vars

src\forms\RegForm\RegForm.js
  Line 1:16:   'Component' is defined but never used       no-unused-vars
  Line 13:8:   'handleSubmit' is defined but never used    no-unused-vars
  Line 33:13:  'error' is assigned a value but never used  no-unused-vars

src\pages\ForgotPassword\ForgotPassword.js
  Line 1:16:  'Component' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  74.63 KB  build\static\js\2.5b24fd1e.chunk.js
  5.77 KB   build\static\js\main.796bedc2.chunk.js
  1.56 KB   build\static\css\main.38c57f32.chunk.css
  785 B     build\static\js\runtime-main.3b88d740.js

The project was built assuming it is hosted at /livedune-test/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment


> [email protected] deploy C:\Users\Horseman.mini\PhpstormProjects\livedune-test
> gh-pages -d build

git-upload-pack '.': git-upload-pack: command not found
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Horseman.mini\AppData\Roaming\npm-cache\_logs\2021-02-07T16_20_21_683Z-debug.log

I tried to do it using this article but got nothing in result. I just tried to post it 1 hour and can do nothing with it and if anyone could help I'd be very grateful :)

UPDATE 1 I did deploy via git bash successfully, thanks to this answer, but it still shows me an empty white page, what is wrong?

Solution

  • I think it will help somebody in the future. How to post your react site to github pages:

    1. add homepage" : "https://<username>.github.io/<project-name>" in your package.json and "predeploy": "npm run build", "deploy": "gh-pages -d build" in scripts dict. Where your github username and is your project name.
    2. create branch gh-pages and go in git bash terminal (cmd in windows may cause errors as in my question) and write: npm run deploy
    3. go to repo branch settings and checkw whether in github-pages block gh-pages branch is selected.
    4. Wait 1 minute, refresh page and go to the link in the green box.

    My second error about blank page was because I needed to change exact path in BrowserRouter in App.js, it was "/", but needs to be "/project-name"