如何在本地部署包含css,js和背景图像的jekyll网站？

Question

我一直在尝试将我的octopress网站(基于jekyll)加载到我的本地网络.没有服务器,我只想在共享文件夹上本地使用它.

每次我将它部署到本地文件夹时,css和js以及背景图像链接都会被破坏.

rsync,github和heroku等可用选项都需要ssh和密码.这可以在这里找到:http://octopress.org/docs/deploying/

有没有一个rake选项可以帮助解决这个问题？

解决了:

Kikito,非常感谢你的指导.

我刚刚实现了它并分叉了一个git存储库.但是有一个问题.我使用这种技术在Dropbox Public,本地目录和Web主机上托管相同的站点.我不得不添加一个额外的/和斜杠加起来点击链接.这是repo和dropbox链接:

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

一切都按照你的说法工作,但我认为如果你或其他人看一下布局中的局部和链接,你会有更好的主意.

Answer 1

自动方式:

对于css/js文件:

{% 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>

对于其他文件:

在_config.yml中设置

url: http://www.yourdomain.com

添加规范链接元素:

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

在你的一个js文件中,添加:

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);});
    }
});

对于其他方面,使用jQuery来操纵它们.

Answer 2

问题是您使用绝对路径来获取某些资源.如果要在网络中的任何位置部署站点,则需要使这些站点相对.

在我的例子中,我所做的是定义root在需要它的页面/帖子中调用的(可选)设置,指向项目的"相对根".例如,在位于的页面上about/index.html,根将是../,因为只有一个级别"up":

---
title: My Page title
root: "../"
---

目录中更远的页面将需要更多点:../../,../../../等等.根文件夹中的页面(如index.html)不需要root.

然后我使用该设置生成所有路径.

如果我在页面上或发布自己,并且我需要引用本地图像或其他页面,请使用page.root或post.root:

<img src="{{ post.root }}images/happy.png" />
<a href="{{ post.root }}2010/01/01/another_post>Relative link to another post</a>

可以直接创建引用(../images/happy.png)但是在创建站点时这会更好,并且您仍然不确定每个页面的确定路径.

我把所有的css和js都包含在_includes中的一个部分文件中.它创建一个变量root,以确保它适用于页面和帖子:

{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}

<script type="text/javascript" src="{{ root }}js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" />

这就是它.

Answer 3

如果您不得不为特定文件夹生成站点,则使用html <base />标记可能更为直接.使用相对于根文件夹的所有资产路径,将以下内容添加到默认布局:

<base href="{{ site.baseurl }}" />

然后使用jekyll --base-url <folder> <folder>您的哲基尔网站部署到<folder>与baseurl正确设置.

请注意,这也可以使用内置的WEBrick服务器进行更改.从头开始,jekyll --server不要指定自定义--base-url.

更新:正如gimpf在评论中指出的那样,使用锚链接时,这将无法正常工作.这些将指向基本URL而不是当前页面.有一些使用JavaScript的解决方法,例如使用jQuery重写锚点href:

$().ready(function() {
  $("a[href^='\#']").each(function(){
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});