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.
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.
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:
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 is the link to the repo. Any help is much appreciated!
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/) it appears to not have any css associated with it - like it is missing. I think that is why it isn’t displaying properly.
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)
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.
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. 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?