React Github pages says published but I keep getting a 404

Question

I'm trying to follow the steps on this link to deploy a React app to Github pages. I've followed the steps exactly and my package.json looks like this:

{
    "homepage": "https://sohaib94.github.io/cv",
    "name": "web",
    "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",
        "react-spring": "^8.0.27"
    },
    "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"
    }
}

and I deploy the app with npm run deploy. This correctly creates a branch gh-pages.

My repo has the correct settings (Settings says Your site is ready to be published at http://sohaib94.github.io/cv/. and the sources underneath says Your GitHub Pages site is currently being built from the gh-pages branch.) So I assume I've done everything correctly but I'm still getting a 404 for my page (http://sohaib94.github.io/cv/).

Is there anything I could be doing incorrectly here?

Thanks

Go to `...github.io/cv/index.html` and see if that loads properly, I’ve had this issue before with the same thing. — Rodentman87, Jun 22 '20 at 00:32

score 1 · Answer 1 · answered Jun 22 '20 at 05:59

1

Make sure that for your GitHub repository setting, you have selected the gh-pages branch

In term of publication sources, project sites can also be published from the master branch or a /docs folder on the master branch.

So it is important to specify the source.

answered Jun 22 '20 at 05:59

VonC

1,262,500
529
4,410
5,250

Hi @VonC I have set gh-pages as the branch for publication sources and checked that this branch exists and has an index.html file but still no luck – sohaib Jun 22 '20 at 20:48
@sohaib Very strange. I do see https://github.com/sohaib94/cv/tree/gh-pages indeed. There must be a setting missing or not selected (beside the publication source) in the repository setting page. – VonC Jun 22 '20 at 21:44
Hey @VonC, thanks for your help mate. Realised I was making a network call and that this wasn't allowed so removing that and trying again has it working - thanks for your patience! – sohaib Jun 22 '20 at 21:51

score 1 · Accepted Answer · answered Jun 22 '20 at 21:50

So found the answer to my question - I was making a network call to load some images and didn't realise that this wasn't allowed with github pages.

Downloaded the images and put into my asset folder and removed the network call and, hey presto, everything is hunky dory.

Thanks all who tried to help out

React Github pages says published but I keep getting a 404

2 Answers2