hyperlink permalink Ändern Sie site.url während der jekyll lokalen Entwicklung zu localhost



{% for post in site posts %} (1)

Meine jekyll Blog Vorlage hat Links zu Ressourcen und Seiten wie folgt:

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

Dies funktioniert gut in der Bereitstellung, aber wenn ich jekyll serve in der Entwicklung verwende, zeigen alle Links auf die Live-Seite statt auf die Entwicklungsseite.

my-site-url/my-page.html

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

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


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

Einige Erklärungen

Wir müssen site.url und site.baseurl verstehen und in welcher Situation wir sie brauchen. Diese Variablen dienen nicht dem gleichen Zweck.

site.url

Standardmäßig wird diese Variable nur in Seitenkopf für den canonical Header und den 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 zeigt den Stammordner Ihrer Jekyll-Site an. Standardmäßig ist es auf "" (leere Zeichenfolge) eingestellt. Das bedeutet, dass Ihre Jekyll-Site der Ursprung von http://example.com .

Wenn Ihre Jekyll-Site in http://example.com/blog site.baseurl , müssen Sie site.baseurl auf /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 die baseurl anders und der jekyll build möglicherweise nicht in einer dieser Umgebungen.

Hier haben wir zwei Lösungen:

Verwenden Sie jekyll serve

Stellen wir uns vor, dass Ihre Website in einem GitHub-Repository gespeichert ist und unter https://username.github.io/myProject bereitgestellt wird.

Sie können die baseurl auf /myProject . und testen Sie Ihre Website lokal mit jekyll serve , Ihre Website wird unter http://127.0.0.1:4000/myProject/ serviert.

Verwenden Sie mehrere Konfigurationsdateien

Wenn Sie jekyll serve aus dem einen oder anderen Grund nicht verwenden jekyll serve , können Sie eine Konfigurationsdatei für die Umgebung und für jekyll build je nachdem, wo Sie sie jekyll build .

Angenommen, die lokale Website wird unter http://localhost und die Produktionsstelle unter https://username.github.io/myProject .

Wir verlassen die _config.yml mit url: https://username.github.io und baseurl: /myProject

Wir erstellen ein neues _config_dev.yml mit nur url: https://localhost und baseurl: ""

Jetzt lokal testen:

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

oder

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

Bei der Produktion wird der Befehl jekyll build den Standard _config.yml .