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

Posted

技术标签:

【中文标题】如何在本地部署包含 css、js 和背景图像的 jekyll 站点？【英文标题】：How to deploy a jekyll site locally with css, js and background images included? 【发布时间】：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

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

【问题讨论】：

【参考方案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 文件”）用于所有内容，包括 &lt;a&gt; 和 &lt;img&gt;。【参考方案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" />

差不多了。

【讨论】：

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

如果您可以忍受必须为特定文件夹生成站点，则使用 html &lt;base /&gt; 标记可能更直接。使用相对于您的根文件夹的所有资产路径，将以下内容添加到您的默认布局中：

<base href=" site.baseurl " />

然后使用jekyll --base-url &lt;folder&gt; &lt;folder&gt; 将您的jekyll 站点部署到&lt;folder&gt;，并正确设置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。因此，您需要使用&lt;a href="path/to/page#anchor...，而不是使用&lt;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 变量建议，所以：

以上是关于如何在本地部署包含 css、js 和背景图像的 jekyll 站点？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Rails 中从 JQuery 更改 CSS（背景图像）？

如何在 WebView Cocoa / Mac OS 上加载带有图像、js 和 css 的本地 html 文件

HTML5/CSS3 - 如何制作“无尽”旋转背景 - 360 度全景

如何使用 reactJS 和 css 在全屏背景中显示图像？

使用背景图像 css 样式预览多个图像 Vue JS

如何使用外部 css 在 Reactjs 中设置背景图像？