Ben Knoble Ben Knoble - 2 months ago 16
CSS Question

Why isn't GitHub Pages applying the CSS to other pages?

I created a GitHub Pages/Jekyll website by manually creating all the pages. Then I thought "Let's get fancy" and I used the tools to generate a new page with a cool theme and crazy CSS and stuff. Fortunately, I had the foresight to download a copy of the original master branch before doing all this.

The basic layout of the site was:

Home
About
Blog
->Blog Posts


Once the GitHub tools had their say (and overwrote my index.html), I cleaned up after it. I put all the new html in my default.html in /_layouts so that I could keep it as a layout, and redefined the index.html to just be the YAML and text that I had originally. I got rid of my earlier (and poor) attempts at CSS. Bam! A beautiful front page greeted me. But when I tried to navigate to About, Blog, or any of the Blog Posts, all I got was black-and-white rendered html. No CSS, no fancy stuff, nada. Just my text and links.

obligatory GitHub repo

I tried to change anything that might be specifically tying into the main page, but it didn't do anything. I'm stuck.

Can someone help me identify what specifically is causing the CSS not to render? Keep in mind, this is my first experience with CSS.

Answer

The stylesheet link is not in the correct path and thereby not loading correctly in your pages. For example in your about page, the stylesheet link is https://linkreincarnated.github.io/about/stylesheets/github-dark.css, which doesnt exist. Instead you need to load the stylesheet from https://linkreincarnated.github.io/stylesheets/github-dark.css.

To solve this, you need to use the tag {{site.baseurl}} in your stylesheet links to load the stylesheet from the website's base path.

In your default.html page in https://raw.githubusercontent.com/linkReincarnated/linkReincarnated.github.io/master/_layouts/default.html, replace the below lines

    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-dark.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">

with

    <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/stylesheets/github-dark.css" media="screen">
    <link rel="stylesheet" type="text/css" href="{{site.baseurl}}/stylesheets/print.css" media="print">

and try loading again. This should load the stylesheets from the correct path.