web-dev-qa-db-fra.com

Changez site.url en localhost pendant le développement local de jekyll

Mon modèle de blog jekyll contient des liens vers des ressources et des pages comme ceci:

{{ site.url }}/my-page.html

Cela fonctionne bien dans le déploiement, mais lorsque j'exécute jekyll serve en cours de développement, tous les liens pointent vers la page en direct au lieu de la page de développement.

my-site-url/my-page.html

# But I want this in development
localhost:4000/my-page.html

Existe-t-il un moyen de faire utiliser jekyll un autre {{ site.url }} en développement?

hyperlinkjekyll
71
Heisenberg

Il s'agit d'un problème courant entre différents environnements Jekyll.

Quelques explications

Nous devons comprendre site.url et site.baseurl et dans quelle situation nous en avons besoin. Ces variables n'ont pas le même objectif.

site.url

Par défaut, cette variable n'est utilisée qu'en tête de page pour l'en-tête canonical et le RSS link. Il est également utilisé dans le flux xml pour pointer vers les ressources du site, car le logiciel qui gérera ce flux ne connaît pas les URL des ressources.

Cette variable n'est nécessaire que pour les systèmes externes.

site.baseurl

Cette variable indique le dossier racine de votre site Jekyll. Par défaut, il est défini sur "" (chaîne vide). Cela signifie que votre site Jekyll est à l'origine de http://example.com.

Si votre site Jekyll vit dans http://example.com/blog, vous devez définir site.baseurl à /blog (notez la barre oblique). Cela permettra aux ressources (css, js) de se charger correctement.

Voyez comment les actifs sont chargés dans votre tête:

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

cela peut aussi être:

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

Travailler dans des environnements différents

Vous devez maintenant tester votre site localement et le déployer en production. Parfois, le baseurl est différent et le jekyll build peut ne pas fonctionner par défaut dans l'un de ces environnements.

Ici, nous avons deux solutions:

Utilisation jekyll serve

Imaginons que votre site réside dans un référentiel github et soit servi à https://username.github.io/myProject.

Vous pouvez configurer le baseurl sur /myProject. et testez votre site localement avec jekyll serve, votre site sera diffusé à http://127.0.0.1:4000/myProject/

Utiliser plusieurs fichiers de configuration

Si, pour une raison ou une autre, vous ne pouvez pas utiliser jekyll serve, vous pouvez définir un fichier de configuration pour l'environnement et jekyll build selon l'endroit où vous déployez.

Supposons que le site local soit desservi à http://localhost et le site de production desservi à https://username.github.io/myProject.

Nous quittons le _config.yml avec url: https://username.github.io et baseurl: /myProject

Nous créons un nouveau _config_dev.yml avec seulement url: https://localhost et baseurl: ""

Maintenant pour tester localement:

jekyll build --config _config.yml,_config_dev.yml

ou

jekyll build --config _config.yml,_config_dev.yml --watch

Lorsque poussé sur la production, le jekyll build la commande utilisera la valeur par défaut _config.yml.

109
David Jacquel