Как развернуть сайт Jekyll локально с включенными css, js и фоновыми изображениями?

Question

Я пытался загрузить свой сайт осьминогов (на основе jekyll) в мою локальную сеть. Нет сервера, я просто хочу, чтобы он был доступен локально в общей папке.

Каждый раз, когда я развертываю его в локальной папке, ссылки css, js и background image не работают.

Доступные опции, такие как rsync, github и heroku, требуют ssh и пароли. Это можно найти здесь: http://octopress.org/docs/deploying/

Есть ли вариант рейка, который помогает с этим?

РЕШИТЬ:

Kikito, Большое спасибо за руководство.

Я только что реализовал это и раздвоил репозиторий git. Однако есть одна проблема. Я использовал эту технику для размещения одного и того же сайта в Dropbox Public, локального каталога и веб-хостинга. Я должен был добавить дополнительные /, и косые черты складываются, когда ссылки нажимаются. Вот ссылка на репозиторий и дропбокс:

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, корень будет ../, поскольку существует только один уровень «вверх»:

---
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, включенные в один частичный файл внутри _include.Он создает переменную с именем 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 вместо текущей страницы. Существует обходных путей с использованием JavaScript, например переписать якорные ссылки с помощью jQuery:

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

Answer 4

Существует проблема на github Jekyll , которая решает эту проблему.Если поставить _config.yml:

url: "<your domain>"

, а затем с помощью {{ site.url }} вернем 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, чтобы я мог распространять его на другие компьютеры без веб-сервера и читать его из файловой системы с помощью обычного браузера.

Вместо того, чтобы возиться с загадочным синтаксисом пути в разных местах - хотя это может быть подтверждено другими ответами в этой теме - я вместо этого выбрал обходной путь, опубликовав сайт на своем локальном хосте: 4000, обслуживаемый Jekyll, как обычно , а затем с помощью утилиты wget загрузил статическую копию статического веб-сайта, которую затем можно было открыть и перейти из файловой системы с помощью стандартного веб-браузера. 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" />