How to Deploy a Jekyll Site Locally with CSS, Js and Background Images Included

How to deploy a jekyll site locally with css, js and background images included?

Automatic way:

for css/js file:

{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

<link href="{{ relative }}css/main.css" rel="stylesheet" />
<script src="{{ relative }}scripts/jquery.js"></script>

for other files:

in _config.yml set

url: http://www.yourdomain.com

add canonical link element:

<link rel="canonical" href="{{ site.url }}{{ page.url }}" />

in one of your js file, add:

var relative = null;
if (location.protocol==='file:') {
    relative = Array($('link[rel="canonical"]').attr('href').match(/\//g).length-2).join('../');
    if (relative == '') relative = './';
}
function to_relative(link, index) {
    if (!relative) return link;
    var hash = link ? link.match(/#.*$/) : null;
    if (hash) link = link.replace(/#.*$/, '');
    return link?(link.replace(/^\//, relative)+(index?(link.substr(-1)=='/'?'index.html':''):'')+(hash?hash[0]:'')):null;
}

$(function(){
    if (relative) {
        $('a').attr('href', function(a,b){return to_relative(b, true);});
        $('img').attr('src', function(a,b){return to_relative(b, false);});
    }
});

for other aspects, use jQuery to manipulate them.

Jekyll ignores css rules

Your site is served from a development web server when you run jekyll serve. I'm assuming by click index.html, you mean you are opening the file in your web browser - this won't work well with the absolute URLs Jekyll creates.

You can see the difference in the URL bar: one will say http:// and the other will be file://, a URL like /css/main.css will likely only work through the web server (i.e. jekyll serve).

Assuming you are deploying the site to a web server, and it works with jekyll serve, I'd guess it's fine. I can't be sure, but in any case, You should probably back up what's on the server currently though so you can restore it.

Jekyll creates absolute paths on some machines

Update with OP's solution

The problem was solved by using relative_url on the images [2]

[2] https://jekyllrb.com/docs/liquid/filters/

Original Post

In my past Jekyll project[1], we were able to use jekyll serve on various platforms without issues. It is possible we avoided the issue you are seeing by used relative [1] on all of our image URLs. Here is an example

<img id="myImage" src="{{ "/img/myImage.png" | relative }}" alt="My Image">

I haven't tried recreating your issue, so I cannot confirm if relative is what kept our Jekyll project cross platform compatible.

[1] https://github.com/OpenLiberty/openliberty.io

How to make automatic prefixes for relative urls calling css assets from any (sub)folder?

Did you have issues with the accepted answer to the question you linked to? That solution works for me.

In the head of my layout file I include the code:

{% capture lvl %}{{ page.url | append:'index.html' | split:'/' | size }}{% endcapture %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

Then my resources can be set up as:

<link rel="stylesheet" href="{{ relative }}assets/css/combined.min.css">

This results in the correct number of ../ parts being added. The "assets" directory in this example is in the root of my site.

Relative Links in Jekyll

A relative link like /folder/file.html is relative to a host, like http://host.tld.

host + relative path = http://host.tld/folder/file.html.

As Jekyll serve sets the host's root folder at file:///C:/somePath/_site/ this finally resolve to

root folder + relative path = file:///C:/somePath/_site/folder/file.html and this is the right path.

Here you're talking about the file protocol (file://), the "host" here is file:///C: and the relative path /2013/04/12/FirstVisit.html is resolved to

host + relative path = file:///C:/2013/04/12/FirstVisit.html which leads to a page not found.

The real problem here is that you're talking about a page opened from the file explorer. You've clicked on a html page which is opened using the file protocol, not the http protocol.

Make sure that you open your site with http://localhost:4000 by pasting this url in your browser, not by clicking on a page in the file explorer.

Bootstrap CSS location and github pages

You probably have solved the issue, but to future readers: Yes, the solution is to include direct path due to github project pages' url structure. The following excerpt is taken out from Jekyll docs.

Project Page URL Structure

Sometimes it’s nice to preview your Jekyll site before you push your
gh-pages branch to GitHub. However, the subdirectory-like URL
structure GitHub uses for Project Pages complicates the proper
resolution of URLs. Here is an approach to utilizing the GitHub
Project Page URL structure (username.github.io/project-name/) whilst
maintaining the ability to preview your Jekyll site locally.

1. In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.
2. When referencing JS or CSS files, do it like this: {{ site.baseurl }}/path/to/css.css – note the slash immediately following the variable
   (just before “path”).
3. When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between
   the two variables.
4. Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty
   string to the --baseurl option, so that you can view everything at
   localhost:4000 normally (without /project-name at the beginning):
   jekyll serve --baseurl ''

New Jekyll Page not rendering default css.stylesheet : Only index.html works fine

The issue is in how you are including the CSS files in your head.html include. Lines #12 and #15:

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">

They are using a relative path, which means that when you go to a page that is in a sub-folder of your site, like werkbaar.net/about/, the browser expects the css files to be located at werkbaar.net/about/css/bootstrap.min.css and werkbaar.net/about/css/style.css respectively.

An easy way to fix this, is to start with a / when declaring your CSS files, so that you tell the browser to start from the root of your website.

e.g.

<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">

---

Related Topics