Jekyll - blog html is generated into several nested directories

Question

I am new to Jekyll and am currently following along with the step by step tutorial to get acquainted with the stack.

My issue is that my blog html files which are generated to the _site directory end up in nested folders. The folders correspond with the date format required for the blog post markdown files.

Here is a visual of the file structure as it is now (only including relevant directories and files):

root/
|____ _posts/
|           2019-04-16-post-01.md
|           2019-04-16-post-02.md
|____ _site/
|__________2019/
|______________04/
|________________16/
|                  post-01.html
|                  post-02.html
|__________ assets/
|                 css/
|                    styles.css
|
|__________ blog.html
|__________ index.html
|             

This means that the css file path which all html is using is incorrect for the blog posts. The path would have to be ../../../assets/css/styles.css

Can anyone shed some light on why Jekyll generates the blog files nested like this and what the resolution may be?

Answer 1

In the docs, the default Jekyll configuration for the output permalink URL of posts is the date style which is /:categories/:year/:month/:day/:title:output_ext. The multiple / in the permalink is why you have lots of folders in your generated site.

To fix this, you could change the output permalink to something like :year-:month-:day-:title:output_ext so that you get something like 2019-04-16-post-01.html. Or, you could link to assets using absolute paths instead of relative paths as seen in the docs. Instead of ../../../assets/, you could just use /assets/ since you know the assets folder is at the root of your site.