Ändern Sie site.url während der lokalen Entwicklung von jekyll in localhost

75

Meine Jekyll-Blog-Vorlage enthält Links zu Ressourcen und Seiten wie folgt:

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

Dies funktioniert gut in der Bereitstellung, aber wenn ich jekyll servein der Entwicklung laufe , verweisen alle Links auf die Live-Seite anstelle der Entwicklungsseite.

my-site-url/my-page.html

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

Gibt es eine Möglichkeit, Jekyll {{ site.url }}in der Entwicklung anders zu verwenden?

Heisenberg
quelle

Antworten:

122

Dies ist ein häufiges Problem zwischen verschiedenen Jekyll-Umgebungen.

Einige Erklärungen

Wir müssen verstehen site.urlund site.baseurlin welcher Situation wir sie brauchen. Diese Variablen dienen nicht demselben Zweck.

site.url

Standardmäßig wird diese Variable nur im Seitenkopf für den canonicalHeader und den verwendet RSS link. Es wird auch im XML-Feed verwendet, um auf Site-Ressourcen zu verweisen, da die Software, die diesen Feed verwaltet, die URLs der Ressource nicht kennt.

Diese Variable ist nur für externe Systeme erforderlich.

site.baseurl

Diese Variable gibt den Stammordner Ihrer Jekyll-Site an. Standardmäßig ist es auf ""(leere Zeichenfolge) eingestellt. Das bedeutet, dass Ihre Jekyll-Site die Wurzel von ist http://example.com.

Wenn Ihr Jekyll Website Leben in http://example.com/blogSie setzen müssen , site.baseurlum /blog( beachten Sie den Schrägstrich ). Dadurch können Assets (CSS, JS) korrekt geladen werden.

Sehen Sie, wie Assets in Ihren Kopf geladen werden:

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

das kann auch sein:

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

Arbeiten in verschiedenen Umgebungen

Jetzt müssen Sie Ihre Site lokal testen und in der Produktion bereitstellen. Manchmal ist das baseurlanders und das jekyll buildfunktioniert in einer dieser Umgebungen möglicherweise nicht sofort.

Hier haben wir zwei Lösungen:

Verwenden jekyll serve

Stellen wir uns vor, Ihre Site befindet sich in einem Github-Repository und wird dort bereitgestellt https://username.github.io/myProject.

Sie können Setup die baseurlzu /myProject. und testen Sie Ihre Site lokal mit jekyll serve, Ihre Site wird unter bereitgestellthttp://127.0.0.1:4000/myProject/

Verwenden Sie mehrere Konfigurationsdateien

Wenn Sie aus dem einen oder anderen Grund nicht verwenden können jekyll serve, können Sie eine Konfigurationsdatei für beide Umgebungen und jekyll buildje nach Bereitstellungsort festlegen .

Nehmen wir an, wir haben den lokalen Standort http://localhostund den Produktionsstandort https://username.github.io/myProject.

Wir verlassen das _config.ymlmit url: https://username.github.ioundbaseurl: /myProject

Wir erstellen eine neue _config_dev.ymlmit nur url: https://localhostundbaseurl: ""

Jetzt vor Ort testen:

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

oder

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

Wenn die Produktion jekyll buildaktiviert ist , verwendet der Befehl die Standardeinstellung _config.yml.

David Jacquel
quelle
1
Aus bestimmten Gründen wird das von mir heruntergeladene vorgefertigte Jekyll-Thema verwendet, site.urlum den CSS / JS-Ressourcen vorangestellt zu werden. Ist das eine schlechte Idee? Sollte ich alles ändern site.baseurlund site.urlnur für kanonische Links und XML-Feeds verwenden?
Heisenberg
2
Natürlich ! {{site.baseurl}}/assetfür Vermögenswerte und {{site.url}}/{{site.baseurl}}/ressourcefür externe Bedürfnisse. Und vielleicht können Sie meine Antwort genehmigen.
David Jacquel
1
Vielleicht {{ site.url }}{{ site.baseurl }}stattdessen da site.baseurlschon ein vorangestellter Schrägstrich?
Heisenberg
Du hast absolut recht {{ site.url }}{{ site.baseurl }}.
David Jacquel
Aber warum wird keine /blogURL angehängt? Ich bekomme immer noch die kaputte URL des Beitrags wie /2014/12/12/mypost-name. Es hat tatsächlich den Link gebrochen, da ich alles im Blog-Ordner habe.
Fizer Khan