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

Question

I've been trying to load my octopress site (based on jekyll) to my local network. There is no server, I just want it available locally on a shared folder.

Every time i deploy it to a local folder the css and js and background image links are broken.

The available options such as rsync, github and heroku all require ssh's and passwords. This can be found here: http://octopress.org/docs/deploying/

Is there a rake option that helps with this?

SOLVED:

Kikito, Thank you very much for the guidance.

I just implemented it and forked a git repository. There is one problem, though. I have used this technique to host the same site on Dropbox Public, a local directory and a web host. I had to add an extra / and the slashes add up as links are clicked. Here is the repo and dropbox link:

https://github.com/originalsurfmex/jekyll-relative-bootstrap

Everything works as you say, but I think that if you or others glance at the partials and links in the layouts you will have a better idea.

Answer 1

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.