¿Cómo implementar un sitio jekyll localmente con css, js e imágenes de fondo incluidas?

He estado tratando de cargar mi sitio octopress (basado en jekyll) a mi red local. No hay servidor, solo quiero que esté disponible localmente en una carpeta compartida.

Cada vez que lo despliego a una carpeta local, los enlaces css y js y la imagen de fondo se rompen.

Las opciones disponibles como rsync, github y heroku requieren ssh y contraseñas. Esto se puede encontrar aquí: http://octopress.org/docs/deploying/

¿ Hay una opción de rake que ayude con ¿esto?

RESUELTO:

Kikito, muchas gracias por la guía.

Acabo implementado y bifurcada un repositorio de git. Sin embargo, hay un problema. He utilizado esta técnica para alojar el mismo sitio en Dropbox Public, un directorio local y un servidor web. Tuve que agregar un extra / y las barras se suman a medida que se hace clic en los enlaces. Aquí está el repo y el enlace de dropbox:

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

Todo funciona como usted dice, pero creo que si usted u otros miran los parciales y los enlaces en los diseños, tendrá una mejor idea.

Author: emlai, 2011-11-02
Source

6 answers

Forma automática:

Para el archivo 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>

Para otros archivos:

En _config.yml set

url: http://www.yourdomain.com

Añadir elemento de enlace canónico: 

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

En uno de sus archivos js, agregue: 

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

Para otros aspectos, utilice jQuery para manipularlos.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-15 08:37:41

El problema es que estás usando rutas absolutas para llegar a algunos de tus recursos. Si desea implementar el sitio en cualquier lugar de la red, debe hacer que sean relativos.

En mi caso, lo que hago es definir un ajuste (opcional) llamado root en las páginas/publicaciones que lo necesitan, apuntando a la "raíz relativa" del proyecto. Por ejemplo, en una página ubicada en about/index.html, la raíz será ../, ya que solo hay un nivel "arriba":

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

Páginas más lejanas en el los directorios necesitarán más puntos: ../../, ../../../, y así sucesivamente. Páginas en la carpeta raíz (como index.html) no necesita una raíz.

Luego utilizo esa configuración para generar todas las rutas.

Si estoy en la página o publicación en sí, y necesito hacer referencia a una imagen local u otra página, use page.root o post.root: 

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

Es posible hacer la referencia directamente (../images/happy.png), pero esto funciona mejor cuando está creando el sitio, y todavía no está seguro de las rutas definitivas de cada página.

Tengo todos los css y js incluidos en un archivo parcial dentro de _includes. Crea una variable llamada root para asegurarse de que funciona tanto con páginas como con publicaciones:

{% 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" />

Eso es más o menos todo.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-12 17:57:46

Si puedes vivir con tener que generar tu sitio para una carpeta específica, usar la etiqueta html <base /> puede ser más sencillo. Con todas las rutas de acceso de activos relativas a su carpeta raíz, agregue lo siguiente a su diseño predeterminado: 

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

Luego use el jekyll --base-url <folder> <folder> para desplegar su sitio jekyll a <folder> con el baseurl configurado correctamente.

Tenga en cuenta que esto también funciona sin cambios con el servidor WEBrick incorporado. Comience con jekyll --server y no especifique un personalizado --base-url.

Actualización: como gimpf señala en el comentario, esto no funcionará como se espera con los enlaces de anclaje. Estos apuntarán a la URL base en lugar de a la página actual. Hay soluciones usando JavaScript, por ejemplo, reescribir hrefs de anclaje con 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-24 00:07:47

Hay un problema en el github de Jekyll que trata de esto. Poniendo _config.yml: 

url: "<your domain>"

Y luego usando {{ site.url }} devolverá la url. Así, por ejemplo, para referirse al archivo /css/styles.css desde el encabezado de una página:

<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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-05 08:06:30

Respuesta alternativa -

Tenía un requisito similar de un html estático alojado localmente para poder distribuirlo a otros equipos sin un servidor web y hacer que lo leyeran desde el sistema de archivos mediante un navegador normal.

En lugar de jugar con la sintaxis de ruta arcana en varios lugares, aunque se puede hacer evidenciado por otras respuestas en este hilo, elegí una solución alternativa publicando el sitio en mi localhost: 4000 servido por Jekyll como de costumbre, y luego se utilizó la utilidad wget para descargar una copia estática del sitio web estático que luego se podía abrir y navegar desde el sistema de archivos con un navegador web estándar. wget hará el duro trabajo de hacer que los caminos sean relativos para ti.

Este es el comando wget que uso - 

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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-12 18:32:45

Parece que la ruta a tus images/JS/CSS necesitará un ligero ajuste. Intente usar una ruta que apunte a la carpeta generada.

Por ejemplo: 

<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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-08 16:24:17