Einführung
Jekyll ist ein statischer Site-Generator, der einige der Vorteile eines Content Management Systems (CMS) bietet und gleichzeitig die Leistungs- und Sicherheitsprobleme vermeidet, die durch solche datenbankgesteuerten Sites verursacht werden. Es ist "blog-aware" mit speziellen Funktionen für den Umgang mit datumsorganisierten Inhalten, obwohl seine Nützlichkeit nicht auf Blogging-Sites beschränkt ist. Jekyll eignet sich gut für Personen, die offline arbeiten müssen, einen kompakten Editor anstelle von Webformularen für die Pflege von Inhalten bevorzugen und die Versionskontrolle verwenden möchten, um Änderungen an ihrer Website nachzuverfolgen.
In diesem Tutorial konzentrieren wir uns darauf, wie Jekyll mit URLs und Verknüpfungen umgeht, da das Ändern von URLs die Verknüpfung anderer mit unseren Seiten sowie die Verknüpfungen im Inhalt unserer eigenen Website unterbricht. URLs sind für das Auffinden und Verwenden von Websites von entscheidender Bedeutung und müssen berücksichtigt werden, bevor eine Website zum ersten Mal veröffentlicht wird.
Wir werden uns ansehen, wie Jekyll standardmäßig URLs erstellt, und zeigen, wie das Muster für eine einzelne Datei oder die gesamte Site geändert wird. Dann schauen wir uns an, wie wir auf Seiten in unserem Inhalt verlinken können. Schließlich werden wir die Site zum Testen bereitstellen.
Voraussetzungen
Um diesem Tutorial zu folgen, müssen Sie die vorherigen Handbücher vervollständigen:
Wenn Sie diese abgeschlossen haben, können Sie beginnen.
Die Dateistruktur der statischen Site
InPart 2 of this series haben wir mit dem Befehljekyll new ein Gerüst erstellt und uns darauf konzentriert, wie die resultierende Site in einem Webbrowser aussieht. Schauen wir uns nun die Dateistruktur an, die bei der Erstellung der statischen Site durch Jekyll erstellt wurde.
[.note] #Note: Wenn Sie Teil 2 dieser Serie befolgt haben, sollten Sie über das Verzeichnis für zusätzliche Assets und die Kontaktseite verfügen. Wenn Sie dies nicht getan haben oder durch Hinzufügen weiterer Seiten experimentiert haben, sieht Ihre Struktur möglicherweise etwas anders aus.
#
Das Verzeichnis_site und alle darunter hervorgehobenen Inhalte darunter bilden die statische Site.
Inhalt von ~ / www nach Teil 2
.
├── 404.html
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2017-09-04-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── postcard.jpg
├── contact.html
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2017
└── 09
└── 04
└── welcome-to-jekyll.htmlIm Gegensatz zu datenbankgestützten Websites sind URLs für eine statische Website wörtliche Darstellungen der Verzeichnisstruktur auf der Festplatte. Jekyll wandelte die Kategorien des Posts in Verzeichnisse um und explodierte das Datum in die Dateistruktur, ein Muster, das für viele Blogs üblich ist, sodass das endgültige URL-Muster für diesen Post/category1/category2/YYYY/MM/DD/words-in-title.html und die Literal-URLhttp://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.htmllautet. s.
Das Gerüst bietet keine dynamischen Indexseiten für diese Verzeichnisse. Wenn ein Benutzer einen Teil der URL löscht, um zu versuchen, alle Beiträge einer bestimmten Kategorie, eines Jahres, eines Monats oder eines Tages zu finden, geschieht dies auf zweierlei Weise. Wenn der Webserver die automatische Verzeichnisindizierung zulässt, werden Datei- und Verzeichnisinformationen angezeigt:
Im zweiten Fall wird einem Benutzer der Zugriff verweigert, wenn der Administrator der Produktionssite die Verzeichnislisten auf dem Server deaktiviert hat:
Die kategorie- und datumsbasierte Struktur ist ein gängiges Muster für Blog-URLs. Wie Sie sich jedoch für die Strukturierung Ihrer URLs entscheiden, hängt von den Anforderungen Ihrer jeweiligen Website ab.
Wenn Sie die Standardeinstellung ändern möchten, ist es in Jekyll recht einfach, URLs zu erstellen. Es ist hilfreich, sich vor der erstmaligen Veröffentlichung der Website einige Gedanken zu machen, da Änderungen an den URL-Mustern Auswirkungen darauf haben, wie effektiv Nutzer den Inhalt mit Suchmaschinen finden können, und sich auf Links auswirken, die andere auf die Website setzen.
Verstehen, wie URLs gesteuert werden
Jekylls System zum Erstellen von URLs ist sowohl flexibel als auch leistungsstark. Sie können davon beeinflusst werden, wo und wie Sie die Quelldateien benennen und speichern sowie dynamisch mit einem bestimmten Wert oder einem allgemeineren Muster überschrieben werden.
Seitenvorgaben
Wenn wir eine Seite im Stammverzeichnis unserer Website erstellen, wie wir es für unsere Kontaktseite getan haben, wird der Dateinamecontact.md incontact.html umgewandelt, und die resultierende URL befindet sich ebenfalls direkt im Stammverzeichnis des Dokuments: http://203.0.113.0:4000/contact.html. Wenn wir es in einem oder mehreren Unterverzeichnissen ablegen, werden diese ebenfalls Teil der URL. Wenn wir beispielsweise die Seitecontact.md in ein Verzeichnis namensmain legen, wird die URL zuhttp://203.0.113.0:4000/main/contact.html.
Standardeinstellungen hinzufügen
Beiträge funktionieren anders als Seiten. Erstens dürfen sie Kategorien haben, und diese Kategorien werden zu Verzeichnissen auf der statischen Site sowie zu einem Teil der URL. Das Standard-Post-Pattern ist eine Verkettung seiner Front Matter:
title: "Welcome to Jekyll!"
date: 2017-09-04 03:36:31 +0000
categories: jekyll updateIm Verzeichnis_site lautet das Unterverzeichnisjekyll/update/2017/09/04/welcome-to-jekyll.html, folgt dem Muster/:categories/:year/:month/:day/:title und führt zur URLhttp://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html.
Wenn wir eine Kategorie aus dem Front Matter entfernen würden, würde sich die Verzeichnisstruktur beim nächsten Generieren der Site ändern und wäre nicht mehr Teil der URL.
Die Standardeinstellungen für Seite und Beitrag können auf zwei Arten überschrieben werden.
Permalinks
Durch das Definieren eines Permalinks in der vorderen Angelegenheit einer einzelnen Seite wird die Standardeinstellung für Seiten und Beiträge überschrieben, sodass wir genau angeben können, wie der Link pro Datei aussehen soll. Dies wurde im Standardinhalt der Info-Seite festgelegt, wobei der Permalink-Wert/about/ zu der URLhttp://203.0.113.0:4000/about/ führte, die wiederum auf der Festplatte alsabout/index.html vorhanden ist
Permalink Patterns
Mit Jekyll können Sie das gesamte Standardmuster in_config.yml neu definieren. Dies betrifft sowohl Seiten als auch Beiträge mit einem wichtigen Unterschied: Beiträge haben Zugriff auf Kategorien sowie Datums- und Zeitelemente aus dem Front Matter, Seiten jedoch nicht. Seiten-URLs folgen dem Muster, wobei postspezifische Elemente ordnungsgemäß weggelassen werden.
Um das Außerkraftsetzen des Permalink-Musters in Aktion zu sehen, erstellen wir ein Muster, das die Kategorien für Posts beibehält, die Datumselemente auslässt und mit dem Post- oder Seitentitel endet:
nano ~/www/_config.ymlFügen Sie den folgenden Wert am Ende der Datei hinzu:
~/www/_config.yml
. . .
permalink: /:categories/:title/Um Änderungen beim Bearbeiten der Konfigurationsdatei zu sehen, müssen wir den Webserver mitCTRL-C stoppen und anschließend neu starten:
jekyll serve --host=203.0.113.0Auf der Festplatte hat sich die Dateistruktur geändert:
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── css
│ └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│ ├── 2017-09-04-welcome-to-jekyll.markdown
│ └── 2017-09-04-link-test.md
└── _site
├── about
│ └── index.html
├── assets
│ └── postcard.jpg
├── contact # originally `contact.html`
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── Gemfile
├── Gemfile.lock
└── index.html
└── jekyll
└── update
└── welcome-to-jekyll
└── index.htmlDiese Änderungen in der Dateistruktur führen zu Änderungen in den URLs. Die Info-Seite befindet sich immer noch bei/about/, da der Permalink von Anfang an für die einzelne Datei festgelegt wurde. Die Kontaktseite wurde von/contact.html in/contact/ geändert, und der Link-Test-Beitrag befindet sich aufgrund der ortsweiten Änderung des Permalink-Musters jetzt bei/jekyll/update/welcome-to-jekyll/. Weitere Informationen darüber, welche Token zum Erstellen von URLs verfügbar sind, finden Sie in der Dokumentation zuJekyll Permalinks.
Robuste Links zu Posts erstellen
Nachdem wir nun wissen, wie die Adresse gesteuert wird, unter der sich eine Seite befindet, müssen beim Verknüpfen mit diesen Adressen einige Dinge beachtet werden.
Wenn wir Links im Hauptteil einer Seite für eine vollständig statische Site erstellen, verwenden wir die URL der Seite, zu der wir einen Link erstellen möchten, in einem von wenigen Formaten.
-
An absolute link:
[Link Text]([http://203.0.113.0:4000/post-name)Dies ist das richtige Format für einen externen Link, aber für unsere Website ungeeignet, da das Beibehalten der Portnummer auf der Basis-URL unsere Links in der Produktion beschädigen würde und das Weglassen sie auf unserer Website beschädigen würde Entwicklungsstandort. -
A root-relative link:
[Link Text(/[post-name)Root-relative Links funktionieren nur für lokale Links und folgen aufgrund des anfänglichen Schrägstrichs/der Verzeichnisstruktur auf dem Server ab dem Webstamm. -
A relative link:
[Link Text](post-name)Der relative Link gilt auch für lokale Links und folgt dem Pfad aus demselben Verzeichnis wie die Seite, die den Link enthält.
Beide relativen Links haben ein ähnliches Problem. Wenn wir unser Linkformat ändern, müssen wir alle Links zur alten URL in unseren Inhalten finden und aktualisieren. Das Liquid-Templating von Jekyll bietet eine Möglichkeit, flexiblere Links zu den Posts zu erstellen. Anstatt einen Literal-Link zu verwenden, können Sie die Variablepost_url mit dem Namen der Datei verwenden, sodass anstelle eines Links wie folgt:
[Link Text](/jekyll/update/2016/09/08/welcome-to-jekyll.html)wir würden so verlinken:
[Link Text]({% post_url 2010-09-08-welcome-to-jekyll %})Wir müssen nur den Dateinamen angeben, und es ist nicht erforderlich, das Verzeichnis_postsoder die Dateierweiterung anzugeben. Ein Link zu einem auf diese Weise erstellten Beitrag funktioniert weiterhin mit allen von Ihnen konfigurierten Permalink-Einstellungen.
[.note] #Note: Derzeit ist diese dynamische Verknüpfungsfunktion für Posts verfügbar, jedoch nicht für Pages, obwohl Pläne für Pages in Arbeit sind.
#
Erstellen Sie einen neuen Beitrag
Wir erstellen einen neuen Beitrag, um die Informationen über das Herstellen von Links anzuwenden. Öffnen Sie eine neue Datei in Ihrem Editor und stellen Sie das Datum im Dateinamen nach Bedarf ein:
nano ~/www/_posts/2017-09-04-link-test.mdWir richten die vordere Materie ähnlich wie im Beispielbeitrag ein, wobei sichergestellt wird, dass das Datum hier mit dem Dateinamen im vorherigen Schritt übereinstimmt. Stellen Sie sicher, dass Sie die IP-Adresse oder den Domänennamen der Site vonyourund das Datum im Namen Ihrer Link-Test-Datei ersetzen.
---
layout: post
date: 2017-09-04 07:00
title: Link Test
---
Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)
* [A Jekyll post_url link]({% post_url 2017-09-04-link-test %})Speichern und schließen. Wenn Sie die Homepage erneut besuchen, sollte der neue Beitrag automatisch angezeigt werden:
Folgen Sie dem Homepage-Link zum neuen Beitrag und probieren Sie jeden aus. Alle drei sollten auf unserer Entwickler-Site funktionieren:
Der absolute Link funktioniert auf unserer Entwicklungssite, wird jedoch unterbrochen, wenn wir eine Site mit einer anderen URL oder ohne die Portnummer bereitstellen. Der root-bezogene Link funktioniert an einem neuen Ort, solange das Permalink-Schema gleich bleibt. Wenn jedoch eine Änderung vorgenommen wird, wird dieser Link nicht aktualisiert und auf keiner der Websites unterbrochen. Der Link von Jekyllpost_urlerstellt einen root-relativen Link, wenn die Site analysiert wird. Dies funktioniert nicht nur überall, sondern Jekyll stellt auch sicher, dass der Beitrag, auf den Sie verlinken, tatsächlich vorhanden ist, wenn die Site analysiert wird. Wenn dies nicht der Fall ist, wird eine "Liquid Exception" ausgegeben, die angibt, welche Datei den fehlerhaften Link enthält und welcher Link das Problem ist. Wenn wir zum Beispiel beim dritten Link fälschlicherweise einen falschen Dateinamen eingegeben haben:
Liquid Exception: Could not find post
"broken-name-welcome-to-jekyll" in tag 'post_url'.
Make sure the post exists and the name is correct.
in /home/sammy/www/_posts/2017-09-04-link-test.md
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------Dies ist die letzte Änderung am Inhalt der Website. Im nächsten Schritt kopieren wir unsere Website an einen neuen Speicherort, damit wir unsere Arbeit testen können.
Testen von Links auf einer Staging-Site
Auf derDeployment methods-Seite von Jekyll finden Sie verschiedene Möglichkeiten, um Ihre Inhalte je nach Ihren Anforderungen an den Produktionsstandort zu verschieben. Dies umfasst alles von FTP bis zu hoch entwickelten automatisierten Methoden. Im Moment richten wir auf demselben Computer eine Staging-Site ein, um das Verhalten von Links zu veranschaulichen.
Erstellen Sie eine Test-Site
Wir installieren Nginx, damit wir testen können, wie unsere Verknüpfung funktioniert, bevor wir sie für die Produktion bereitstellen:
sudo apt-get install nginxNach Abschluss der Installation wird HTTP-Datenverkehr zugelassen.
sudo ufw allow httpWenn wir die Adresse der Entwicklungsmaschine besuchen, sollten wir sehen:
Da wir uns im selben Dateisystem befinden, verschieben wir die Site mit einem einfachen Befehlrsync.
Um den Inhalt von_site in das Nginx-Dokumentstammverzeichnis zu übertragen, das sich bei/var/www/html befindet, verwenden wir den folgenden Befehl mit-a, um rekursiv zu synchronisieren und fast alles und das optionale-vbeizubehalten. s, um eine ausführliche Ausgabe bereitzustellen:
sudo rsync -av ~/www/_site/ /var/www/html/Sobald der Rsync abgeschlossen ist, können wir unsere von Nginx bereitgestellte Website ohne die Portnummerhttp://203.0.113.0 besuchen und vor dem Testen sicherstellen, dass Sie Ihren Entwicklungswebserver beendet haben.
Testen der Site
Das Testen nach einer Bereitstellung an einem neuen Ort hilft uns sicherzustellen, dass unsere Leser die Erfahrung haben, die wir beabsichtigen. Die automatische Linkprüfung kann dazu beitragen, dass dies ein einfacher und routinemäßiger Teil des Prozesses ist. Derzeit wird dies jedoch von Hand überprüft.
Der neue Blogeintrag wird automatisch auf der Startseite angezeigt, wobei der neueste Eintrag oben angezeigt wird.
Wenn wir den "Link Test" -Post besuchen, werden wir feststellen, dass sowohl der absolute Link als auch der root-bezogene Link unterbrochen sind, da die von uns bereitgestellte Umgebung Port 4000 nicht verwendet, während der Jekyll post_url-Link an beiden Standorten funktioniert.
Wir haben die Tests abgeschlossen, also werden wirnginx herunterfahren und Port 80 schließen, da wir nicht beabsichtigen, die Site zu bedienen:
sudo systemctl stop nginx
sudo ufw delete allow httpWir haben die Untersuchung von Links und URLs abgeschlossen und beenden den Entwicklungsserver ebenfalls mitCTRL+C.
Wenn wir sorgfältig ausgewählte, stabile Seitennamen mit dem Verknüpfen von Posts mit dem Tagpost_urlkombinieren, sollten wir uns beim Verknüpfen mit unseren eigenen Seiten keine Sorgen machen. Das Testen an einem neuen Standort vor der Bereitstellung in der Produktion ist nach wie vor hilfreich, um unsere eigenen Fehler zu ermitteln und umso mehr, um fehlerhafte Links zu externen Sites zu finden.
Fazit
In dieser Serie haben wir eine Entwicklungssite installiert und konfiguriert. In diesem Lernprogramm haben wir uns mit der Steuerung der Webadresse der Seiten und Beiträge auf unserer Website befasst, die Standardmuster überschrieben, zuverlässige Links zu Beiträgen in unserem Inhalt erstellt und die Website zum Testen bereitgestellt. Möglicherweise möchten Sie mehr über das Anpassen dertemplates undtheme Ihrer Site oder über die Vorgehensweise vondeploy your site to its production location erfahren.