CODEWITHSUNDEEP
jekyllgithub-pages
yasath
yasath

Reputation: 59

Jekyll doesn't apply CSS to posts on GitHub Pages

Yes, I know that this question has already been asked multiple times, and I've applied every solution that I could find, but I still have this issue:

If you visit my Jekyll site (yasath.github.io), the homepage and the tags page in the navbar render the CSS perfectly and look beautiful. However, when I click on a post (like this one), the CSS completely fails to render and I end up with an old-looking white background, Times New Roman text page!

My config.yml file has the right URLs (as far as I know!), and when I view the source of both pages with Chrome's developer tools, they both import the same CSS file correctly.

Hopefully, someone can give me advice specific to my site! This is the GitHub repo for the site, and again, here is the actual site.

Upvotes: 1

Views: 1041

Answers (1)

Chuck
Chuck

Reputation: 86

The links to your stylesheets in your <head> section are written as relative links. You have, for example:

<link rel="stylesheet" href="assets/css/app.min.css">

When a URL starts with a directory name like "assets", the browser looks for that directory relative to the URL it's displaying right now. So when you're at yasath.github.io, it goes to yasath.github.io/assets/css/app.min.css... but when you're at https://yasath.github.io/2017/09/04/hello-jekyll.html, it looks for a stylesheet at https://yasath.github.io/2017/09/04/hello-jekyll.html/assets/css/app.min.css, which of course doesn't exist.

You want to start your URL with a /. That tells the browser to look relative not to the page it's displaying, but to the root of the website. So in your head template use:

<link rel="stylesheet" href="/assets/css/app.min.css">

...and similarly with all your other stylesheet URLs.

Upvotes: 2

Related Questions