jekyll / css not working on github pages, but it works on localhost:3000

user_14590621 0
Viewed 795

I am new to Github and I’ve been trying to deploy my blog (forked from kimfucious) on Github pages. I have tried to deploy it by using surge and it worked. While when I upload it to Github, it says the CSS is not being applied.

This is how it looks like now

Here are the errors

I’m obviously doing something wrong. But I can’t figure it out.

Here is my repo: https://github.com/Colawithrain/Collin_Blog

And here is the Github pages link: https://colawithrain.github.io/Collin_Blog/

Thank you in advance for any pointers.

Colin

jekyll github-pages
2 Answers

It's a little confusing since it likely works locally (where you don't need a baseurl). It's one of the most common errors with Jekyll in combination with GitHub Pages. Here's the run down:

You are trying to load:

https://colawithrain.github.io/assets/css/main.css

However, the CSS file is being served at:

https://colawithrain.github.io/Collin_Blog/assets/css/main.css

You are currently requesting this in _includes/head.html with:

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

Fix this by changing it to:

<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">

Then setting this in your _config.yml:

baseurl: /Collin_Blog
user_54775610

Have you tried setting url and baseurl in the config. Because it looks like the site expects it to be on the root domain and not at /Collin_Blog. For example, the CSS file is referenced at:

https://colawithrain.github.io/assets/css/main.css

But is actually at:

https://colawithrain.github.io/Collin_Blog/assets/css/main.css
user_112134880
Related