run - Raíz del sitio: Github Pages vs. `jekyll--server`

jekyll with bundle

Question

Cuando ejecuto jekyll --server mi sitio está disponible en http://localhost:4000/ , pero cuando lo implemento en las páginas de proyectos de GitHub, está disponible en http://username.github.com/projectname/ .

Esto significa que no puedo usar URL absolutas cuando me refiero a hojas de estilo y otros recursos. Las URL relativas se rompen cuando se usa el mismo diseño, por ejemplo, index.html y 2012/01/01/happy-new-year.html . ¿Cuál es la forma aceptada / buena de agregar hojas de estilo y otros recursos a un repositorio de páginas de proyectos de GitHub?

Publicación cruzada a GitHub Issues .

Answer 1

Dado que --url en la línea de comandos ha quedado en desuso, existe otra solución.

Digamos que la ruta de tu URL está repo en ti http://name.github.io/repo . Ahora en todos los enlaces usamos URL absolutas como

<link rel="stylesheet" href="/repo/css/syntax.css">

O enlaces

<a href="/repo/license/">License</a>

Todo lo que necesita ahora es agregar --baseurl a la línea de comandos cuando lo ejecute localmente.

jekyll --server --baseurl /repo/

Answer 2

En la última versión de jekyll (1.1.2) encontré que es mejor crear un archivo de configuración separado del original. ¿La unica diferencia? La url (o variable baseurl).

El predeterminado _config.yml tiene:

url: myurl.com

La nueva configuración (llamémosla _preview_config.yml):

url: localhost:4000

Esto reasignará todos tus enlaces absolutos dependiendo de la configuración que uses. Ahora para ejecutar el servidor con el uso de configuración de vista previa:

jekyll serve -w --config _preview_config.yml

Una explicación completa está en mi blog .

Answer 3

Este problema surge porque el directorio raíz es siempre la url del usuario (user.github.com), tanto en las páginas de usuario como de proyecto. Encontré una solución para esto: configure la variable url en el archivo _config.yml en la página del proyecto github:

safe: true
...
url: "http://user.github.io/project-name"

luego, en los diseños, use referencias absolutas, usando la variable site.url para hacer eso:

<link rel="stylesheet" href="{{ site.url }}/css/styles.css">

y ejecuta el servidor usando:

$jekyll --server --url=http://localhost:4000

La opción de línea de comando sobrescribe la configuración en el archivo de configuración en modo local. Con esas configuraciones, obtengo todos los enlaces que apuntan al lugar correcto, ambos alojados en github y en modo local.

ACTUALIZACIÓN: Jekyll 1.0 Desde que Jekyll alcanzó la versión 1.0, el server opciones y url y sus respectivas opciones de línea de comando --server y --url han quedado en desuso. Instrucciones para la nueva versión:

En el archivo _config.yml , agregue la variable baseurl (sin barra diagonal):

baseurl: "http://user.github.io/project-name"

En los diseños o páginas, use referencias absolutas, usando la variable site.baseurl :

<link rel="stylesheet" href="{{ site.baseurl }}/css/styles.css">

y luego, ejecute el servidor local (la opción baseurl está vacía a propósito):

$ jekyll serve --watch --baseurl=

Más detalles sobre los cambios en los docs .

Answer 4

Para responder a su pregunta en breve: agregue baseurl: ''/project-name'' en _config.yml

Para enlaces CSS / JS: {{ site.baseurl }}/css/styles.css

Para todos los demás enlaces: {{ site.baseurl }}{{ post.url }}

La respuesta oficial de Jeykll GH-Pages está aquí: http://jekyllrb.com/docs/github-pages/

Extracto:

Estructura de la URL de la página del proyecto

A veces es bueno tener una vista previa de su sitio Jekyll antes de enviar su rama de gh-pages a GitHub. Sin embargo, la estructura de URL similar a un subdirectorio que usa GitHub para las páginas de proyecto complica la resolución correcta de las URL. Aquí hay un enfoque para utilizar la estructura de la URL de la página del proyecto GitHub ( username.github.io/project-name/ ) mientras se mantiene la capacidad de obtener una vista previa de su sitio Jekyll localmente.

1. En _config.ym l, establezca la opción baseurl en /project-name : observe la barra diagonal baseurl y la ausencia de una barra diagonal final. ej: baseurl: ''/my-proj''

2. Cuando haga referencia a archivos JS o CSS, hágalo así: {{ site.baseurl}}/path/to/css.css : note la barra inmediatamente después de la variable (justo antes de "path").

3. Cuando haga enlaces permanentes o enlaces internos, hágalo así: {{ site.baseurl }}{{ post.url }} - tenga en cuenta que no hay una barra entre las dos variables.

4. Finalmente, si desea obtener una vista previa de su sitio antes de jekyll serve / implementar mediante el jekyll serve , asegúrese de pasar una cadena vacía a la opción --baseurl , para que pueda ver todo en localhost:4000 normalmente (sin /project-name al principio): ej: jekyll serve --baseurl ''''

De esta manera, puede obtener una vista previa de su sitio localmente desde la raíz del sitio en localhost, pero cuando GitHub genere sus páginas desde la rama gh-pages, todas las URL comenzarán con /project-name y se resolverán correctamente.

Answer 5

Uso jekyll-bootstrap e implemento localmente en el puerto 4000, pero la url de mi página de github es user.github.com ... creo que depende de cómo cree el repositorio originalmente. Originalmente, utilicé el generador de páginas automático que ofrece github, que creó el repositorio de manera muy similar a un asistente.

Acabo de seguir los pasos en:

http://jekyllbootstrap.com/

Espero que ayude