Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 3
Message 1 of 8

After adding custom domain there are now 404 errors. Using Google and Project Pages

Solved! Go to Solution.

Hello,

 

I've been looking at many different threads here and online but I can't seem to get my problem fixed.

 

Some background:

My page was originally working as intended under username.github.io/projectname but after I added a custom domain it brings up a blank page and going into the console it says I have 404 errors. I also have the CNAME file included too.

Custom domain name is bought from Google and I am using a project page repo and not the profile one.

My repo.

(I've been making a lot of changes trying to fix this but I hope it's not messing it up. I did wait 24 hours after first inputing the custom domain name but it seems to still give the same errors, thus all the changes you see now is currently taking place.)

 

My google domain is set up like so.image.png

and my github settings:

image.png

When I go to the website it opens up a blank page, I open up the console on "Network" and shows this: image.png

So I'm assuming that since it's reading the html file then Google must be working correctly and there's something going on with my repo's references, right? 

 

When I click on each error I can see the request url is not including the docs/ folder in the path file. So I tried manually adding in the path but that still doesn't work.

 

I've been trying to edit the docs/404.html and docs/index.html pages by changing either the href or src but no luck.

Most of the other tutorials online seem to only refer to the github profile version of username.github.io but some of them mentioned that it should work for both profile and project pages on the google domain.

 

I've been stuck on this for hours now :(

7 Replies
Copilot Lvl 2
Message 2 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

In your package.json file make sure the "homepage" variable is set to the same custom domain as well

Copilot Lvl 3
Message 3 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

Hi, I'm not quite sure what you mean by "homepage" variable, is this something I need to include myself in the package.json file? My package.jscon looks like this.

 

From what I found online it seems like the "homepage" variable refers to those using React, but I am currently trying to build my webpage with Angular.

Community Manager
Message 4 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

A CNAME record is required if you want to use a subdomain for hosting your GitHub Pages site, for example `www.example.com`. The `www` part is the subdomain. It appears that you want to use an apex domain, for example `example.com`. For an apex domain, a CNAME can't be used and you have to use an ALIAS, ANAME, or A record with your DNS provider.

 

From what it looks like in the screenshots you posted you have the following:

 

 

The contents of the blank page are:

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PersWeb</title>
  <base href="/Portfolio/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3647b3a2b47542ccb3ef.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="es2015-polyfills.66d0882ecaa572e181ea.js" nomodule></script><script type="text/javascript" src="polyfills.8bbb231b43165d65d357.js"></script><script type="text/javascript" src="main.9a1be62898eb19746491.js"></script></body>
</html>

And `<app-root>` is an Angular thing, which it appears your site is configured to use.

 

Unfortunately, I'm not going to be much help with getting the Angular part to work. But it appears that the GitHub Pages stuff is all working as it should be.

 

I hope that helps! Let us know if you have more questions.

Copilot Lvl 3
Message 5 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

Hi, thank you for checking if my configuration is set up correctly.

 

So, correct me if I'm wrong, but I'm assuming since I have both the CNAME and A records configured it is somehow messing up how the webpage is showing right? So I removed the CNAME from my Google Domains (since I'm not using "www" for the subdomain) and kept the A record instead. 

image.png

 

It still seems to be showing the same errors (and a white blank page) but I'll wait a day and keep you updated if something changes.

 

What I'm more confused about is that if I do not use a custom domain name, and if I leave the site as http://shiniko.github.io/Portfolio, the website does show up correctly. So I thought I was doing the Github Pages configuration wrong.

 

If there is no other problems with how I configure Github, I am still stuck on what could be the problem :(

 

I've had problems with gh-pages and master branch being the sources so I had to use docs/ as the source for my website to actually show up (without the domain name). And if I'm only using docs/ as the source then I have to use the project pages as my repo.

 

Is there anything else I can try? 

Community Manager
Message 6 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

Try creating a file named `test.html` in the root of your pages folder with the contents:

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Wait for the pages build to go through, then navigate to https://jamielynnculilap.com/test.html. This will test if it's the custom domain configuration causing a problem or the Angular stuff causing a problem. If you don't see the contents, then there's something wrong with the domain configuration. If you do see the contents, then it's the Angular stuff.

 

I hope that helps!

Copilot Lvl 3
Message 7 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

hmm interesting, https://jamielynnculilap.com/test.html does show up fine, so it is on Angular.

I'll keep trying other solutions and update if I can get it to work. I am happy that the domain config is working as intended though!

Solution
Copilot Lvl 3
Message 8 of 8

Re: After adding custom domain there are now 404 errors. Using Google and Project Pages

OKAY GOT IT! Oh my, that took way too long to figure out. I would like to thank @lee-dohm for his suggestion about doing the "test.html" and double checking that my domain configuration was setting up correctly, it helped me figure out what was the problem with the blank page showing.

 

What I did to fix the blank page:

So for deploying to Github Pages I was following the Angular documentation shown below

image.png

This one and a bunch of other tutorials pretty much had the same concept, but after checking the "Network" status from the "test.html" file (that @lee-dohm mentioned) I was looking at how it was requesting the URL.

image.png

I realised that everytime the request was getting a 404 error the URL would look like: 

https: //jamielynnculilap.com/[name of repo]/[file name]

But the screenshot above doesn't even include the repo name and it worked fine.

 

To fix this I built my project with

ng build --prod --output-path docs

left base href as "/" which fixed the webpage and now it works! It's quite strange because other people online seem to have the exact opposite problem (they needed to include the base href as their repository name), but my webpage seems to work as intended now. 

Thanks for the help!