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

Angular Website Showing Blank on GitHub Pages

Hi guys

 

I've been spending a bit of time trying to setup a personal website through learning Angular and host it via GitHub Pages. I've managed to complete some courses and get the site running locally absolutely fine.

 

However, despite various googlings and attempts (creating a gh-pages branch, ) my website is not displaying at all. I'm not sure if this is through DNS hosting issue or through something configured on GitHub itself, but would love some help from the community.

 

Source repo: https://github.com/jacon-dev/james-conlin-website

DNS: jamesconlin.co.uk

 

Any help at all would be hugely appreciated.


Thanks

 

JC

5 Replies
Highlighted
Copilot Lvl 2
Message 2 of 6

Re: Angular Website Showing Blank on GitHub Pages

Not sure if this adds anything, but on using debugging tools I can see the following:

 

GET https://jacon-dev.github.io/styles.a2848994c778bbbb92ee.css net::ERR_ABORTED 404
jamesconlin.co.uk/:1 Access to script at 'https://jacon-dev.github.io/main-es2015.037229929b6677a65a65.js' from origin 'https://jamesconlin.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jamesconlin.co.uk/:12 GET https://jacon-dev.github.io/main-es2015.037229929b6677a65a65.js net::ERR_FAILED
jamesconlin.co.uk/:1 Access to script at 'https://jacon-dev.github.io/runtime-es2015.edb2fcf2778e7bf1d426.js' from origin 'https://jamesconlin.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jamesconlin.co.uk/:12 GET https://jacon-dev.github.io/runtime-es2015.edb2fcf2778e7bf1d426.js net::ERR_FAILED
jamesconlin.co.uk/:1 Access to script at 'https://jacon-dev.github.io/polyfills-es2015.2987770fde9daa1d8a2e.js' from origin 'https://jamesconlin.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jamesconlin.co.uk/:12 GET https://jacon-dev.github.io/polyfills-es2015.2987770fde9daa1d8a2e.js net::ERR_FAILED

 

I've switched between forcing HTTPS and not, but same difference.

Highlighted
Ground Controller Lvl 1
Message 3 of 6

Re: Angular Website Showing Blank on GitHub Pages

In my case, I was using a custom domain but I forgot to add the domain while deploying(ng deploy --base-href https://customdomain.com/). Check the network tab in dev-tools and observe the URL to check if it is generating the expected URL or not.

Highlighted
Ground Controller Lvl 1
Message 4 of 6

Re: Angular Website Showing Blank on GitHub Pages

When building your Angular project, make sure the base-href is your published GitHub Pages URL, not your repo URL:

ng build --prod --output-path docs --base-href="https://<user-name>.github.io/<repo-name>/"

Highlighted
Ground Controller Lvl 1
Message 5 of 6

Re: Angular Website Showing Blank on GitHub Pages

Hi mate

 

Does the base -href URL have to be in "", for it to work??

Ground Controller Lvl 1
Message 6 of 6

Re: Angular Website Showing Blank on GitHub Pages

No, it does not have to be in inverted commas