Broken links and layout after referring custom domain to jekyll-generated github project page

Question

After changing the CNAME to my custom domain (http://alphagirls.cc) the index and links to posts and static pages won't render with the look+feel specified in my CSS. The site is supposed to refer to a project page repo on my github account: usrrname.github.io/alphagirls/

Things I tried:

I checked that I put the CNAME file in the site root and also that i didn't write "http://" in there. I also tried to change the A record to my github account's IP but it was still the same, so I don't think that was the issue. Also specified "url: http://alphagirls.cc" in my _config.yml

Also I used the {{sitebase.url}} tag for relative links. I thought static pages and posts and the look+feel specified in my css wasn't rendering when accessed on alphagirls.cc because I didn't specify baseurl as my custom domain name (alphagirls.cc) so I changed my baseurl to that and pushed the config.yml back in, noticed none of the links worked and layout was not showing once again. So that must not be the problem.

Answer 1

It looks like this is an issue with relative URLs not pointing to the right places, which is why your github.io site works as intended, but your alphagirls.cc site does not. For instance, the published alphagirls.cc site currently references stylesheets in these locations:

<link rel="stylesheet" href="/alphagirls/css/syntax.css">
<link rel="stylesheet" href="/alphagirls/css/main.css">

This would work if your CSS files generated into the _site/alphagirls/css directory, but this doesn't exist. They appear to be in the _site/css directory:

This means that the CSS files currently get published to http://alphagirls.cc/css/syntax.css and http://alphagirls.cc/css/syntax.css

To resolve this, try the following 2 changes:

1. In _config.yml change baseurl: "/alphagirls" to baseurl: "/" (which is the default configuration for Jekyll, so you could simply delete this line from your configuration.

2. In header.html, remove the leading / from your urls, eg:

   • Old: <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
   • New: <link rel="stylesheet" href="{{ site.baseurl }}css/syntax.css">

Note: you'll need to do #2 for all URLs, including the link to your about page.