gitname / react-gh-pages Goto Github PK

how to deploy second time i mean updated code

I am not able to load JSON file in the browser.
Getting the error:

Failed to load /resumeData.json?_=1533629733770:1 resource: the server responded with a status of 404 ()

Please help !!!
Any help would be appreciated.
I am attaching the screenshot of the error!!

I've done according your instruction, but everything is pushed to github repo but nothing to github pages. I added "homepage":"..." to package.json, and got nothing. But my terminal said

im@im:~/Desktop/figma-app$ npm run deploy

> [email protected] predeploy /home/im/Desktop/figma-app
> npm run build


> [email protected] build /home/im/Desktop/figma-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.39 KB  build/static/js/2.a88a2725.chunk.js
  777 B     build/static/js/runtime-main.a0ad3164.js
  648 B     build/static/js/main.e84e2243.chunk.js
  556 B     build/static/css/main.d1b05096.chunk.css

The project was built assuming it is hosted at /figma/.
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:

  bit.ly/CRA-deploy


> [email protected] deploy /home/im/Desktop/figma-app
> gh-pages -d build

Username for ...
Password for ... 
Published

Whenever I reaload my react website, it throws me page not found error. What I suppose to do? But there is no issue with my other react projects that has been deployed in github.

To push new/updated code to my gthub repo, I write this code ->

1. git add .
2. git commit -m "change css"
3. git push origin master
4. npm run deploy

What is the problem?

I have a made simple keeper rep-link
everything is fine, it's just that, the page
display the readme.MD file instead of index.html in public folder.

For any new commits in local directory should they be pushed to master branch or gh-pages branch?

Hi, I create my react app using this:

create-react-app my-app --scripts-version=react-scripts-ts

When I run yarn deploy I got this error:

yarn run v1.3.2
$ npm run build

> [email protected] build /Users/khuongpham/WebFrontEnd/khuong_website
> react-scripts-ts build

Failed to load tsconfig.json: Missing baseUrl in compilerOptions
Creating an optimized production build...
Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
ts-loader: Using [email protected] and /Users/khuongpham/WebFrontEnd/khuong_website/tsconfig.json
Compiled successfully.

File sizes after gzip:

  35.45 KB  build/static/js/main.60e3476d.js
  300 B     build/static/css/main.29266132.css

The project was built assuming it is hosted at https://khuong.github.io.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

$ gh-pages -b master -d build
Cloning into 'node_modules/gh-pages/.cache/aHR0cHM6Ly9naXRodWIuY29tL2todW9uZzI5MS9raHVvbmdfd2Vic2l0ZS5naXQ'...
remote: Repository not found.
fatal: repository 'https://github.com/khuong291/khuong_website.git/' not found

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Here is my package.json look like:

{
  "name": "khuong_website",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://khuong.github.io",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.14.0"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build",
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^22.2.2",
    "@types/node": "^9.6.1",
    "@types/react": "^16.1.0",
    "@types/react-dom": "^16.0.4",
    "gh-pages": "^1.1.0",
    "typescript": "^2.8.1"
  }
}

And my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "baseUrl": ".",
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Every time I deploy my custom domain on Github for the page is reset to blank? Does anyone have a solution for that?

i am having trouble i created m firt react project but when i uploaded to github followed every steps but when visiting the url the page is blank

Hi all,
I've been going though some of the solutions that others have put out for this problem without success. I pushed it to the repository via command line.
It seems to not be communicating with anything outside of the dist folder, but if I add the files into the dist folder, I get the same response.
This is a THREE.js project, and it's both my first time working with THREE.js as well as pushing a project to a repository from the command line... So I'm sure there's something I missed along the #way.

The repository: https://github.com/SlimBloodworth/earth121621

I created my portfolio website but when I click on home or about me or skills or contact ...every time I found the error like

How I solve this problem

Hi gitname -

Troubleshooted my way through your tutorial, thanks in advance for the help. Ran into an issue in that the page that loads is simply blank and white, although it does load the <title> correctly from my index.html. any ideas?

Any way to reset the cache for each build?

When I run npm run deploy , it commits to my gh-pages branch with the commit message Updates , which is not very descriptive and I would want to customize, how can I do that?

gh-pages -d build shows failed authentication due to invalid username or password

` gh-pages -d build

fatal: TypeInitializationException encountered.
The type initializer for 'Microsoft.Alm.Cli.Program' threw an exception.
fatal: TypeInitializationException encountered.
The type initializer for 'Microsoft.Alm.Cli.Program' threw an exception.
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/Nugasnakarmi/OfficeRec.git/'

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.

Watch for the symptom described in Issue #10.

I setup as the guide suggested. I got through the compile portion and then it asked me to login. I fat fingered the login and now when I try to run again it shows:

> gh-pages -d build

fatal: A branch named 'gh-pages' already 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:

I cannot see the branch using git branch nor on github. How can I redo this?

Getting Uncaught SyntaxError: Unexpected token '<' error in console after I deployed the react app.

Url: https://anujrajak.github.io/

Followed the instructions and got README.md published

I'm using:
npm: 6.4.1
node: 10.15.1
CRA: 2.0.4
React: 16.8.3

My package.json:

"homepage": "https://simonhoyos.github.io"
"scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }

this is the result:
https://simonhoyos.github.io/

First of all, thanks for the clear instructions!

Now that we have GitHub Actions as a CI service, the next logical step after reading your instructions is to integrate this with GH Actions, so that every time I push my code to github on master, it would automatically build and deploy gh-pages

I wanted to have my root github.io page (e.g. {username}.github.io) as a react app. As you can see, I set my root github io url as the homepage in my package.json when I run gh-pages, I see "published," but my root page is still just displaying the README.md from the create-react-app command.

Thanks for your time

I have the app created with create-react-app but when I run this command it says 'command not found'.
Does this command really exists? My app is working, built and deployed and I don't have this command.

Thanks for the great instructions. Are you aware of a way to keep the source code in main with restricted access as opposed to what you suggest in step 8?

Hello. I should first say that for a side project, I used create-react-app to build a simple React app locally. I then used the instructions in this repo to push my app to GitHub pages. The instructions were very clear, and worked perfectly on the first try--no hassle at all--amazing. So thanks very much for that.

I have a question though. Can I safely change the 'default' branch in my GitHub settings (screenshot) without it affecting npm run deploy? Here is more info on that.

I did indeed carry out all your instructions, including step 8. The GitHub repo for my app can be seen here: https://github.com/cagross/react-specials As you described, the GitHub repo has is both a master branch and a gh-pages branch. Separately, I continue to develop my app locally, and periodically push my edits to GitHub pages, using npm run deploy.

In the GitHub repo, the 'default' branch seems to have been automatically set to gh-pages. I would like to change it to master (screenshot). Does npm run deploy require that the GitHub 'default' branch be set to gh-pages? Or can I safely change the GitHub 'default' branch to master without it affecting npm run deploy?

Maybe a more precise question is: to what GitHub branch does npm run deploy push edits? Does it push edits to the gh-pages branch, regardless of what I have set for the 'default' branch in my GitHub settings? Or does npm run deploy push edits to whatever branch I have set as 'default' in my GitHub settings?

I think I can change the GitHub 'default' branch without affecting npm run deploy. npm run deploy will push to whatever remote branch I have configured in my local Git repo--correct? If so, whatever I have set as 'default' branch in my GitHub settings doesn't matter. Am I on the right track there?

The reason I’d like to change the GitHub 'default' branch to master is because the master branch is the branch that actually displays the code I wrote, as well as the README file for the GitHub repo. So I'd like to share a link to this repo with collaborators/potential employers, and have my code/README file displayed by default (rather than forcing them to change the branch to master). I realize I can share a direct link to the master branch, and I'll do that as a fall back.

Thanks.

Thanks for the detailed and helpful tutorial!

Do you have insights about how to deploy an create-react-app app to an user or organization site? The homepage url would be a bit different. Instead of http://username.github.io/repo-name, the url would be just http://username.github.io?

I'm not sure if gh-pages would still be necessary because there is no more gh-pages branch...?

For some reason, once in a blue moon I won't be able to run npm run deploy because when attempting to do "gh-pages -d build" it cannot find git-upload-pack. If I give it a day or two, then come back and try to deploy it works perfectly.

Is there a fix to this? Not sure how to push my React project to github pages when it keeps giving me these errors.

Edit: 8-17-18 @ 1 PM
It seems that my old projects running React v16.4.1 upload perfectly fine. However, my most recent project is using React v16.4.2. Anyone sure if that could be the reason why it isn't working?

When I execute the npm run deploy, it works but the gh-pages -d build command returns an error::

fatal: unable to access 'https://github.com/(username)/(project).git/': error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version

My git version is up to date and I can't find any solution. Can someone helps me ?

Here´s the github pages address: https://eternaldoubter.github.io/React_Calculator/
Here´s the repo: https://github.com/EternalDoubter/React_Calculator

Everything was working before deploying to github pages, and the first deploy worked no problem. But ever since, now when running any NPM commands in the project, I'm getting this set of errors:

geekcentric => npm start
npm ERR! file /mnt/c/Users/GeekCentric/Documents/ReactJS/the_app/package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token / in JSON at position 611 while >parsing near '...": "^1.2.0"
npm ERR! JSON.parse }
npm ERR! JSON.parse }
npm ERR! JSON.parse
npm ERR! JSON.parse
npm ERR! JSON.parse // geekcentric => np...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just >JavaScript.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/geekcentric/.npm/_logs/2018-09-11T00_38_07_636Z->debug.log

The error is in my package.json file but I can't find anything that would throw the error or what's going wrong.

{
  "name": "theapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://me.github.io/theapp",
  "dependencies": {
    "axios": "^0.18.0",
    "firebase": "^5.4.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^1.2.0"
  }
}

I'm using the create-react-app and the gh-pages npm module. Any help would be very appreciated

I deployed my website and it was working fine using the GitHub URL. Once I added my custom domain the website stopped displaying and is now a blank page. When I view page source it shows the index.html file.

My website : michaelmontagnese.com

My repository : https://github.com/mmont429/michael_website/

I have not found a solution to this issue that works yet.

Github pages gave me a 404 error message after deploying. Using only lower case letters in the repository name solved the issue in my case.

https://github.com/palak-porwal/monster

My git hub repository

https://palak-porwal.github.io/monster/

My link!

Please help

Hi, I made some code changes to my master branch and pushed the same to the master branch. However my changes do not reflect in the website as the gh-pages still remains unchanged. How to make my changes reflect in gh-pages branch as well so that my website is updated

I am trying to deploy my app and am getting this error. I have tried running rm -rf node_modules/gh-pages/.cache to no avail. I also tried manually deleting node_modules/gh-pages/.cache and that did not work either.

For troubleshooting, I am on a Mac.

I have been using react app with gh pages using HashRouter.
Now I updated to Browserrouter.

Now the inital load everything is fine but reloading in and internal link returns Page not found
Some innner pages alse return page not found

suppose

site.com/about/me will show if I go there from site.com/
but on reload t shows page not found

check https://qnxdev.github.io/vjcbuild/

Hi gitname, I follow your tutorial to final step, it works:

https://github.com/khuong291/home
https://khuong291.github.io/home/

But when I change the title: "To get started, edit src/App.js and save to reload." to "This is Khuong's website" and push to master branch, it does not change. So I need to delete repo and deploy again?

Useful package, i already follow you instruction. But i got blank page

node -v
v9.7.1

npm -v
6.0.1

create-react-app --version
1.5.2

Hi,

first of all, thanks for the good work and that great project. I'm havin major troubles though, using react-router-dom v6 with gh-pages.
As soon as i start using routes, the gh-page just shows a lank screen.

For example this is the App.tsx code

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Home } from './pages/Home';
import DemonList from './pages/DemonList';

function App() {
	return (
		<div className="App">
			<BrowserRouter basename={process.env.PUBLIC_URL}>
				<Routes>
					<Route path="/" element={<Home />}></Route>
					<Route path="/demons" element={<DemonList />}></Route>
				</Routes>
			</BrowserRouter>
		</div>
	);
}

export default App;

The html source-view at https://oliverzott.github.io/react-gh-page/ is just showing

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/react-gh-page/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/react-gh-page/logo192.png" />
    <link rel="manifest" href="/react-gh-page/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/react-gh-page/static/js/main.6461c301.js"></script>
    <link href="/react-gh-page/static/css/main.073c9b0a.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

I tried a lot of suggested fixes and workarounds, but nothing worked so far.

Best regards
Olli

Hello. I've carried out the instructions in your README and was able to deploy my local app to GH pages without issue. I can also edit my app locally, and continue to push those edits to GH pages using npm run deploy, which has worked great so far--thanks for that. But how can I properly add a license file to the gh-pages in GitHub? As a test, I just added one manually, via a commit done within GitHub. After, as a test, I tried to deploy again with npm run deploy. It then displayed this in its output:

error: unable to stat just-written file LICENSE: No such file or directory
fatal: Could not reset index file to revision 'origin/gh-pages'.

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\snarl\AppData\Roaming\npm-cache\_logs\2020-02-29T14_15_14_746Z-debug.log

Any ideas on how to troubleshoot/resolve?

So, I wanted to add a react website to a seperate github repo and add a github page

I followed the tutorial and everything went well, but the last step didn't:

$ npm run deploy

...
remote: Repository not found.
fatal: repository 'https://github.com/shadow2xx/react-gh-pages.git/' not found

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.

I checked the log, but this didn't give me more valuable information... I am quite new to react, any suggestions?

Installed gh-pages as dev dependency in my react project. The below error is displayed everytime I run the command npm run deploy to deploy the app to github using gh-pages.

Error:

[email protected] deploy C:\Users\Ahmed Khan\Development Projects\Reactjs Projects\sample-react-deploy
> gh-pages -d build

events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: spawn git ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
    at onErrorNT (internal/child_process.js:415:16)
    [... lines matching original stack trace ...]
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
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\Ahmed Khan\AppData\Roaming\npm-cache\_logs\2020-06-30T11_24_22_821Z-debug.log

My package.json file:

{
  "homepage": "https://ahmedgulabkhan.github.io/sample-react-deploy",
  "name": "sample-react-deploy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

Searched for some help online, and downgraded react-scripts to version 2.1.8. But the issue is still not resolved.

I created a React app without create-react-app and I manually configured Webpack. The app is working fine but how do I deploy it on Github pages?
I tried adding the react-scripts dependency and adding the default script that CRA generates, but it is not working. Is there a specific procedure I can follow to do this?

Hello! I have no time to do a pull request with additional instruction step, but I want to notify you about it.

Probably, because initially I tried to add my react project to github pages without gh-pages and only then I found your instruction and used gh-pages as deploy command I had an extra step. So, after using the deploy command in your local project, you need to open the project settings (on the github project repository page) and manually change the source branch on the pages tab, for example from main to the gh-pages branch.

I think it would be nice to add this as note to Step 7

I have a react project as a sub folder in one repository and I have my gh-pages repo set up and working. I followed the instructions and nothing at all was published to my gh-pages repo. This is the output:

> [email protected] predeploy F:\git\Learning\React\hello
> npm run build


> [email protected] build F:\git\Learning\React\hello
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  36.83 KB  build\static\js\2.65aa1cca.chunk.js
  980 B     build\static\js\main.1deb3e49.chunk.js
  770 B     build\static\js\runtime~main.c3b45a10.js
  578 B     build\static\css\main.c6f97728.chunk.css

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

The build folder is ready to be deployed.
To publish it at https://nebosite.github.io/reacthello , run:

  npm run deploy

Find out more about deployment here:

  https://bit.ly/CRA-deploy


> [email protected] deploy F:\git\Learning\React\hello
> gh-pages -d build

Published

I had an issue where the read me was the only thing on Github pages. Add to the documentation that they have to have their index.html outside of all folders.

I followed the tutorial as verbose as possible. But eventually my app failed to deploy. So this is the log from the cmder command line.

I was able to find a solution. I'll write about it just in a minute.