Search code examples
reactjsgithub-pages

Why is my github.io react-gh-pages showing a 404?

Im using react to publish to gh pages, and its giving me a 404 despite my other one ryan-howard-hc.github.io/ReactMenu working from the same tutorial video?

https://github.com/ryan-howard-hc/ryan-howard-hc.github.io

Here is the repo, It's giving me a 404 and Ive tried everything I can think of and have compared to my other repo ReactMenu

I followed the same method to deploy that. I thought it had something to do with the fact its the homepage ryan-howard-hc.github.io but I have no idea. Please help!

enter image description here

Solution

  • You have only uploaded the source code in your GitHub repository and it will not work.

    If you want to deploy a react website to GitHub pages then follow this:

    Method 1: Manual Deployment

    1. Run this command in your terminal:
    cd /change/this/to/your/project/root/directory/path/
npm run build
    1. Then from your build folder upload all files to the GitHub repository. Only upload the content inside the build folder,

    Method 2: Direct Deployment

    1. Add the gh-pages package to your project
    npm install gh-pages --save-dev
    1. On your package.json file inside scripts add predeploy and deploy properties.
    "scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
    1. Now add a remote git repository to your project: change the username and repo-name
    git remote add origin https://github.com/{username}/{repo-name}.git
    1. Now push your react app to the GitHub repository
    npm run deploy
    1. Finally, when you want to configure the subdomain go to setting and select the branch as gh-pages and root as /

    And now if you have followed any of this 2 method your react app will be successfully deployed to the GitHub pages.