Jak wdrożyć witrynę jekyll lokalnie z css, js i obrazów tła włączone?

Próbowałem załadować moją stronę octopress (opartą na jekyll) do mojej sieci lokalnej. Nie ma serwera, chcę tylko, aby był dostępny lokalnie w folderze udostępnionym.

Za każdym razem, gdy wdrażam go do folderu lokalnego, linki css i js oraz obrazy tła są uszkodzone.

Dostępne opcje, takie jak rsync, github i heroku, wymagają ssh i haseł. Można to znaleźć tutaj: http://octopress.org/docs/deploying/

Czy istnieje opcja rake, która pomaga w to?

Rozwiązany:

Kikito, Dziękuję bardzo za wskazówki.

Zaimplementowałem go i rozwidliłem repozytorium git. Jest jednak jeden problem. Użyłem tej techniki do hostowania tej samej witryny w Dropbox Public, katalogu lokalnym i hostingu internetowego. Musiałem dodać dodatkowy / i ukośniki dodają się jak linki są klikane. Oto link repo i dropbox:

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

Wszystko działa jak mówisz, ale myślę, że jeśli ty lub inni spojrzysz na częściowe i linki w układach, będziesz miał lepszy pomysł.

Author: emlai, 2011-11-02
Source

6 answers

Sposób automatyczny:

Dla pliku 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>

Inne pliki:

W _config.yml set 

url: http://www.yourdomain.com

Dodaj canonical link element: 

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

W jednym z plików js dodaj: 

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

Dla innych aspektów, użyj jQuery do manipulowania nimi.

 20
Author: caiguanhao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-15 08:37:41

Problem polega na tym, że używasz ścieżek absolutnych, aby dostać się do niektórych swoich zasobów. Jeśli chcesz wdrożyć witrynę w dowolnym miejscu w sieci, musisz uczynić je względnymi.

W moim przypadku to, co robię, to definiowanie (opcjonalne) ustawienia o nazwie root na stronach/postach, które go potrzebują, wskazując na "względny root" projektu. Na przykład, na stronie znajdującej się w about/index.html, root będzie ../, ponieważ istnieje tylko jeden poziom "w górę": 

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

Strony dalej w katalogi będą potrzebować więcej kropek: ../../, ../../../, i tak dalej. Strony w katalogu głównym (np. indeks.html) nie potrzebują roota.

Następnie używam tego ustawienia do generowania wszystkich ścieżek.

Jeśli jestem na stronie lub samym poście i muszę odwołać się do lokalnego obrazu lub innej strony, użyj page.root lub post.root: 

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

Możliwe jest bezpośrednie odniesienie (../images/happy.png), ale działa to lepiej, gdy tworzysz witrynę, a nadal nie jesteś pewien ostatecznych ścieżek każdej strony.

Mam wszystkie css i js zawarte w jednym pliku częściowym w _includes. Tworzy zmienną o nazwie root, aby upewnić się, że działa zarówno ze stronami, jak i postami: 

{% 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" />
To tyle.
 16
Author: kikito,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-12 17:57:46

Jeśli możesz żyć z koniecznością generowania witryny dla określonego folderu, użycie znacznika html <base /> może być prostsze. W przypadku wszystkich ścieżek zasobów względem folderu głównego Dodaj następujący układ do domyślnego układu: 

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

Następnie użyj jekyll --base-url <folder> <folder>, aby wdrożyć witrynę jekyll do <folder> z baseurl skonfigurować poprawnie.

Zauważ, że działa to również bez zmian z wbudowanym serwerem WEBrick. Zacznij od jekyll --server i nie określaj niestandardowego --base-url.

Update: jak wskazuje gimpf w komentarzu, nie będzie to działać zgodnie z oczekiwaniami w przypadku linków kotwiących. Będą one wskazywać na podstawowy adres URL zamiast bieżącej strony. Istniejąobejścia przy użyciu JavaScript, np. przepisać hrefs kotwicy z jQuery: 

$().ready(function() {
  $("a[href^='\#']").each(function(){
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});
 5
Author: kynan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-24 00:07:47

Jestproblem na Jekyll ' s github , który zajmuje się tym. Wstawianie _config.yml: 

url: "<your domain>"

A następnie użycie {{ site.url }} zwróci adres url. Na przykład, aby odwołać się do pliku /css/styles.css z nagłówka strony: 

<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>
 3
Author: ivotron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-05 08:06:30

Alternatywna ODPOWIEDŹ-

Miałem podobny wymóg lokalnie hostowanego statycznego html, aby móc go rozpowszechniać na inne komputery bez serwera WWW i odczytywać z systemu plików przez zwykłą przeglądarkę.

Zamiast bawić się tajemną składnią ścieżek w różnych miejscach-chociaż można to zrobić za pomocą innych odpowiedzi w tym wątku-zamiast tego wybrałem obejście, publikując stronę na moim localhost:4000 serwowane przez Jekylla jak zwykle, a następnie użyto narzędzia wget do pobrania statycznej kopii statycznej strony internetowej, którą można było otworzyć i nawigować z systemu plików za pomocą standardowej przeglądarki internetowej. wget wykona ciężką pracę, aby ścieżki były dla Ciebie względne.

To jest wget Komenda, której używam - 

wget \
 --recursive \
 --no-clobber \
 --page-requisites \
 --html-extension \
 --convert-links \
 --restrict-file-names=windows \
 --domains localhost http://localhost:4000
 2
Author: John K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-12 18:32:45

Wygląda na to, że ścieżka do obrazów / JS / CSS będzie wymagała niewielkiej korekty. Spróbuj użyć ścieżki, która wskazuje na wygenerowany folder.

Na przykład: 

<img src="/_site/images/foobar.jpg" />
 -1
Author: rsturim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-08 16:24:17