Github pages shows blank page

Question

My repo: https://github.com/something/personal_website My website: https://website.com/

I can not figure out why my GitHub pages can’t load any of my source files. The files I want to load are in the src folder. Everything works as it should on localhost. It only loads index.html which is a white blank screen, I don't have anything coded in this file. I’ve seen a few similar posts about this issue but have not found any common discrepancies.

I have installed through npm the gh-pages module and done “npm run deploy”; this created my gh-pages branch. I’ve updated my package.json with the appropriate information. As far as I can tell I have no capital letters in my repository.

I hosted another website previously on Github Pages at this domain with no issues. It appears that Github pages and the process has changed since then and I can’t get it to work.

Okinawa

Answer 1

The problem is that your homepage is trying to load assets from https://something.com/personal_website/static/js/main.3edbf089.chunk.js rather than https://something.com/static/js/main.3edbf089.chunk.js.

Remove the personal_website extension from homepage in package.json and the routes should work properly.

Therefore your new package.json should look like:

{
  "homepage" : "https://something.github.io/",
  "name": "my-website",
  "version": "0.1.0",
  ...

Cardinale

It worked! Thank you so much, you have no idea how much this had been bothering me. – Okinawa

it didn't work for me – Broadcasting

worked for me! now, the question is why are so many tutorials (including GitHub's) wrong then? – Vacillatory

Answer 2

1. Make sure that your package.json contains

   "homepage": "https://username.github.io/appname"

2. If you are using BrowserRouter, set the basename:

   <BrowserRouter basename={process.env.PUBLIC_URL}>

3. Your .env file cannot contain something like PUBLIC_URL=/ when you do a deploy (it was the problem in my case)

Hark

Answer 3

Adding "homepage": "https://myusername.github.io/my-app", to your Package.JSON might solve your problem.

remember replace your github user name and your app name.

Interpellant

Answer 4

I've been stuck to this for two days. And finally, I solved it.

It is working to local but after deployment it is opening the blank page.

Problem is we changed the homepage path. So We need to update paths which are in our code.

If I give an example with my case, I added homepage into the "package.json" file something like:

"homepage": "https://[YourGitHubAccountName].github.io/[YourProjectName]"

So after adding this, app doesn't work because The paths which are inside of my code need to be change.

For example:

'/' paths should become '/[YourProjectName]' or

'/test' should become '/[YourProjectName]/test'

Inferior

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Ayrshire

Answer 5

Most of the Answers, solves the problem for create-react-app. when using vite, you have to set the correct base in vite.config.js as below. Also note in vite, you don't need the "homepage" key in "package.json" file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: "/<REPO_NAME>/",
})

for more info, please refrence gh-pages configuration for vite

Roland