React app not working after deploying to Github Pages

I’ve got a bit of an odd problem I’ve just encountered. I created a little app using React and it works as intended locally, but when I deployed it and made it viewable on Github Pages, only the background image shows up. I saw in the console that it was blocking an API call because it was set to an HTTP address instead of HTTPS, but I changed it and it still doesn’t work.

Heres a link to the source code:

and heres the live version:

I cannot figure out what else is wrong.

Hello there,

Your code still shows a request to a URL with http. Have you pushed your recent changes?


Thats strange, yeah I pushed them a little while ago.

I’m not 100% familiar with gitHub pages and their build process but you’re right. Your code is pushed and the website is not picking up your latest code.
In technical terms when you push a code it would almost never automatically show up in the website showing your code unless there’s a build for the code you have pushed.
The reason is the server showing your website (in this case GitHub Pages server) doesn’t know if you’ve tested and built your project locally so it does it to make sure everything is on the right track and the code is persistent.

That build could be automatic, meaning that anytime you push a new commit a script would go pick up that new change, apply it to the code it already has and rebuilds your website. (I think this is the case with GitHub Pages)

Back to your problem, it is most likely the case that the automatic process of rebuilding the website is failing because of something.

That being said in case of GitHub pages they also mention the below:
Note: It can take up to 20 minutes for changes to your site to publish after you push the changes to GitHub. If your don’t see your changes reflected in your browser after an hour, see “About Jekyll build errors for GitHub Pages sites.”

you can find this note in here.

I’d suggest you wait and then if nothing happened go and check the build errors to see if you can solve a build error.

Good luck :call_me_hand: and let me know if you wanted more detail about what build really is or any more info.

1 Like

Ah that makes complete sense. I never knew any of that, I thought build changes happened instantly once pushed but having a gap makes sense for the reasons you explained. Tbh, I didn’t really know what Build did besides make it work haha.

I’ll wait on it and check back in a bit and troubleshoot from there.

Thanks for your help!

1 Like

If it helps any, I deploy pure html/css sites to GitHub Pages, but I deploy JS/React sites to Netlify. Its free. I think GitHub Pages can do React, but there’s some kind of setup you need to do first (per project, I think) and I don’t know how to do it.