Hello to the Jekyll community. I’m building a simple webpage with couple of blog posts. I’m following the file name format as 2017-04-12-awesome-title.md. The configuration in my post is as follow…
---
layout: post
title: I Can't Do This...
meta: Some meta
category: motivational
What is really interesting is that when I save the markdown file, Jekyll recreates the _site folder and the html for the post just created get into the following tree structure…
The problem is that now that file can’t see my css/main.css. My question would be if it is any setting in the _config.yml or in the very markdown file for the blog post to have the correct path to css/main.css in the _site folder.
Are you trying to circumvent the /assets/main.css?
Normally all css you create with Jekyll will end up in /assets/main.css. And the css is automatically included through the header. No need for manually including a css file.
@Rien The assets folders should be in my development environment or the assets folder is created automatically inside the _site folder? I’m wondering because I can’t find that in the documentation.
Other thing I can’t make to work is the social icons to be clickable. I’m using bootstrap to style the page. When I hove over the icon the mouse doesn’t change to clickable and when I click the icon does anything. This is the code I’m utilizing…
Jekyll doesn’t really care where your css is - a theme may care though. What theme are you using? The default one?
When people say the css is not loading on pages/posts but it is on the home page sometimes it is due to the baseurl and them using GH for hosting. If you are using GH for hosting and it is a project repo then you need the project name as the baseurl.
Nothing interesting about your folder structure, that looks normal to me.- it is category/year/month/day/title. This can be changed with the permalink setting.
Normally jekyll will put the css file in the _site/assets folder.
But you should be able to ignore that when you edit the sass files in _sass. It will simply be included where needed for you.
To make this clear:
You should edit the SASS files in _sass/… (and do all your CSS as SASS in there)
You should not manually include a css file in a posting or page.
Once you compile your site, the CSS will appear in _site/assets/main.css and this file will be included by the header that is also generated by jekyll.
Use this trick: point your browser at _site/index.html and switch to “show page source”. (Or use a plain old text editor). Then take a look at the HTML code that was generated.This way I found out fairly quick how jekyll works, even for those things that are difficult to find in the documentation.
I think that the problem is that I don’t have a _saas/ and I’m editing my css in root/css/main.css; this is the development root css and NOT the _site/.../main.css. I’ll change that and update this post later. Thank you for you guidance.
UpDate 8:01pm CT
I change the folder name from css/ to _sass/ and the file for development from main.css to _main.scss. I deleted the _site/ and rebuild the site and NO assets/ folder got created. The documentation states that Jekyll should compile sass for me but I don’t see any css created in the _site/ folder.
UpDate 8:05pm CT
The folder for css development should be css/. If you are doing @imports then you have to create _sass/ and make all the includes in that directory. As soon as I changed the development style directory to css, Jekyll compiled the css successfully.
In my experience, you really don’t strictly need a ./Saas folder. You just have to make sure that your custom css loads after the theme styles for cascading to take effect. That said, different themes have slightly differently implementation - but the differences are minimally consequential.
Understanding the Jekyll’s File Structure is almost always the thing you need when you run into such a problem.
