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.

[xpierroz]

I have the same problem, blank page...
https://github.com/xpierroz/webxpierroz
for pierrodbz.tech

[gitname]

Also, having trouble on this one: https://sparklezjas.github.io/propitup/ However, it's not a blank page, but showing a sort of read me page.... Thanks for helping this newbie! I'm happy to say all of my other repositories are working correctly, just these two ones have issues.

Hi @sparklezjas , since this comment does not involve a blank page, will you delete the comment and open a new Issue about it? That way, I will be able to comment on it without notifying the other people subscribed to this thread.

[gitname]

Thank you for the tips...I updated it and tried to re-deploy, but had this error (and it's still a blank page):

Hi @sparklezjas , similarly, since the deployment process, itself, is not finishing, will you open a new Issue about this? I don't want the people subscribed to the current Issue (about a blank page and custom domains) to receive a notification about each reply on this topic.

[gitname]

I have the same problem, blank page... https://github.com/xpierroz/webxpierroz for pierrodbz.tech

Hi @xpierroz , I see the blank page at https://pierrodbz.tech/ and I see the JS console contains the following 404 errors:

I think the issue stems from the fact that the URLs contain a /webxpierreoz segment. When I remove that segment from the URLs, the URLs work.

Looks to me like you updated the homepage value in your package.json file after you last deployed.

Please deploy again and report back.

On a side note; in the master branch, I recommend storing the CNAME file in the public folder, as one user suggested here: #89 (comment)

[xpierroz]

Hello, thanks for the answer
I'm kinda new to GitHub pages.
To deploy again, I should enter "npm deploy" in my terminal on my repository folder, right? thanks

[gitname]

Hello, thanks for the answer
I'm kinda new to GitHub pages.
To deploy again, I should enter "npm deploy" in my terminal on my repository folder, right? thanks

@xpierroz You're welcome. You can do it by running npm run deploy.

[b3yund]

Hi there, I am having problems with my website. It will show a blank white screen despite following all the steps. Note that my LocalHost works completely fine when homepage is taken off

Here is the repo: https://github.com/b3yund/awakening

And here is the "deployed" website:

[b3yund]

I didnt do anything and now its like this as well:

[gitname]

Hi there, I am having problems with my website. It will show a blank white screen despite following all the steps. Note that my LocalHost works completely fine when homepage is taken off

Here is the repo: https://github.com/b3yund/awakening

Hi @b3yund, thanks for including a link to your repo and screenshots of the JS console errors. I looked at your repo. Since your app uses client-side routing (i.e. React Router), I recommend applying one of the workarounds listed here: #104 (comment)

[SiddhiiDhamale]

I am getting blank page after deploying the react website successfully , I am not able to figure about this issue , Can some help me?
https://github.com/SiddhiiDhamale/siddhidhamale
@mmont429

[gitname]

Hi @SiddhiiDhamale, I looked at the main and master branches in our repo and neither one contains the code that the base branch typically contains after someone performs the steps in the tutorial in this repo. I recommend creating a new GitHub repository and going through the steps in the tutorial, verbatim, in order to experience deploying a bare-bones app; then applying that experience to your current project. If you run into issues during a particular step of the tutorial, you can create a new Issue here and post the step number, along with links to your GitHub repo (like you did above) and, if far enough along in the deployment process, a link to the URL you were trying to deploy to.

[gitname]

I will close this GitHub Issue so its 12 participants don't keep receiving notifications about tangential issues.

Here is a summary of the various issues reported in this GitHub Issue:

• page is blank (when using custom domain) - Deployed React website showing blank page #53 (comment)
• page looks blank (not a React app) - Deployed React website showing blank page #53 (comment)
• page is blank (package.json lacks homepage property) - Deployed React website showing blank page #53 (comment)
• page is blank (fetching from wrong URL) - Deployed React website showing blank page #53 (comment)
• page is blank (fetching from wrong URL) - Deployed React website showing blank page #53 (comment)
• page is blank (app uses client-side routing) - Deployed React website showing blank page #53 (comment)

[Siddharthbeniwal]

Hi there, I am getting blank page after deploying the react website successfully . I guess the issue is because of path mismatch but I'm not able to figure out solution to it. Can some help me?

repo: https://siddharthbeniwal.github.io/TextStyler/

[gitname]

Hi @Siddharthbeniwal, I meant to lock this Issue from further comments, as I didn't want the other 12 participants to continue receiving notifications about (in some cases) tangential issues.

I looked at the code in the repository referenced in your message and noticed it differs from that which create-react-app normally generates. I recommend creating a new, temporary repository; following the steps of the tutorial verbatim so you end up with a working deployed app (or create an Issue if you run into problems while doing that); then, applying that experience to your current project.