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 set

中

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的（可选）设置，指向＆＃34;相对根＆＃34;该项目。例如，在位于about/index.html的网页上，根将为../，因为只有一个级别＆＃34; up＆＃34;：

---
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>将您的jekyll网站部署到<folder>并正确设置baseurl。

请注意，这也适用于内置WEBrick服务器而无需更改。从jekyll --server开始，不要指定自定义--base-url。

更新：，正如gimpf在评论中指出的那样，这将无法按预期使用锚链接。这些将指向基本URL而不是当前页面。有workarounds使用JavaScript，例如使用jQuery重写anchor hrefs：

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

Answer 4

有issue on the Jekyll's github处理此问题。放_config.yml：

url: "<your domain>"

然后使用{{ site.url }}将返回网址。例如，要从页面标题中引用/css/styles.css文件：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">  
  <head>
      <...>
      <link rel="stylesheet" href="{{ site.url }}/css/style.css" type="text/css" />
      <...>
  </head>
  <body>
     ...
  </body>
</html>

Answer 5

替代答案 -

我对本地托管的静态html有类似的要求，这样我就可以将它分发给没有Web服务器的其他计算机，并通过常规浏览器从文件系统读取。

不是在各个地方摆弄神秘的路径语法 - 虽然可以通过此线程中的其他答案来证明 - 我通过将网站发布到我的localhost选择了一种解决方法：由Jekyll按照惯例提供4000 ，然后使用wget实用程序下载静态网站的静态副本，然后可以使用标准Web浏览器从文件系统打开和导航静态网站。 wget将努力使路径相对于你。

这是我使用的wget命令 -

wget \
 --recursive \
 --no-clobber \
 --page-requisites \
 --html-extension \
 --convert-links \
 --restrict-file-names=windows \
 --domains localhost http://localhost:4000

Answer 6

听起来像你的图像/ JS / CSS的路径需要稍微调整。尝试使用指向生成的文件夹的路径。

例如：

<img src="/_site/images/foobar.jpg" />

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

解决：

6 个答案: