如何在本地部署包含 css、js 和背景图像的 jekyll 站点？答案

【问题标题】：How to deploy a jekyll site locally with css, js and background images included?如何在本地部署包含 css、js 和背景图像的 jekyll 站点？
【发布时间】：2011-11-02 17:59:38
【问题描述】：

我一直在尝试将我的 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

一切都如你所说，但我认为如果你或其他人看一眼布局中的部分和链接，你会有更好的主意。

【问题讨论】：

标签： css image static publish jekyll

【解决方案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来操作它们。

【讨论】：

哇。这是令人难以置信。我能够将您的第一个技巧（“用于 css/js 文件”）用于所有内容，包括 <a> 和 <img>。

【解决方案2】：

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

就我而言，我所做的是在需要它的页面/帖子中定义一个名为root 的（可选）设置，指向项目的“相对根”。例如，在位于about/index.html 的页面上，根将是../，因为只有一层“向上”：

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

目录中较远的页面将需要更多点：../../、../../../ 等等。根文件夹中的页面（如 index.html）不需要根目录。

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

如果我在页面上或自己发帖，并且需要参考本地图片或其他页面，请使用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" />

差不多了。

【讨论】：

可能值得一提的是<script> 不是一个自闭合标签。复制粘贴示例，<script /> 之后的所有内容都消失了。是的，我多次犯过同样的错误，但这次我认为这是一个 jekyll 错误导致输出失败；）

【解决方案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重写锚href：

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

【讨论】：

请注意，使用这个时，锚链接也是相对于base-href。因此，您需要使用<a href="path/to/page#anchor...，而不是使用<a href="#anchor"...。

【解决方案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>

【讨论】：

为我工作得非常好！我一直想知道如何设置site.url。

【解决方案5】：

替代答案 -

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

我没有在各个地方摆弄神秘的路径语法——尽管可以通过这个线程中的其他答案来证明这一点——我选择了一种解决方法，将网站发布到我的 localhost:4000，由 Jekyll 照常提供，然后使用wget 实用程序下载静态网站的静态副本，然后可以使用标准网络浏览器从文件系统打开和导航。 wget 将努力为您创建相对路径。

这是我使用的wget 命令 -

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

【讨论】：

【解决方案6】：

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

例如：

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

【讨论】：

那种工作，除了一些链接仍然以反斜杠结束，我不得不调整是否有办法将所有内容设置为相关，以便我可以在本地网络上的任何位置复制文件夹?
我最终使用了 kikitos {{ root }} 变量建议，所以：