Share
Jekyll ist ein statisches Site-Generierungssystem, mit dem Sie reine Textdateien in ein anspruchsvolles Blog konvertieren können, ohne sich um die Datenbanken, Sicherheitsprobleme, Updates und andere Komplikationen kümmern zu müssen, die mit vielen CMSs und Blogging-Plattformen einhergehen können.
Ähnlich wie bei den meisten Site-Management-Systemen können auf Jekyll-Sites Designs verwendet werden. Im Moment verwendet Jekyll Themen jedoch nicht so, wie Sie es gewohnt sind.
Im Moment sind Jekyll-Themen nicht eigenständige Pakete müssen durch ein Installationsprogramm angewendet werden. Wenn Sie ein Jekyll-Theme herunterladen, laden Sie es tatsächlich auch herunter alle Dateien erforderlich, um eine gesamte Jekyll-Site zu betreiben.
Dies wird sich in einer zukünftigen Version von Jekyll ändern, aber vorerst müssen Sie wissen, wie mit der Tatsache umzugehen ist, dass Jekyll-Themen mit einer ganzen Website verbunden sind.
In diesem Lernprogramm wird von Anfang an ein Jekyll-Thema erstellt. Beginnen Sie mit einigen Installationshinweisen, erfahren Sie, wie Sie sich mit den Funktionen eines neuen Themas vertraut machen, und erfahren Sie, wie Sie eine neue Website einrichten oder ein bestehendes themen.
Lass uns anfangen!
Die Jekyll-Kategorie auf dem Envato-Markt umfasst eine Reihe von Themen von 19 bis 24 US-Dollar. Später verwenden wir „Writer“ und „Astro“ (die beiden aktuellen Top-Seller), um die Installation zu demonstrieren.
Jekyll-Themen auf dem Envato-MarktJekyll ist so konzipiert, dass es offline auf Ihrem eigenen Computer verwaltet, in eine statische HTML-Site integriert und anschließend bereitgestellt werden kann. Beim Hinzufügen von Inhalt besteht der grundlegende Vorgang darin, eine Markdown-Datei zu erstellen. Fügen Sie oben einige wichtige Informationen hinzu, füllen Sie den Rest der Datei mit Inhalt aus und erstellen Sie dann Ihre Website neu.
Sobald Ihre Site erstellt ist, können Sie sie auf beliebige Weise bereitstellen, entweder über FTP oder über git-Befehle. In diesem Tutorial werden wir uns jedoch nicht auf die Bereitstellung konzentrieren. Wenn Sie mehr über das Thema erfahren möchten, besuchen Sie bitte die Jekyll-Dokumentation.
Vielmehr konzentrieren wir uns auf den Teil Ihres Jekyll-Site-Setup-Prozesses, der offline auf Ihrem Computer ausgeführt wird und der mit der Installation beginnt.
Die Arbeit mit Jekyll erfordert ein wenig Verwendung der Befehlszeile, aber wenn Sie noch nie mit der Befehlszeile gearbeitet haben, lassen Sie sich davon nicht abschrecken. Ich empfehle Ihnen, einige Einträge in unserer Tutorialserie The Command Line für Webdesign durchzulesen, um es bequem zu machen.
Wenn auf Ihrem Computer Windows ausgeführt wird, wird Jekyll leider nicht offiziell unterstützt. Das bedeutet nicht, dass Sie es nicht zum Laufen bringen können, aber Sie müssen vielleicht ein paar Hürden nehmen. Wenn Sie Jekyll unter Windows verwenden möchten, lesen Sie die Details in der Jekyll-Dokumentation.
Andernfalls müssen Sie unter Mac OS X, Linux oder Unix sicherstellen, dass diese Voraussetzungen installiert sind:
Um zu überprüfen, ob Sie Ruby installiert haben, führen Sie den Befehl aus Rubin -v. Um zu überprüfen, ob Ruby Gems ausgeführt wird gem -v. In beiden Fällen prüfen diese Befehle nach einer Versionsnummer. Solange Sie eine in Ihrem Terminal zurückgegebene Nummer sehen, können Sie dies tun.
Wir werden mit Jekyll 3.1.x arbeiten, so dass Sie NodeJS oder Python nicht benötigen, wie auf der Installationsdokumentationsseite von Jekyll erwähnt.
Um Jekyll auf Ihrem Computer zu installieren, führen Sie den folgenden Befehl aus: gem jekyll installieren
Wenn Sie eine Meldung sehen, die besagt, dass Sie keine Schreibberechtigung haben, stellen Sie den Befehl vor Sudo und geben Sie Ihr Passwort ein, wenn Sie dazu aufgefordert werden.
Sie sehen dann ein paar Zeilen im Terminal, die den laufenden Installationsprozess anzeigen. Wenn es heißt “1 Juwel installiert” Sie sind fertig.
Lassen Sie uns schnell eine Jekyll-Site erstellen, damit Sie sehen können, wie sie im standardmäßigen, nicht themenorientierten Zustand aussieht und sich mit ihrer Datei- und Ordnerstruktur vertraut macht. Erstellen Sie einen Ordner für die Site, öffnen Sie ein Terminal, das auf den Ordner zeigt, und führen Sie Folgendes aus: jekyll neu .
Hinweis: Wenn Sie irgendwann eine neue Jekyll-Site im Unterordner s erstellen möchten, verwenden Sie stattdessen den Befehl: jekyll neuer unterordnername
Wenn die Einrichtung der Site abgeschlossen ist, wird eine Meldung in Ihrem Terminal angezeigt „Neue Jekyll-Site in installiert
Führen Sie nun den Befehl aus jekyll dienen um Ihre Site offline zu betreiben.
Wenn Sie die Nachricht sehen "Server läuft ... drücke Strg-C um zu stoppen" In Ihrem Terminal können Sie die Adresse http: // localhost: 4000 in einem Browser aufrufen und die Standard-Jekyll-Site auschecken.
Nachdem Sie nun gesehen haben, wie die Datei- und Ordnerstruktur einer Standard-Jekyll-Site aussieht, und wie ihr unmotivierter Status ist, haben Sie ein besseres Verständnis dafür, was Sie in einem typischen Jekyll-Design-Download sehen.
Wie Sie aus dem, worüber wir in diesem Tutorial gesprochen haben, wissen, kommen derzeit Jekyll-Themen alle Dateien benötigt, um eine gesamte Site zu betreiben. Und wie Sie im letzten Abschnitt gesehen haben, haben Sie alle Dateien, die Sie ausführen können jekyll dienen um die Anzeige dieser Site in einem Browser zu ermöglichen.
Das heißt, wenn Sie ein neues Jekyll-Theme herunterladen, können Sie es einfach extrahieren, ausführen jekyll dienen und demonstrieren Sie das Thema auf einer voll funktionsfähigen Jekyll-Site. Viele Themes werden sogar mit Demo-Inhalten geliefert.
Sehen wir uns einige Beispiele mit den Themen "Writer" und "Astro" an (oder eines, das Sie bevorzugen).
Durchsuchen Sie nach dem Extrahieren die Struktur des Themas, bis Sie den Stammordner mit allen Dateien einer Jekyll-Site finden. Sie sollten diesen Ordner früher von Ihrer Standardinstallation von Jekyll erkennen können. Suchen Sie nach Dingen wie dem _config.yml Datei, die _ beinhaltet Verzeichnis und so weiter.
Dann öffne ein Terminal im Ordner und starte jekyll dienen.
Wenn alles erfolgreich ist, wird die Nachricht angezeigt "Serveradresse: " eine URL wird am Ende des Terminals angezeigt. Kopieren Sie diese URL und fügen Sie sie in einen Browser ein. Sie sollten eine Demo Ihres neuen Designs sehen.
In einigen Fällen wird beim Versuch eine Fehlermeldung angezeigt jekyll dienen. Wenn dies passiert, prüfen Sie, ob die Nachricht über eine fehlende Abhängigkeit klagt, d. H. Etwas, das das Thema benötigt, um funktionieren zu können, fehlt in Ihrem Setup.
In diesem Beispiel können Sie im roten Fehlertext sehen, dass der Edelstein „jekyll-paginate“ fehlt:
Bei einer schnellen Google-Suche wird das Github-Repo für den betreffenden Edelstein angezeigt, der den zur Installation erforderlichen Befehl enthält.
Nachdem Sie den Befehl ausgeführt und die fehlende Abhängigkeit installiert haben jekyll dienen kann mit dem Design wie erwartet laufen.
Wenn Sie zu der angegebenen URL gehen und die Site nicht sehen, zum Beispiel wie folgt:
… Überprüfen Sie den Wert von Baseurl in dem _config.yml Datei. Diese Datei, auf die wir später noch näher eingehen werden, steuert die Gesamtkonfiguration für die gesamte Site.
Das Baseurl Die Variable wird an die Hauptdomäne angehängt. Wenn Sie offline arbeiten, ist dies http: // localhost: 4000.
Im obigen Beispiel möchten wir, dass unsere Website unter http: // localhost: 4000 angezeigt wird. In dem _config.yml Datei unsere Baseurl Variable ist gesetzt auf:
baseurl: "http: // localhost"
Das mag auf den ersten Blick richtig erscheinen, aber da dieser Wert an die Hauptdomäne angehängt wird, wird die Site tatsächlich versucht, unter http: // localhost: 4000http: // localhost zu laden.
Also müssen wir den Wert wie folgt in eine leere Zeichenfolge ändern:
baseurl: ""
Ihre Site wird dann wie erwartet geladen.
Wenn Sie Ihre Site stattdessen aus einem Unterverzeichnis laden möchten, ändern Sie die Baseurl Wert auf den Namen des Unterverzeichnisses. Stellen Sie sicher, dass Sie mit einem Schrägstrich beginnen und enden:
baseurl: "/ themedemo /"
Einer der Hauptgründe, warum es eine gute Idee ist, das Thema direkt aus der vorhandenen Struktur heraus zu bedienen, besteht darin (abgesehen von der Überprüfung, dass es wie erwartet ausgeführt wird). Es bietet Ihnen die Möglichkeit, sich mit den Funktionen und Arbeitsabläufen des Themas vertraut zu machen.
Da Jekyll eine Menge Flexibilität bietet, können die Themenkomplexe von Funktionalität zu Funktionalität unterschiedlich sein. Nachdem Sie eine Demo eines neuen Themas geliefert haben, können Sie sich einen Moment Zeit nehmen, um zu sehen, welche Art von Struktur das Thema hat. Suchen Sie nach Dingen wie zum Beispiel, ob das Thema über Kategorieseiten, ausgewählte Bilder, Autorenseiten usw. verfügt. Beachten Sie diese Funktionen, damit Sie die Dokumentation des Themas durchsuchen und deren Verwendung erlernen können.
Sie sollten auch die Datei- und Ordnerstruktur des Designs durchsehen. Die Hauptbereiche, die Sie untersuchen möchten, sind:
Sie müssen auch herausfinden, welche Konfigurationsoptionen für die gesamte Site in der Site festgelegt werden müssen _config.yml Datei, um die Funktionen des Themas wie Social-Media-URLs, Autoreninformationen, Navigationslinks usw. zu verwenden.
Jetzt haben Sie die Möglichkeit, sich das Thema anzusehen und sich vertraut zu machen. Es ist an der Zeit, es auf Ihrer eigenen Website zu verwenden. Lassen Sie die von Ihnen erstellte Demo-Version unverändert, damit Sie Ihre frisch erstellte Site mit der vergleichen können.
Erstellen Sie einen neuen Ordner auf Ihrem Computer und extrahieren Sie alle Dateien des Themas erneut.
Gehe diesmal in die _posts Ordner und löschen Sie alle Dateien dort, so dass die Demo-Beiträge entfernt werden.
Löschen Sie danach alle .md (markdown) Dateien aus dem Stammordner, so dass auch alle Demoseiten weg sind.
Wenn Sie möchten, können Sie auch die Bilder suchen und löschen, die im Demo-Inhalt verwendet werden, z. B. Miniaturbilder mit Beiträgen, wenn Sie sie durch Ihre eigenen ersetzen möchten. Ob Bilder mit Demoinhalten vorhanden sind, kann von Thema zu Thema variieren.
Wenn Ihr Theme Demo-Bilder enthält, die Sie löschen möchten, Sie sich jedoch nicht sicher sind, wo sich diese befinden, überprüfen Sie die Theme-Dokumentation. Andernfalls müssen Sie möglicherweise den Code in den Vorlagen des Themas durchgehen und von dort aus herausfinden.
Als nächstes sollten Sie die öffnen _config.yml Datei aus dem Stammordner und richten Sie alle für das Design erforderlichen standortweiten Variablen ein. Einige Einstellungen sind im Allgemeinen für alle gleich _config.yml Dateien, wie z Titel, Email, Beschreibung und ein paar andere. Einige Einstellungen sind jedoch für das jeweilige Thema spezifisch.
Was genau in der Site-Konfigurationsdatei zu tun ist, hängt von dem jeweiligen Thema ab. Es ist daher ratsam, sich an dieser Stelle in der Dokumentation des Themas zu informieren, um zu erfahren, wie die einzelnen Einstellungen funktionieren.
Im Writer-Design ist es beispielsweise möglich, ein benutzerdefiniertes Navigationsmenü mithilfe von zu erstellen nav_list Variable, um eine Liste von Menüelementen zu definieren. Jeder hat ein Label, einen Permalink und eine Klasse, durch die ein Font Awesome-Symbol daneben angezeigt wird.
Im Gegensatz dazu verwendet das Astro-Design nicht die Writer-Spezifikation nav_item Variable, verfügt jedoch über eigene benutzerdefinierte Variablen, mit denen Sie Links zu Ihren verschiedenen Social-Media-Konten hinzufügen sowie Disqus-Kommentare usw. aktivieren können.
Arbeite die Variablen in deinen eigenen Themen durch _config.yml Datei, bis Sie alle nach Ihren Wünschen eingestellt haben.
Beachten Sie Folgendes, wenn Sie solche Änderungen vornehmen, nachdem Sie Ihre neue Site zuerst verwendet haben jekyll dienen, Sie müssen den Prozess mit beenden STRG + C und starten Sie ihn neu, um zu sehen, dass nachfolgende Änderungen wirksam werden.
Bei einigen Designs können Sie aus mehreren Layouts für Ihre Homepage auswählen und Steuerelemente festlegen, die ihre Anzeige beeinflussen. Wenn dies der Fall ist, werden Sie wahrscheinlich feststellen, dass die Einstellungen im vorderen Bereich des Fensters geändert werden können index.html Datei aus dem Stammordner.
Wenn mehrere Layouts verfügbar sind, werden Sie wahrscheinlich ein anderes Layout auswählen, indem Sie den Wert von ändern Layout Einstellung - Sie müssen in der Dokumentation des Themas nachsehen, welche möglichen Werte verwendet werden können.
Prüfen Sie während der Bearbeitung der Datei, ob andere Werte geändert werden sollen, damit der Inhalt auf der Startseite angezeigt wird. Im Writer-Design ist es beispielsweise möglich, einen benutzerdefinierten Titel und eine Beschreibung festzulegen, die nur auf der Startseite angezeigt werden, sowie ein gekennzeichnetes Bild.
Wenn Sie Seiten wie "Info" oder "Kontakt" hinzufügen möchten, ist jetzt die Zeit. Füge hinzu ein .md (markdown) dokumentieren Sie für jede Seite, die Sie einrichten möchten, in den Stammordner der Site.
Hinweis: Einige Designs sind so eingerichtet, dass alle Seiten in einem Unterordner (normalerweise als "Seiten" bezeichnet) und nicht im Hauptordner abgelegt werden. Überprüfen Sie daher in den Themendokumenten, ob dies der Fall ist.
Zum Beispiel habe ich hier eine Seite "Über die Site" (about.md), eine Profilseite "Über mich" des Autors (author-kezz.md) und eine Seite "Kontakt" (contact.md) hinzugefügt..
Wenn Sie Seitendateien hinzufügen, möchten Sie wissen, ob bestimmte Layoutvorlagen und / oder Front-Materie-Einstellungen vorhanden sind. Um dies herauszufinden, können Sie sich auf die Dokumente des Themas beziehen oder Markdown-Dateien aus der Demo-Installation des Themes kopieren und einfügen und sie überarbeiten.
Zum Beispiel habe ich hier eine vorhandene Autorenseite aus der Writer-Demo kopiert und sie in meine eigene konvertiert, indem ich sie umbenannt habe und dann ihre vordere Angelegenheit und ihren Inhalt bearbeitet.
Nachdem Sie nun das Wesentliche für die Einrichtung der Site-Struktur erstellt haben, müssen Sie einige Posts hinzufügen. Ich empfehle das Kopieren eines Beitrags aus der _posts Ordner auf Ihrer Demo-Site und fügen Sie ihn in die Installation ein, an der Sie gerade arbeiten. Dann können Sie es mit dem Datum und dem gewünschten Permalink für Ihren neuen Artikel umbenennen. Durch die Wiederverwendung eines Demo-Beitrags ist die gesamte erforderliche Angelegenheit vorhanden, und Sie müssen sie nur aktualisieren.
Einige Themes bieten Unterstützung für Kategorien- und Tag-Seiten. Dies ist jedoch nicht immer der Fall und daher kann die Implementierung von Thema zu Thema unterschiedlich sein. Lesen Sie in den Unterlagen Ihres Themas nach, was Sie möglicherweise tun müssen, um mit Kategorien und Tags auf Ihrer Website zu arbeiten.
Im Writer-Design müssen Sie beispielsweise für jede Kategorie, die Sie verwenden möchten, manuell eine Ordner- und Vorlagendatei in einem Site-Unterordner mit dem Namen „category“ einrichten..
Es kann auch eine beliebige Anzahl weiterer Funktionen geben, über die das von Ihnen verwendete Thema verfügt. Vergewissern Sie sich, dass Sie die Liste der Features und die Dokumentation Ihres Themas gut durchlesen, um sicherzustellen, dass Sie alles über dieses Thema erfahren.
Wenn Sie bereits eine Jekyll-Site haben und nur ein neues Thema anwenden möchten, müssen Sie fast denselben Prozess wie oben durchlaufen. Der Unterschied wird sich nach dem Löschen des Demo-Inhalts ergeben. Statt neue Seiten und Beiträge hinzuzufügen, können Sie einfach den Inhalt Ihrer vorhandenen Website kopieren.
Wenn Sie eine Jekyll-Site mit bereits vorhandenen Seiten haben, kopieren Sie die zugehörigen Markdown-Dateien Ihrer alten Site und fügen Sie sie in Ihre neue ein. Gehen Sie jede Seite durch und aktualisieren Sie die vordere Angelegenheit, um die Layouts und neuen Variablen des neuen Themas zu verwenden.
Dann kopieren Sie alle Ihre Post-Dateien von Ihren alten _posts Ordner in den neuen Ordner. Es wird ein wenig langweilig sein, aber Sie werden höchstwahrscheinlich jede Beitragsdatei nacheinander durchgehen und ihre vordere Angelegenheit mit allen Einstellungen aktualisieren, die für das neue Thema erforderlich sind, und alle, die für das alte Thema erforderlich waren, löschen werden aber nicht mehr verwendet.
Wenn Sie über einen Ordner mit Bildern und anderen Medien verfügen, die in Seiten und Posts auf Ihrer alten Site verwendet werden, kopieren Sie den gesamten Ordner in Ihre neue Site-Struktur. Ihre Beiträge und Seiten sollten weiterhin auf dieselben Bildspeicherorte verweisen, damit sie weiterhin in Ihrem Inhalt angezeigt werden können.
Das ist also das Wesentliche bei der Einrichtung eines Jekyll-Themas! Die Feinheiten des Prozesses variieren von Thema zu Thema. Sie können jedoch jeweils diese wesentlichen Schritte verfolgen. Lassen Sie uns kurz zusammenfassen, was diese Stufen sind.
Accentsconagua
jekyll dienen Ich hoffe, dieses Tutorial hat Ihnen dabei geholfen, sich zuversichtlich zu fühlen, eine neue Jekyll-Site mit einem benutzerdefinierten Thema einzurichten oder das Thema Ihrer bestehenden Site auf ein neues umzustellen.
Eine ausführliche Anleitung zur Verwendung von Jekyll finden Sie in diesem Kurs von Guy Routledge:
Danke fürs Lesen und wir sehen uns bald wieder!
