Jekyll include looking in wrong directory permalink

1
votes

I have a Jekyll site with some posts and some pages in the root directory.

If I navigate to a page in the root directory, such as localhost:4000/index.html all of the files in the _includes directory load no problem using:

{% include head.html %}

If I then go to a post using the permalink format as defined in config.yml:

permalink: /:categories/:title
localhost:4000/blogpost/first-post

The include files are not loaded. Looking in Firebug at the CSS files in the header it gives an error that the file is not found and is looking in the directory:

/blogpost/first-post/css/boostrap.min.css

If I give the post a permalink in YAML as:

permalink: /first-post.html

Everything works fine.

How do I set up the include to find the right files in my pages when using permalinks to navigate?

1
cssyamljekyll
Does your head.html include a <link> to css/bootstrap.min.css? Change it to /css/bootstrap.min.css. – Ry-
That fixed it, thanks! – amarcy

1 Answers

1
votes

Includes and assets are two different things.

Includes are partials that are usually stored in _includes. If include anyfile.html work in index.html, it will work in any other page or post.

assets like js, css or images are loaded by html following a path. It's better to use a path relative to the site root. That's why Jekyll calls assets like this :

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

So, if your site is reached at http://localhost/any/path, your _config.yml look like this :

url: http://localhost
baseurl: /any/path

And then, no more problems with assets !