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

Question

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

Ross · Accepted Answer · 2020-11-16 02:47:07Z

6

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

answered Nov 16, 2020 at 2:47

Ross

2,91119 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Colawithrain Over a year ago

Although other pictures and elements still cannot be loaded, shall I just add {{ site.baseurl }} in front of every href addresses?

Ross Over a year ago

Yes, that will work. Jekyll offers some helper functions called absolute_url and relative_url that do something similar but I find {{ site.baseurl }} clearer.

glob Over a year ago

This should be marked as the correct answer. Fixed it for me, thank you.

Bailey S · Accepted Answer · 2020-11-06 18:16:48Z

1

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

answered Nov 6, 2020 at 18:16

Bailey S

6271 gold badge8 silver badges15 bronze badges

1 Comment

Colawithrain Over a year ago

Thank you for your answer! I have tried to modify the url to colawithrain.github.io And baseurl to /Collin_Blog But it still doesn't work😭

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related