Why My React App Showed a White Screen After Deploying to GitHub Pages

Source: Dev.to

The Confusion

When I deployed my React project to GitHub Pages, everything looked fine during development.
After hosting it, I was greeted with a completely white screen—no errors visible, just blank.

I checked the browser console and noticed that my JavaScript and CSS files were not loading. The URLs looked like this:

/assets/index.js
/assets/index.css

At first I thought these were normal local paths. In my simple HTML projects I use:

assets/index.js

and they work perfectly even when hosted. So why was this failing?

What I Discovered

The issue was the leading slash /. A path starting with / tells the browser:

“Start searching from the root of the domain.”

Instead of searching inside:

username.github.io/my-project/

it searched from:

username.github.io/

Thus it tried to load:

username.github.io/assets/index.js

but the files were actually located at:

username.github.io/my-project/assets/index.js

The files were never found, resulting in a white screen.

Why It Worked Locally

In my local HTML projects I use:

assets/index.js

This is a relative path. It tells the browser:

“Start searching from the current folder.”

That’s why it works both locally and when deployed.

The Lesson

There are three types of paths:

• Absolute URL →
• Root‑relative → /file.js
• Relative → file.js or ./file.js

A leading slash / is not a local path; it is root‑relative. That small difference broke my entire deployment.