CODEWITHSUNDEEP
htmlcssjekyllpermalinks
julientaq
julientaq

Reputation: 1

Jekyll site.baseurl lost in permalink

I'm working with jekyll to make a small website. As we'd like to hide dates of the posts, i us permalink.

On localhost, the index.html is well shown, with the right css included.

The browser is getting the css from:

127.0.0.1:4000/css/styles.css

When i'm getting to a post, my css is gone, since the browser is looking for the css here :

127.0.0.1:4000/permalink/css/styles.css

here is what my config.yaml looks like (i used // when i needed to hide informations):

# Site settings
title: //
email: //•//.fr
description: > # this means to ignore newlines until "baseurl:"
  //.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://127.0.0.1:4000" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username: jekyll

# Build settings
markdown: kramdown

relative_permalinks: true


sass:
    style: :compressed
    sass_dir: _sass

and the include/head.html:

<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="{{ "/js/jquery.min.js" | prepend: site.baseurl }}"></script>
    <script src="{{ "/js/jquery.scrollzer.min.js" | prepend: site.baseurl }}"></script>
    <script src="{{ "/js/jquery.scrolly.min.js" | prepend: site.baseurl }}"></script>
    <script src="{{ "/js/skel.min.js" | prepend: site.baseurl }}"></script>
    <script src="{{ "/js/skel-layers.min.js" | prepend: site.baseurl }}"></script>
    <script src="{{ "/js/init.js" | prepend: site.baseurl }}"></script>
    <noscript>
      <link rel="stylesheet" href="{{ site.baseurl }}css/skel.css"/>
      <link rel="stylesheet" href="{{ site.baseurl }}css/style.css"/>
      <link rel="stylesheet" href="{{ site.baseurl }}css/style-xlarge.css"/>
    </noscript>
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->

It has no issue to find the javascript files, that's why i think there's something in the href/src file call.

If anyone's got an idea, i'll be happy.

Thanks a lot. Ju

Upvotes: 0

Views: 970

Answers (2)

David Jacquel
David Jacquel

Reputation: 52829

Additionally you can change links to css from

<link rel="stylesheet" href="{{ site.baseurl }}css/skel.css"/>

to

<link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css"/>

Upvotes: 3

julientaq
julientaq

Reputation: 1

found it,

looks like the html5up.com template i used got links inside the javascript.

just changed this in the template init.js :

skel.init({
        reset: 'full',
        breakpoints: {
            global: { href: '{{ site.baseurl }}/css/style.css', containers: '45em', grid: { gutters: ['2em', 0] } },
            xlarge: { media: '(max-width: 1680px)', href: '{{ site.baseurl }}/css/style-xlarge.css' },
            large: { media: '(max-width: 1280px)', href: '{{ site.baseurl }}/css/style-large.css', containers: '42em', grid: { gutters: ['1.5em', 0] }, viewport: { scalable: false } },
            medium: { media: '(max-width: 1024px)', href: '{{ site.baseurl }}/css/style-medium.css', containers: '85%!' },
            small: { media: '(max-width: 736px)', href: '{{ site.baseurl }}/css/style-small.css', containers: '90%!', grid: { gutters: ['1.25em', 0] } },
            xsmall: { media: '(max-width: 480px)', href: '{{ site.baseurl }}/css/style-xsmall.css' }
        },

and add the YAML start to get the file processed by jekyll.

Ju

Upvotes: 0

Related Questions