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.