Pretty permalinks output nested folders and incorrect asset paths

Hey All,

My config.yml is set to permalinks: pretty, but I must be missing something in my pages.

First, I’m not working on a blog but a website.

My site structure uses folders with pages in them.

browser.html has permalink: /browser and it’s subpage alternatives.html is /browser/alternatives.

When the site builds, it outputs this:

This does not look right! What is the best practice for using permalinks with a site structure with folders and nested pages?

I’m linking to pages with this scheme:

<a href="/browser">link</a>
<a href="/browser/alternatives">link</a>

My baseurl is “/”.

I’m also getting strange loading errors for javascript and css files that reference the current page in the asset path.

When I’m on /browser/alternatives it adds this to the asset path for the css or javascript:

http://localhost:4000/browser/alternatives/css/main.css net::ERR_ABORTED 404 (Not Found)

Any clues?

for jekyll a pretty permalink is /home/ not /home the latter is an extensionless url which requires your server to handle part of it.

If the trailing slash is ok with you then all you need to do is add the trailing slash to your urls and it will work, and jekyll is working properly when it creates a folder called home and puts an index.html file inside of it.


as for css paths not working, that sounds like a different problem and these isn’t any info here to trouble shoot that, they may not be related.

1 Like

Can you share your config.yml file?

title: Jekyll Starter

baseurl: "/"
permalink: pretty

markdown: kramdown

  input: GFM
  syntax_highlighter: rouge

  sass_dir: ./css
  style: compressed

  - octopress-minify-html

exclude: []

Seems like your config.yml file is fine. Did you try to override the permalink settings in the frontmatter.

Hmmm, considering this issue:

layout: guide
title: Browser
permalink: /browser/

It looks like it is prepending /browser/ to the css path, I have no idea how or why.

Sub-pages use this permalink setup:

title: HTTPS
layout: guide
permalink: /browser/https

Jekyll console is displaying this for the js scripts too:

 [2018-09-21 12:34:11] ERROR `/browser/js/barba.min.js' not found.

 [2018-09-21 12:34:11] ERROR `/browser/js/main.js' not found.

I added {{site.baseurl}} for the scripts and css, they are loading correctly now.
This has fixed my problem!