GitHub Pages shows a blank page (console shows Firebase error)

[melosshabi]

I set up my package.json correctly before deploying but github still shows a blank page.

• Repo link: https://github.com/melosshabi/blog-website
• Github Pages Link: https://melosshabi.github.io/blog-website/

Here's how my package.json is set up:

{
  "homepage": "http://melosshabi.github.io/blog-website",
  "name": "blog-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "dotenv": "^16.0.3",
    "firebase": "^9.15.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2",
    "react-scripts": "^4.0.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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": "^4.0.0",
    "react-error-overlay": "^6.0.9"
  }
}

[gitname]

Hi @melosshabi, thanks for including links to the repo and deployed React app in the issue description.

I visited the link in your post and checked the JavaScript console of my web browser. It showed an uncaught error related to Firebase. Here's a screenshot:

I recommend you follow the instructions in this repository's README.md file as written, confirm you can deploy a React app to GitHub Pages and it is not blank when you visit it, and then add Firebase. That way, you can establish a "working" React app as a baseline, which you can refer to when something additional seems to have "broken" it.

[gitname]

I also noticed the homepage URL in your package.json is using http whereas the GitHub Pages site is hosted using https. I recommend you update the homepage URL to use https. Off the top of my head, I don't remember the implications of them being different, but it is one more thing that differs from this repo.