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

ShinikoStudent · 2019-05-26T06:32:27Z

ShinikoStudent
May 26, 2019

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.png1064×420 14.1 KB

and my github settings:

image.png701×488 20.5 KB

When I go to the website it opens up a blank page, I open up the console on “Network” and shows this:

image.png990×249 11.2 KB

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 😦

Answered by ShinikoStudent

Jun 1, 2019

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.png1251×326 27.6 KB

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.

I realised that everytime the request was get…

View full answer

justfiji · 2019-05-29T06:49:12Z

justfiji
May 29, 2019

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

0 replies

lee-dohm · 2019-05-29T17:45:49Z

lee-dohm
May 29, 2019

A CNAME record is required if you want to use a subdomain for hosting your GitHub Pages site, for example [www.example.com](http://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:

Your DNS is set up to point www.jamielynnculilap.com to shiniko.github.io
Your GitHub configuration is set up as if jamielynnculilap.com is your host name, not www.jamielynnculilap.com
If I request http://shiniko.github.io, it gives the standard “There’s not a GitHub Pages site here” message (which is expected, given your configuration)
If I request http://shiniko.github.io/Portfolio, I get redirected to https://jamielynnculilap.com which gives the blank page you describe (which is also expected, given your configuration)
If I request https://jamielynnculilap.com, I get the blank page you describe

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.

0 replies

ShinikoStudent · 2019-05-31T00:34:02Z

ShinikoStudent
May 31, 2019
Author

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.

0 replies

ShinikoStudent · 2019-05-31T00:49:28Z

ShinikoStudent
May 31, 2019
Author

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.png1087×433 19 KB

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?

1 reply

maseelshah22 Feb 13, 2024

were you able to find a solution for this? Leaving it as a github page works but adding a domain name is causing issues for me

lee-dohm · 2019-05-31T16:37:11Z

lee-dohm
May 31, 2019

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!

0 replies

ShinikoStudent · 2019-06-01T01:44:19Z

ShinikoStudent
Jun 1, 2019
Author

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!

0 replies

ShinikoStudent · 2019-06-01T06:57:49Z

ShinikoStudent
Jun 1, 2019
Author

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.png1251×326 27.6 KB

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.

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!

1 reply

amydyson Oct 30, 2022

Thank you SO MUCH! I've been struggling with the same issue for A LONG time and FINALLY it now works.

dreamyguy · 2020-04-04T11:14:30Z

dreamyguy
Apr 4, 2020

This is what did it for me.

0 replies

denisenanni · 2020-04-30T19:32:15Z

denisenanni
Apr 30, 2020

Did you set the output path to the folder ‘docs/’ in the file angular.json? Also when you build the project you need to indicate the output path.
The index.html also will contain the URL of your project:
<title>App title</title>
<base href=“https://USERNAME.github.io/YOUR-REPO” />
Remember also to copy the index.html renaming it 404.html.
Then you build the project with this command:
ng build --prod --base-href https://USERNAME.github.io/REPOSITORY_NAME/ --output-path docs
Then commit and push to origin the folder that has been created.

Sources:
https://www.google.com/amp/s/codinglatte.com/amp/posts/angular/deploying-angular-apps-github-pages/

0 replies

EricPryzant · 2021-01-25T20:01:13Z

EricPryzant
Jan 25, 2021

This is an old issue but I had the same problem and want to help anyone else that comes along later. I solved it using ng deploy --base-href=https://<URL>.com --cname=<URL>.com and changed the gh-pages location from docs/ to / (root). Solved all of my problems instantly.

0 replies

dlozina · 2021-06-11T08:58:36Z

dlozina
Jun 11, 2021

Thank you for this solution this really makes a difference!

0 replies

moonsol124 · 2022-09-28T14:26:27Z

moonsol124
Sep 28, 2022

I had an exactly the same issue but in ReactJs. I also tested out with an 'test.html' file as mentioned in the comment sections adding it in the root of my git repository. I realized that my custom domain was working as intended. In my case the problem was the homepage address that i configured in my package.json file. The only thing that I had to do was changing the address to this format: 'http://{github ID}.github.io/' ...

2 replies

trumanjchan Aug 29, 2023

Thank you! I got my ReactJS site working with my domain with your comment. I followed the accepted answer here, and changed my package.json's homepage url to the format you had. After that I found out deploying that format change commit removed my CNAME in my gh-pages branch so I had to re-add the custom domain in the settings.

ouattaraabraham Jan 4, 2024

with React changing the URL address of "homepage" to the same domain name example "homepage": "https//jamielynnculilap.com" solves the problem you also have to delete the browsing cache or change browser to test

This comment was marked as spam.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

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

{{title}}

Replies: 13 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

This comment was marked as spam.

Select a reply

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

Replies: 13 comments · 4 replies

ShinikoStudent May 31, 2019 Author

ShinikoStudent May 31, 2019 Author

ShinikoStudent Jun 1, 2019 Author

ShinikoStudent Jun 1, 2019 Author

This comment was marked as spam.

Replies: 13 comments 4 replies

ShinikoStudent
May 31, 2019
Author

ShinikoStudent
May 31, 2019
Author

ShinikoStudent
Jun 1, 2019
Author

ShinikoStudent
Jun 1, 2019
Author