# Jekyll locally won't load css and compilation on Github is weird

**URL:** <https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707>\
**Category:** Uncategorized\
**Created:** [November 18, 2021, 9:52pm UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707 "2021-11-18T21:52:37Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![dushyant-fire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dushyant-fire/32/4103_2.png) [@dushyant-fire](https://talk.jekyllrb.com/u/dushyant-fire)\
**Post date:** [November 18, 2021, 9:52pm UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/1 "2021-11-18T21:52:37Z")

</div>

As the title says, Jekyll won’t load Css locally.

Upon building jekyll locally by `build exec jekyll serve`, a `style.css` is created in the `/_site/assets/css/` directory but does not display it in the html pages. The scss file called by `styles.scss` in the `/assets/css/` directory is able to import a `.scss` file in `/_sass/` directory. However, the css is not displayed on `localhost:4000`

Plus, there’s something fishy going on with the navigation toolbar, called by including a `navigation.html` both locally and on github. But when trying to build it locally, something messes up and none of the navigation toolbar css is displayed. On Github, the navigation toolbar is not displayed as I expect.

Can anyone help with troubleshooting?

I can share my repo if needed.

I am new to this, and its exciting, but would appreciate if someone can help me not falling into rabbithole of trying to debug these issues.

Thank you,  
Dushyant

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [November 19, 2021, 12:01am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/2 "2021-11-19T00:01:21Z")

</div>

one thing at a time…

Your browser has tools to help troubleshoot stuff like this, if you are in Chrome right click on the page somewhere and choose `Inspect` and then look for the `Console` tab and it will likely tell you that you have an error trying to get the css. That error should tell you the path it is trying to get the css from, compare that to where the css actually is in the \_site folder. You may find it is looking for the css somewhere else which probably means your layout or include that tells it where to look is not correct.

Once you get the css to work the other issue may go away as it may be related.

Links to a repo and or live site are the only way for one of us to actually tell you what is wrong.

---

<div class="post-metadata">

**Author:** ![dushyant-fire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dushyant-fire/32/4103_2.png) [@dushyant-fire](https://talk.jekyllrb.com/u/dushyant-fire)\
**Post date:** [November 19, 2021, 1:36am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/3 "2021-11-19T01:36:25Z")

</div>

Thank you for the reply.

I inspected the index page and it seems that it’s not trying to look for any css path at all, which is quite surprising. Only one error I see is:

```auto
One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.

Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be `<!DOCTYPE html>` to render the page in No Quirks Mode.

```

I have this `<!DOCTYPE html>` mentioned in the default.html layout. Any thought?

Yes, I understand. Wasn’t sure earlier if Github linked account would let people access my Github account.

But anyhow, [Here](https://github.com/dushyant-fire/dushyant-fire.github.io) is the link to the repo. Any help is much appreciated!

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [November 19, 2021, 2:21am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/4 "2021-11-19T02:21:28Z")

</div>

if you look at any page in the \_site folder and look in the head what is the url to the css? is it correct? when you run it locally is it the same path?

Where did you get the navigation include? is it part of the theme you are using? on your live site ([https://dushyant-fire.github.io/](https://dushyant-fire.github.io/)) it appears to not have any css associated with it - like it is missing. I think that is why it isn’t displaying properly.

locally what version of jekyll are you using?

---

<div class="post-metadata">

**Author:** ![dushyant-fire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dushyant-fire/32/4103_2.png) [@dushyant-fire](https://talk.jekyllrb.com/u/dushyant-fire)\
**Post date:** [November 19, 2021, 2:32am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/5 "2021-11-19T02:32:54Z")

</div>

I’m using Jekyll 4.2.1 locally.

Any page in the \_site folder does not have a head. So probably, that is the reason for no css? It seems for some reason, it did not follow the layout default.html?

The navigation include wasn’t the part of the base theme I started with (no theme as of now). I was hoping to fiddle understand how to build themes etc. This navigation.html was copied from some theme I liked on Github. Yes, that does make sense that theres no navigation.scss associated with it though. I had included details of navigation.scss in the main.css (here the jekyll-slate-theme-update.scss)

---

<div class="post-metadata">

**Author:** ![dushyant-fire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dushyant-fire/32/4103_2.png) [@dushyant-fire](https://talk.jekyllrb.com/u/dushyant-fire)\
**Post date:** [November 19, 2021, 2:35am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/6 "2021-11-19T02:35:23Z")

</div>

So locally, I am getting an error that layout ‘default’ requested in any files does not exist

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [November 19, 2021, 3:11am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/7 "2021-11-19T03:11:42Z")

</div>

it looks like you are using the seo plugin but I don’t see where you say that in the config/gemfile? in your layout you have an `{% seo %}` section so maybe without the plugin it breaks the layout? try removing it? I don’t bother with that plugin (or any others) as I like to control stuff. I don’t think the seo plugin does all that much really, and you can put all that stuff in a layout or an include.

at this point you may have too many different things going on each causing separate issues.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [November 19, 2021, 3:13am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/8 "2021-11-19T03:13:20Z")

</div>

personally I would start from scratch and skip any themes or plugins, then there is no ‘magic’ happening, it is all controlled by you.

---

<div class="post-metadata">

**Author:** ![dushyant-fire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dushyant-fire/32/4103_2.png) [@dushyant-fire](https://talk.jekyllrb.com/u/dushyant-fire)\
**Post date:** [November 19, 2021, 4:02am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/9 "2021-11-19T04:02:31Z")

</div>

Thanks for your help! I agree that I have tried to take a shorter way out and have messed up some structure.

I started from scratch. Following the [Step-by-Step tutorial](https://jekyllrb.com/docs/step-by-step/01-setup/). Started on a completely new directory locally, but jekyll build still says `default` layout does not exist. Any reasons that you could think of why this would happen?

Creating a new layout is as simple as creating a `layout.html` file with appropriate html syntax, correct?

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [November 19, 2021, 4:13am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/10 "2021-11-19T04:13:31Z")

</div>

`_layout` should really be `_layouts` with an s on the end.

---

<div class="post-metadata">

**Author:** ![dushyant-fire](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/dushyant-fire/32/4103_2.png) [@dushyant-fire](https://talk.jekyllrb.com/u/dushyant-fire)\
**Post date:** [November 19, 2021, 4:21am UTC](https://talk.jekyllrb.com/t/jekyll-locally-wont-load-css-and-compilation-on-github-is-weird/6707/11 "2021-11-19T04:21:30Z")

</div>

Oh damn! that fixed it (at least the website from scratch, and I believe it should the other one too… huhh.

Thanks for your keen eye!
