Share
Im vorigen Beitrag habe ich über GitHub Pages und deren Einrichtung in Ihrem GitHub-Repository gesprochen. Wir haben den Site-Generator benutzt, um loszulegen und ich erwähnte, dass GitHub Pages auch Jekyll unterstützt.
In diesem Beitrag werde ich über Jekyll sprechen und Ihnen zeigen, wie Sie es mit Ihrem Projekt einrichten können. Ich habe ein Beispielprojekt erstellt, das Sie nach unten ziehen und mitverfolgen.
Was genau ist Jekyll? Hier ist ihre Beschreibung auf ihrer Website:
Jekyll ist ein einfacher, Blog-fähiger, statischer Site-Generator.
Es ist vollständig inhaltlich gesteuert und unterstützt auch Markdown. Es verwendet Liquid für seine Layouts, so dass Sie Dinge wie Kopf, Kopf und Fußzeile wiederverwenden können. Es werden statische Seiten basierend auf Ihrem Inhalt und den von Ihnen angegebenen Layouts generiert.
Es ist auch Blog-bewusst, so dass es ein möglicher Ersatz für WordPress oder ein anderes CMS sein könnte.
Das Wichtigste ist vielleicht, dass in Jekyll Permalinks, Kategorien, Seiten, Beiträge und benutzerdefinierte Layouts erstklassige Bürger sind.
Sie können Ihre Site auch lokal erstellen und anzeigen.
Jekyll basiert auf Ruby. Die einfachste Installationsmethode ist RubyGems. Wenn Sie mit Mac oder Linux arbeiten, können Sie Jekyll über die Befehlszeile installieren, indem Sie ausführen gem jekyll installieren. Wenn Sie während der Installation auf Probleme stoßen, sollten Sie die Installationsanleitung lesen.
Wenn Sie mit Windows arbeiten, gibt es eine Windows-spezifische Dokumentseite, der Sie folgen müssen.
Das erste, was Sie einrichten müssen, ist die Konfigurationsdatei. Sie möchten eine hinzufügen _config.yml Datei im Stammverzeichnis Ihres Projekts. Es gibt eine Reihe von Konfigurationsoptionen, die Sie hinzufügen können. Ich werde eine Teilmenge davon für dieses Beispiel verwenden. Fahren Sie fort und fügen Sie Folgendes zu Ihrem hinzu _config.yml Datei:
# Abhängigkeiten markdown: rdiscount pygments: true # Permalinks permalink: pretty # Server-Ziel: _gh_pages host: 0.0.0.0 port: 9001 baseurl: / coding: UTF-8
Nachdem wir nun unsere Konfigurationsdatei hinzugefügt haben, fahren wir mit der Einrichtung der Projektstruktur fort.
Es gibt eine bestimmte Struktur, die Sie beim Erstellen einer Jekyll-basierten Site beachten müssen. Es ist wichtig, der Struktur zu folgen, damit Ihre Site korrekt generiert wird. So sieht es aus,
Hier haben Sie verschiedene Layouts für Ihre Seiten. Sie können sich diese als WordPress-Seitenvorlagen vorstellen. Möglicherweise möchten Sie, dass Ihr Standardlayout eine Seitenleiste und ein anderes Layout ohne Seitenleiste hat. Sie beziehen sich auf diese Layouts in Ihrem Inhalt basierend auf dem Namen der Datei.
Gehen Sie voran und erstellen Sie eine _layouts Ordner im Stammverzeichnis Ihres Projekts. Nehmen wir an, Sie möchten das Standardlayout erstellen. Sie möchten ein erstellen default.html in der _layouts Mappe. Sie können dann auf den verschiedenen Seiten auf das Standardlayout verweisen.
Es gibt ein paar Dinge, die Sie wahrscheinlich zu jeder Ihrer Layout-Dateien, dem Seitentitel und Inhalt hinzufügen möchten. Wenn Sie möchten, dass der Seitentitel angezeigt wird, möchten Sie ihn mit der folgenden Syntax zu Ihrem Layout hinzufügen:
Seitentitel
Sie möchten auch angeben, wo der Inhalt jeder Seite in diesem Layout angezeigt werden soll. Dazu müssen Sie die folgende Syntax verwenden:
content
Diese werden in der default.html im Beispielprojekt verwendet.
Möglicherweise möchten Sie einige andere Dinge einschließen, die auf jeder Seite wiederverwendet werden, z. B. Kopfzeile, Fußzeile, Navigation und andere. Sie möchten diese in Ihre aufnehmen _ beinhaltet Mappe.
Dazu gehören Dinge, die Sie auf anderen Seiten wie oben erwähnt wiederverwenden möchten. Sie möchten sie in die _ beinhaltet Mappe. Gehen Sie voran und erstellen Sie eine _ beinhaltet Ordner im Stammverzeichnis Ihres Projekts.
Angenommen, Sie möchten den Dokumentkopf als Include verwenden. Sie müssen zuerst eine hinzufügen head.html Datei in der _ beinhaltet Mappe. Sie fügen dann alles hinzu, was Sie für den Dokumentenkopf benötigen, wie Doctype, Metadaten, Skripts usw..
Als Nächstes möchten Sie darauf hinweisen head.html Datei in Ihrem default.html Layoutdatei. Verwenden Sie dazu die folgende Syntax:
% include head.html%
Sie können dies in der default.html im Beispielprojekt sehen.
Sie würden dasselbe für alle anderen Dinge tun, die Sie zwischen Seiten wie Kopf- und Fußzeile wiederverwenden möchten. Sie können auch Unterordner innerhalb von erstellen _ beinhaltet Ordner und referenzieren sie auch. Ich mache das gerne, um die Differenzabschnitte jeder Seite zu organisieren, wenn sie viel Inhalt haben.
Nun, da wir ein Standardlayout haben, erstellen wir unsere erste Seite. Mach weiter und erstelle ein index.html Datei im Stammordner Ihres Projekts. Machen Sie sich keine Sorgen, es wird Ihr Thema nicht überschreiben index.php Datei, wenn Sie dies verwenden, um Ihr WordPress-Theme zu dokumentieren.
Am Anfang jeder Datei müssen Sie einige Angaben zu der Seite machen. Darauf bezieht sich Jekyll beim Erstellen jeder Seite. Es gibt eine Reihe von Dingen, die Sie einstellen können, aber ich werde mich auf einige davon konzentrieren:
Hier ist ein Beispiel, das Sie oben hinzufügen möchten index.html Datei:
--- Layout: Standardtitel: Tuts + GitHub Pages Slug: Tuts-Github-Seiten ---
Jetzt, da wir unsere Seite einrichten, müssen wir jetzt nur noch unseren Inhalt hinzufügen. Fügen Sie einfach den gesamten HTML-Code hinzu, den Sie auf Ihrer Seite anzeigen möchten.
Das Erstellen und Bereitstellen Ihrer Seiten erfolgt über die Befehlszeile. Gehen Sie voran und öffnen Sie Ihr Kommandozeilenwerkzeug Ihrer Wahl jekyll dienen und drücken Sie die Eingabetaste. Sie sollten die folgende Ausgabe sehen:
Wenn Sie die korrekte Ausgabe sehen, sind Ihre Seiten erstellt und können angezeigt werden. Jetzt können Sie Ihre Seiten anzeigen, indem Sie zu http: // localhost: 9001 oder zu dem in Ihrem Port angegebenen Port gehen _config.yml Datei in Ihrem Browser Ihrer Wahl.
Ich habe die Grundlagen für die ersten Schritte mit Jekyll in Ihrem Projekt behandelt. Ich ging durch das Einrichten der Konfigurationsdatei und der Projektstruktur. Ich habe auch darüber gesprochen, wie Sie Ihre Seiten erstellen und bereitstellen können. Wenn Sie alles zusammen sehen wollen, können Sie sich dieses Beispielprojekt ansehen.
Im nächsten Beitrag werde ich darüber sprechen, wie Sie Ihre Seiten auf GitHub Pages bereitstellen und in Ihrem WordPress-Theme oder Plugin verteilen können.
Accentsconagua