GitHub page blank after deploy: Failed to load resource: the server responded with a status of 404

[jiayibao]

Hi All, 

I tried to build a personal website following a template and the website worked perfectly locally. However, after I deployed it to GitHub Pages, I can only see a blank page. I checked the Javascript console and here is the error message: 

https://jiayibao.github.io/https://jiayibao.github.io/personal-site//main-1d41357ad301d064dcf9.min.js 

Failed to load resource: the server responded with a status of 404 ()

Does anyone have any clue why “https://jiayibao.github.io” is repeated twice in loading the resource? Here is my github repository: https://github.com/jiayibao/personal-site/

And here is the personal webpage that is currently showing blank: https://jiayibao.github.io/personal-site/

My suspect that the error has something to do with path, but I’m not really sure about how to fix it. Any help would be greatly appreciated! Thank you!

[jiayibao]

Thanks! In fact, this problem has been solved by the person who provided me the inital website template. Thanks for the input! 

[ashishpandey17360]

Hey can you help me i don't understand?

[rajatrai101]

Can you please share the solution with us? Even though my name is not getting repeated in the HTTP request link but I feel I am facing a similar issue as you did. :slight_smile:

[meghanar121]

I am also facing same problem, this is my website in react https://meghanar121.github.io/covid-19/

[dann-chan]

I had the same issue too. I just started react (newbie on react). Here is how I fixed it.

I went into the index.html file that I uploaded (aside from the fact that github made it so difficult and not user friendly to upload) I simply used the web edit on github and made live changes.
For my case: my page is username.github.io/Home (Home is my repository)
I’ve noticed that when I compiled my react page, it didnt know Home is part of the file directory for my css and js files. Therefore I had to find all the places where it uses

link href="/static/css/main.a124****.chunk.css" or script src="/static/js/2.22a******.chunk.js
and simply add /Home infront.

Therefore,
link href="/Home/static/css/main.a124****.chunk.css" and script src="/Home/static/js/2.22a******.chunk.js

And where ever your code calls js or css or whatever, you will need to add your repo name infront.

Good luck if you have a huge website. Maybe you should add before uploading

[doehyunbaek]

Worked like a charm! If anyone wants a commit example, refer to this commit

[Shivaratnakumar]

@AndreaGriffiths11 GitHub Pages is already configured. But it is showing loading error.

PF the below attachments.
hosted site

11366×574 51.2 KB

[Chauhdri]

I also faced the same issue, my website works great while locally and shows a blank page after deployment on live server. I got the hint to sort out this issue by testing react app. I imported React from react in my two components of the app, after that it works fine on the live server too.

[oscarsinuco]

I resolved that problem, try it: go to index.html in your compiled code, for example in Angular is “dist/index.html” and paste that: if you already have it, then delete and replace that line.

[meghanar121]

@sjPrajwal this was react app i made mistake in package.json file, homepage should have proper address
you can follow steps for deploying react app here:https://github.com/gitname/react-gh-pages/tree/master

[lwardlegit]

yea I had the same issue had to follow this tutorial thanks :)

[tanaybanerjeedeveloper]

hey, please help me as I am facing the same problem as yours.

[Chauhdri]

I have changed private to false in Package.json. This change loads my website instead of blank page.

[CASTVELL]

Aleluya, thank u so much

[vovka8101]

two hours of suffering and I finally fixed that, thanks

[Ratnesh125]

thank you so much

[duynguyen224]

many thanks, it save my life

[AndreaGriffiths11]

Hi @jiayibao,

Thanks for being here! To have your repository show up at https://username.github.io/your-repository, you need to setup GitHub Pages for that repository as well. Ie: your repo should be USERNAME.github.io and its URL  ( https://github.com/USERNAME/USERNAME.github.io ).

I hope this helps!

[GajananVS]

Hi
I am getting the same error in my angular app, can you please provide the step to resolve it ?

image1363×394 24.7 KB

application link
https://gajananvs.github.io/Demo/

Thanks
Gajanan

[kovalen1618]

A little late to the party, but if anyone is using Vite with React and are trying to deploy to GitHub Pages then follow this article.

After you follow everything and redeploy your code, you may have to fiddle on GitHub a little by saving page deploy to another branch and then going back to gh-pages or you may just have to be patient.

Hopefully this helps!

[nataliamelissas]

The comment in that article to change "/" to "./" inside vite.config.ts worked for me.

[kreshby]

I solved this issue. It was very simple … but I tried more than 3 hours 🤣
you just do that

link href="./Home/static/css/main.a124****.chunk.css" 

src="./static/js/2.22a******.chunk.js

just dot before /

[moonsol124]

thank you very mmmmmmmuch!!!!!!! you saved my three hours....

[exposir]

Thanks for the answer, It works, but not elegant enough.

[Shivaratnakumar]

@AndreaGriffiths11 github page configuration.

2915×513 18.5 KB

[tehceen]

thanks alot you saved my life.

[BoisAuLit]

Just in case someone is still having the same problem. I replaced https with http in the homepage property in package.json, and then it just works.

[dattap647]

Help me to deploy app

[otter-computer]

Hi @dattap647, I believe that this is a react app, correct? It's likely (though not guaranteed!) that you've not set the homepage variable in your package.json according to the react instructions for deploying to Pages. In your case I believe it needs to be set to the following:

"homepage": "https://dattap647.github.io/eyeCare"

Once you do this, rebuild, then commit and push your site to GitHub I believe it will start working!

[sjPrajwal]

@meghanar121 can you please suggest solution for this…? even i am facing same problem…

[TwelfthS]

If anyone still struggling with this like I just did, my solution was simple - in index.js, change BrowserRouter like this:

<BrowserRouter basename='/RepositoryName'>
    <App />
</BrowserRouter>

Important note: I noticed that even after redeploying with changes, the page was still referring to old code, and I only realized this after I tried to add react independent changes. I ended up deleting the repository and creating a new one, but that shouldn't be necessary, just make sure your fixes are actually applied. Might be some caching problem

[astrit]

For any one experiencing similar problem, try to create a action that generates a static site to deploy from the branch works for me ✌️

[Versiani-R]

In my case, my website was loading a 404 next error page, but using next.js, my index page inside the pages directory was called "Index.ts" which resulted in a "Index.html" file, and next couldn't locate the index.html page. I changed directly into the public branch ( which is my deploy branch ) to "index.html" and it worked

[exposir]

I think it's a bug in github or compatibility is not good enough, I don't understand why gihub hasn't dealt with this problem yet, this problem is very misleading and makes developers think it's their problem so much that they waste a lot of time.

Until gihub has a good solution, the ideal solution is to use vercel or netlify

[kaushalzod]

This worked for angular as well just added repo link and added repo name infront of js files

[RaminMammadzada]

I also had the same kind of issue.
Instead of I wrote .
I changed it to and it worked.

[otter-computer]

This looks like it might be a case sensitivity issue. Your Pages site is hosted from a repository called Demo but your base tag is set to demo with a lowercase d:

<base href="https://GajananVS.github.io/demo/">

Can you try setting this to t he following instead and seeing if it makes a difference?

<base href="https://GajananVS.github.io/Demo/">

[lzmunch]

Not sure why, but this worked for me: setting the GitHub Pages source to a different branch and then setting it back to the gh-pages branch (or whatever branch you deployed to).

[victor-gargur]

I have the solution for Angular! On your index.html in the your build doc, ajuste the base href="link"

If your link is href="https://user-name.github.io/" add your repo name in the end of this, like:

from:
base
href="https://victor-gargur.github.io/"
/

to:
base
href="https://victor-gargur.github.io/angular-system-bootstrap-localstorage"
/

In the index.html of your build page.