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

When I deployed my React project to GitHub Pages, everything looked fine during development.

But after hosting it, I was greeted with a completely white screen.

No errors visible. Just blank.

The Confusion

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.

After all, 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.”

So instead of searching inside:

username.github.io/my-project/

It searched from:

username.github.io/

That means it was looking for:

username.github.io/assets/index.js

But my files were actually inside:

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

So 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 → https://example.com/file.js

Root-relative → /file.js

Relative → file.js or ./file.js

That day I learned that a leading slash / is not a local path.

It is root-relative.

And that small difference broke my entire deployment.