im new to coding and need some help.
I made a react project (using create-react-app), and the website has been running on my gh-pages branch
(heres my repo: https://github.com/simchaleh/shivisihashem.git)
ive been trying to host the gh-pages project on a custom domain instead.
my react project looks great when its hosted on gh-pages, but when i try to connect it to my custom domain, all i get is a solid white screen.
heres a screen pic of my dns settings on custom domain. (u can also see that gh-pages says its hosting on my domain):
dns settings and gh-pages/settings page
I have a CNAME file in gh-pages branch, with one line, where i put:
shivisihashem.com
does anyone have any ideas why im just getting a blank white screen on my custom domain?
thanks!
i just got an answer from github staff. it solved my issue.
heres the answer if anyone else has this same issue:
The file you need to edit is here:
https://github.com/simchaleh/shivisihashem/blob/gh-pages/index.html
Currently, these two sections have errors:
<script type="text/javascript"
> src="/ShivisiHashem/static/js/main.7cdb5ccf.js"></script>
>
> <link href="/ShivisiHashem/static/css/main.ff643f95.css"
> rel="stylesheet">
You should be able to resolve the issue by replacing them with these:
<script type="text/javascript"
> src="/static/js/main.7cdb5ccf.js"></script>
>
> <link href="/static/css/main.ff643f95.css" rel="stylesheet">
I hope that helps! Let us know if you have any other issues.
Simcha's solution worked for me temporarily. Every time I was deploying to Github pages, the index.html file was automatically reverted back to "/theNameOfMyApp/static/.... So I managed to get rid of this problem, by removing the "/theNameOfMyApp" part from the homepage: ... in package.json. So in package.json there I have: "homepage": "http://themitsoss.github.io".
Had this same problem. I believe this issue is caused when you use the PUBLIC_URL environment variable, like so:
%PUBLIC_URL%/main.css
which works for the github.io site but causes path problems in the custom domain, which adds the variable in front of the path like in Simcha's example. So, we need to manually remove every instance of the this variable (process.env.PUBLIC_URL) each time we build for gh-pages.
Related
So basically, I bought the custom domain of nexus-cheats.com, and went to connect it to my GitHub pages website of archiemourad.github.io/Nexus (/Nexus is the homepage). I entered the custom domain and set up the DNS, did the DNS checks and everything seemed to be working (Image Below) (My website is using React.js) Now, when loading the domain nexus-cheats.com It brings me to a blank page, And it "seems" to be working in a way It loads the tab title but nothing else. In the console there are a bunch of cookie related warnings. But no errors. When I go to nexus-cheats.com/Nexus i get the default GitHub pages 404. And get two errors. One is the denail of loading of my favicon.ico (Tab logo) Error => Content Security Policy: The page’s settings blocked the loading of a resource at https://nexus-cheats.com/favicon.ico (“img-src”). The other is a server GET 404 error => GEThttps://nexus-cheats.com/NexusALTHOUGH after loading nexus-cheats.com/Nexus and going back to nexus-cheats.com I get two more errors, both being the failure to load certain files in my react app. Errors => GET https://nexus-cheats.com/Nexus/static/js/main.89be2f5c.js GET https://nexus-cheats.com/Nexus/static/css/main.1bf437ff.css These (I assume) Are the build version my GitHub pages website is running on. Anyone know a solution? Or the problem going on here?
DNS CONFIG: My A: Record is set to 185.199.108.153 My CNAME: Record is pointing to archiemourad.github.io. (www)
----edit: Solved, but I kept all of my original text for brevity---
I'm getting this same exact error and situation right now.
I don't have answers yet, but it looks like React is trying to connect the %PUBLICURL% to the wrong place now. This comes from my /public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I subtracted irrelevant code and added the ...'s, for the record.
Locally, my network tab in my browser's developer tools shows:
http://localhost:3000/{project-name}/manifest.json
But, when I hosted it the exact way you have (with it working properly before I added the custom domain), it returns:
{my-custom-domain}/{project-name}/manifest.json
The /public/index.html file has loaded, but it can't access the other files it calls correctly.
It seems that the index.html is adding an extra part to the address from the %PUBLICURL%. By that, I mean the %PUBLICURL% adds the {project-name} between the custom domain and the files it is trying to access. My url should read:
{my-custom-domain}/manifest.json
I can edit the values in the developer's tools to remove that part, and then the files will load. But, this still doesn't solve the issue.
---------edit: solved the issue---------
I am unsure if the above changes are necessary, but I did remove the %PUBLICURL% from my /public/index.html file.
Now for the good part - the fix!
In your package.json, be sure to change the:
"homepage": "your-github-url"
to:
"homepage": "your-fancy-new-custom-domain"
Save it up and then run your build script included in most of the resources I found ( like this: https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson ):
npm run deploy
This will update your project, post it to your GitHub, and deploy it. Then just check that you have the same settings as you originally posted an image of on your GitHub pages, and it should work!
Wanted to create a "tags page" that has all posts with a certain tag. I added it to the header of my website but I keep getting a 404 error. It looks like the tags page isn't building at all?
404 Error page:
https://tiffanychenster.github.io/personal-blog/tag/reviews/
Repo:
https://github.com/tiffanychenster/personal-blog
Confused as to why it works locally but not on Github pages. Thought it might be an error with my nav links but messed around with header.html a lot and got nowhere. Any help with creating the tag page on remote server would be much appreciated
GitHub Pages only allows you to run a number of whitelisted plugins, and jekyll-tagging is not one of them. This means the plugin won't run, the tag pages won't exist and you'll get a 404 response.
The suggested workaround if you want to continue using GitHub Pages and custom plugins is to build the site locally and commit the output. You could commit it to the same repo in a subfolder and then select that folder as your base in GitHub. Alternatively, you could keep the result in a separate repo (i.e. my-website and my-website-output). This way the source git history isn't tied to your output - as well as keeping each repo's file size down.
Another way altogether would be to create the tag pages without the plugin. It would be a bit more manual but not always unmaintainable depending on your use case.
Check out the ruby gem update_tags, which does what you're looking for and works in GitHub pages.
Here's some more context about how and why that gem works.
I was running an React PWA on my domain (example.com). Now I changed the DNS A record to an server running Wordpress. The problem is that old useres still get served the PWA and not the Wordpress page. How can I fix this?
You can remove the link to manifest file from the html pages similar to listed below, and also remove the manifest file from the domain.
<link rel="manifest" href="/manifest.webmanifest">
I have a react app which works perfectly fine.
However we are pushing code after NPM BUILD and deploying the code manually via SFTP
We can see the JS and CSS files have different names.
However the browser keeps downloading css and js files form cache, even if I disable cache in the browser.
I tried deleting all files in FTP, and magically the website keeps working? so it looks all the files are retrieved from the browser cache even if nothing exists in the server
I tried stopping and starting the azure website, but didnt make any difference
I tried cleaning the browser, cache, history, etc, no difference.
I wonder if I need to setup something in web.config, or in Azure website settings to make this works
This seems to be not an issue with Azure app service (Web app), you need to remove the caching of the react app with the following steps
Step 1: adding the following to in index.html
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Step 2: inserting the following to the js
import { unregister } from './registerServiceWorker';
and call
unregister()
Reference Answer
It depends on how your app is configured, but I would not recommend disabling cache on the JS & CSS. Instead, it's best to add some version-dependent information to the file name so every time the JS or CSS update the file name changes.
Last time I worked on a web project we had it such that our JS & CSS had a content hash at the end. Something along the lines of main.205199ab45963f6a62ec.js instead of just main.js. Also note that you don't even have to manage that hash yourself, as there are ways to get ASP.NET or webpack (etc...) to update the reference in the HTML/JSX for you.
Here's webpack's page about it: https://webpack.js.org/guides/caching/
I have created an app, wherein i have given images paths as recommended by community. While running locally it loads and displays all the images but after i deployed on github pages, it is not taking the correct path to get the images. I dont know how to resolve the issue , can someone help me ?
i have tried adding %PUBLIC_URL% and all but nothing seems to work
This is what i have tried and works in local. My images are located under
public/images/login-background.png
background: url('/images/login-background.jpg') center center
no-repeat;
While i publish my project to github, url changes from 'localhost:3000' to 'https://singhkshitij.github.io/abc/' so all the images take url as
https://singhkshitij.github.io/images/login-background.png
while it should be
https://singhkshitij.github.io/abc/images/login-background.png
I'm going to assume you've used create-react-app to bootstrap your application. In which case you need to specify the homepage property in package.json to something like
"homepage": "https://singhkshitij.github.io/abc",
Reference - https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
I had the same issue. Basically you need to change
url('/images/login-background.jpg')
to
url('homepagePath/images/login-background/jpg')
where homepagePath is the url of your application served by github:
https://{username}.github.io/{reponame}