Home > Back-end >  How to deploy React App on Github Pages (only background color is seen)
How to deploy React App on Github Pages (only background color is seen)

Time:10-30

Currently am trying to deploy my React Project on Github Pages, however I am unable to do so. After publishing on gh pages, all I am getting is a screen with the correct background color, but without any of the content.

I used these 2 pages to try and figure out how I could deploy my page and they are https://www.c-sharpcorner.com/article/how-to-deploy-react-application-on-github-pages/ and https://www.youtube.com/watch?v=Q9n2mLqXFpU&ab_channel=PedroTech.

Also after doing npm run deploy I am now running into some issues when I run npm start. I am instead automatically taken to the page localhost:3000/space-tourism-website, but to get to my page it is on localhost:3000/

Source code is on github: https://github.com/farhan-navas/space-tourism-website. If any more info is needed please do let me know. Would be very thankful for any tips and help.

"name": "space-tourism-website",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://farhan-navas.github.io/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

this is how the top section package.json file looks like. Thanks once again.

CodePudding user response:

Try renaming your repository to farhan-navas.github.io

CodePudding user response:

Not really answered, but I have decided to deploy my project on vercel instead of github-pages and would recommend the same to anyone else who is trying to deploy a react project on github pages!

  • Related