Search code examples
reactjsgithubgithub-pagesnexus

GitHub pages custom domain 404

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)GitHub pages successful domain setup (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)

Solution

  • ----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!