Deployed React website showing blank page

[mmont429]

I deployed my website and it was working fine using the GitHub URL. Once I added my custom domain the website stopped displaying and is now a blank page. When I view page source it shows the index.html file.

My website : michaelmontagnese.com

My repository : https://github.com/mmont429/michael_website/

I have not found a solution to this issue that works yet.

[TommieOlislagers]

You will most likely have gotten the wrong url in the homepage variable of your package.json.

[fidelak]

I had the same issue and found the solution on Stack Overflow (credit to Nigh7Sh4de).

If you are going to use a custom domain, you need to remove the repository name from the homepage:

"homepage": "http://gitname.github.io"

Note that this will no longer work while using the GitHub URL.

I would add this to the README, but I have no idea how to do that

[birthdaycorp]

I had the same issue and found the solution on Stack Overflow (credit to Nigh7Sh4de).

If you are going to use a custom domain, you need to remove the repository name from the homepage:

"homepage": "http://gitname.github.io"

Note that this will no longer work while using the GitHub URL.

I would add this to the README, but I have no idea how to do that

YES. This and also make sure to set the source to the gh-pages remote branch that was created when you ran npm run deploy

[Apsakash1]

I had the same issue and found the solution on Stack Overflow (credit to Nigh7Sh4de).

If you are going to use a custom domain, you need to remove the repository name from the homepage:

"homepage": "http://gitname.github.io"

Note that this will no longer work while using the GitHub URL.

I would add this to the README, but I have no idea how to do that

This works, Either its a bug which needs to be fixed or the documentation needs to be updated to skip updating homepage parameter for custom domain users.

[spimentel1201]

I tested different ways to deploy to gh pages and any works fine

[gitname]

Hi everyone, sorry about the delay. I currently have a React app hosted by GitHub Pages at a custom domain and I used (at least roughly...) the technique in this tutorial to deploy it (both the initial deployment and subsequent updates). I'll look into this issue in the second half of this coming week.

[olexiyc]

Hi, I have the same issue with my webpage https://github.com/olexiyc/sasa-petricic , I think I did everything right but it is blank https://olexiyc.github.io/sasa-petricic/ Can someone help me out? :D

[gitname]

Hi @olexiyc,

I looked at the source code of the web page you linked to and didn't see any React code. It looks like a plain HTML/CSS site to me. This repository is about deploying a React app; and this specific Issue is about doing so with a custom domain.

Anyway, the web page does seem to me to be deployed correctly. I think the reason it's blank is that the <section> in the HTML code has a height of 0px. I used the browser's DevTools to increase its height (shown below) and I was able to see its background.

Since the site isn't a React app, please refrain from posting about it in this Issue. I don't want the people who are subscribed to this Issue to be notified about unrelated stuff.

I do have a suggestion for you, though. While you are experimenting with deployment, I recommend adding something permanently visible to the web page (e.g. some black text; i.e. <p>Hello</p>). You can then use that to determine whether the page is loading or not. Alternatively, you could have the page print something to the JavaScript console; e.g. console.log("The page has loaded.");. Once you have gotten used to the deployment process, you can remove that text/message.

[JosephVang099]

Hello Everyone!

I having the name issues. I asked all my peers and we can't figure it out. Was wondering if anyone of you can help me.

Here is my repo: https://github.com/JosephVang099/e-com-test.git

Thanks!!

[sparklezjas]

I'm having the same issue: https://sparklezjas.github.io/hookform/ Can anyone tell me what I'm doing wrong?! I went step by step through the GH tutorial.

[gitname]

Hello Everyone!

I having the name issues. I asked all my peers and we can't figure it out. Was wondering if anyone of you can help me.

Here is my repo: https://github.com/JosephVang099/e-com-test.git

Thanks!!

Hi @JosephVang099 , I took a quick look at your repo and noticed your package.json file lacks a homepage property (see step 4 of the tutorial in this repository). That is the first thing that jumped out at me.

I recommend creating a new repository (you can delete it later), going through the tutorial in this repository until you have successfully deployed a React app to GitHub Pages, then applying what you learn to this e-com-test project.

For future reference, here is the URL of the deployed React app: https://josephvang099.github.io/e-com-test/

[gitname]

I'm having the same issue: https://sparklezjas.github.io/hookform/ Can anyone tell me what I'm doing wrong?! I went step by step through the GH tutorial.

Hi @sparklezjas , I visited your deployed React app and saw some 404 errors in the console:

• https://sparklezjas.github.io/sparklezjas/hookform/static/js/main.4326d898.js
• https://sparklezjas.github.io/sparklezjas/hookform/static/css/main.073c9b0a.css

I take this to mean the index.html file is referencing JS and CSS files using incorrect URLs.

I took a quick look at the gh-pages branch of your repo (https://github.com/sparklezjas/hookform) and saw the JS and CSS files do exist where I expect them to be:

• /static/js/main.4326d898.js
• /static/css/main.073c9b0a.css

I think I have spotted the issue: The URLs the React app is using contain an "extra" sparklezjas segment in the URL (between the domain and hookform). When I do a fetch in the console, for a version of the same URL that does not include that "extra" segment, the URLs work; for example:

Recommendation:

1. Remove the trailing slash from the homepage value in package.json file (I noticed the one in the tutorial doesn't contain one).

   - "homepage": "https://sparklezjas.github.io/hookform/",
   + "homepage": "https://sparklezjas.github.io/hookform",
   

2. Re-deploy the app to GitHub Pages (I noticed the gh-pages branch hasn't been deployed for 2 weeks, while the main branch was updated 20 hours ago). See Step 7 of the tutorial in this repository.

Please let us know what happens after you have done those things.