Blank page when deploying react site to github pages with custom domain name

[oDragon]

Select Topic Area

Question

Body

Hello.

I'm trying to deploy this repo: https://github.com/oDragon/developer-portfolio to github pages with the custom domain name: chenlarry.com.

Here are my DNS configurations:

And here are the settings for my github pages:

If you visit chenlarry.com (or alternatively, https://odragon.github.io/developer-portfolio/), you'll find a blank page.

I know that this question has been asked multiple times, but none of the answers have fixed my issue. I've tried changing the "homepage" attribute in my package.json file to various links, none of which worked (weirdly, my package.json file did not contain a "homepage" attribute originally). I've also created a CNAME file with the text "chenlarry.com" in it.

Any help is appreciated.

[linuxlawson]

In your index.html you have this link:
<script type="module" src="/src/index.jsx"></script>

I think you need a . in front of the slash. So changing it to:
<script type="module" src="./src/index.jsx"></script>

Might help, it's worth a try.

[jge162]

Lawson is correct, since your @oDragon index.html is not correctly pointing to the root file. it is loading blank which makes sense. I looked at my github.io test file and it does indeed have a dot . for root when pointing to resource in root. ./resources versus /resources

[oDragon]

I tried this and nothing changed.

When I inspected element at https://chenlarry.com, I noticed that there is only a blank css file in my assets folder:

Also, the reference to the jsx file is missing from index.html:

Could this be an issue with how my dist folder was created? The dist folder in my github seems to contain everything necessary for the site to render correctly, but it seems like the files don't get transferred over correctly to the actual website. I forgot to mention this in the original post, but the website worked perfectly prior to adding the custom domain name.

[linuxlawson]

Just took another look at this. I see you have got it up and running now. Awesome! 👍🏻

[oDragon]

Yup, thanks for your help! For future readers, I made lawson's suggested change and also tweaked a line in my vite.config.js file.

Originally, it was:
base: '/developer-portfolio/'

I changed it to:
base: '/'

[General-Monish]

We built the site and deployed it to GitHub pages via gh-pages npm package, but our build folder's index.html file is completely blank, like there are contents in the file but the root element is empty. Thus, I too receive a blank page. Can you help? with it and what's the refference to jsx file you are talking about. I have a feeling that this reference thing is causing our problem

[General-Monish]

We have a script tag in the index.html which is reffering to index.js. still it's not working

[oDragon]

My problem started when I added a custom domain name, but my site worked fine with the normal github.io URL. I'm sorry but I don't know how to help. I would suggest starting your own discussion so that others can help with your problem.

[sonunigambar]

I hv react js project. But for normal GitHub url my page is working. But after add custom domain it is not working. Showing blank page

[oDragon]

Have you tried the changes mentioned in the solution above? If you have and it's still not working, I suggest making sure that your file paths are relative and not absolute (ie. make sure you use the "." in your file paths).

[sonunigambar]

I did some workaround on it.

1. npm run eject
2. create a .env file on root directory
   PUBLIC_URL=.
3. npm run deploy
   Then it worked.
   Thanks @oDragon

[manjeerasuggula]

https://github.com/manjeerasuggula/my-new-website

i am also getting the blank page

[oDragon]

This discussion is concerned with a blank page after deploying with a custom domain name. Our websites worked without the custom domain name before we encountered the issue. Therefore, I'm unsure if you are having the same problem. The problem we had was that we were using absolute file paths instead of relative file paths. Once we switched to relative file paths, our websites rendered properly. I'm not sure if this will fix your issue but you can give it a try.

[zachmshort]

Hey I seem to be having a similar issue. But I dont have a vite.config.js, is this necessary?

[oDragon]

Hi Zach,

Opening the console at https://www.zacharyshort.com/, I see the following message:

I looked on Google and found this stack overflow article: https://stackoverflow.com/questions/73749664/github-pages-link-empty-and-error-failed-to-load-module-script.

It seems like your React project isn't being built when you deploy. If you check my repo: https://github.com/oDragon/developer-portfolio, I have a .github/workflows folder. Inside the folder is a yml file that runs a script when I deploy. I can't remember where I got this script but I think you should try adding the folder I have to your project. That way, your project should build when you deploy.

I hope this fixes your issue. Please let me know!

[zachmshort]

Hey I dont know how you got that website, but that was part of the issue, I had the domain and hosting on GoDaddy and switched over to CloudFlare and Vercel respectively. That site didnt really matter, just a proect for a class, but thankyou so much for the insight! It was ultimately a DNS issue.