Wie erstelle ich ein Blog mit Jekyll?

Erstelle ein Blog mit Jekyll
(Bildnachweis: netto)

Dieses Tutorial richtet sich an Personen, die von statischen Site-Generatoren gehört haben und beschlossen haben, ihre eigene Site mithilfe einer solchen Site zu erstellen. Hier zeigen wir es Ihnen wie man ein Blog startet mit Jekyll.

Grundkenntnisse in Terminal sind gut, obwohl Sie in der Lage sein sollten, mitzumachen, da die Befehle alle ziemlich einfach sind. Websites auf GitHub-Seiten werden von Jekyll hinter den Kulissen bereitgestellt. Wenn sie zusammen mit GitHub-Seiten verwendet werden, können Sie Ihre Website kostenlos hosten und verwalten (siehe unsere Liste der besten) Web-Hosting Dienstleistungen für andere Optionen, oder sehen Sie unsere Liste, wenn Sie eine andere Art von möchten Webseitenersteller ).



In diesem Tutorial wird davon ausgegangen, dass Sie sich auf einem Mac befinden. Da Jekyll ein Ruby-Programm ist, ist es möglich, es unter Windows auszuführen, es wird jedoch nicht offiziell unterstützt. Wenn Sie Windows folgen, hüpfe hierher für Hilfe beim Einrichten von Ruby.



beste externe Festplatte für Aufnahmestudio

Nach Abschluss dieses Tutorials haben Sie ein Jekyll-Blog erstellt und gelernt, wie die Funktionen und die Vorlagensprache ein persönliches Blog erstellen können. Dies ist ein guter Ausgangspunkt, um Ihre eigene Website zu entwickeln. Und denken Sie daran, wenn Sie viele Designideen oder Mediendateien haben, stellen Sie sicher, dass Sie diese sicher aufbewahren Cloud-Speicher .

Suchen Sie die Dateien für dieses Tutorial Hier .



01. Einrichten

Auf einem Mac sollte Ruby standardmäßig installiert sein, aber lassen Sie uns dies durch Eingabe überprüfen rubin -v in Ihrem Terminal.

Jetzt können wir Jekyll tatsächlich auf der Site zum Laufen bringen, sicherstellen, dass Sie sich in dem Verzeichnis befinden, in dem Sie Ihre Site erstellen möchten, und einfach eingeben Edelstein installieren Jekyll Bundler ;; Ihr Computer greift dann auf alle Abhängigkeiten zu, die zum Ausführen einer Site erforderlich sind.

02. Lokal dienen oder bauen

Es gibt zwei Hauptbefehle, die Sie mit Jekyll verwenden werden - Dienen und bauen . Um Ihre Site lokal auszuführen, geben Sie ein Jekyll dienen in Ihrer Kommandozeile. Dadurch wird eine Version unter http://127.0.0.1:4000 ausgeführt, auf der Sie eine Vorschau Ihrer Änderungen anzeigen können. Wenn auf Ihrem Computer bereits Gem und andere Abhängigkeiten installiert sind, schlägt dieser Befehl möglicherweise aufgrund einer Nichtübereinstimmung in den Abhängigkeitsversionen fehl. Versuchen Sie es in diesem Fall Bundle Exec Jekyll dienen stattdessen. Laufen gleich, aber mit dem Wort bauen kompiliert einfach die Seite.



03. Holen Sie sich die Starter-Dateien

Kopieren Sie an dieser Stelle die mit diesem Lernprogramm gelieferten Dateien, um eine Grundlage für die Arbeit zu erhalten. Dadurch erhalten wir eine Homepage, eine Blogliste, eine Detailseite und die Asset-Struktur für die Site. Aktualisieren Sie Ihre Seite unter http://127.0.0.1:4000 und Sie werden sehen, dass wir jetzt einige grundlegende Seiten zum Erstellen haben. Lassen Sie uns einen kurzen Überblick über die Funktionsweise einer Jekyll-Site geben.

Eine Jekyll-Site ist leicht zu verfolgen. Alle Sammlungen (Arten von Posts) sowie Layouts und Includes werden in einem eigenen Ordner gespeichert. Sie werden einen '_site'-Ordner bemerken - dies ist der Ordner, den Jekyll verwendet, wenn Sie a ausführen Jekyll bauen Befehl.

CSS generieren

Besuchen Sie uns am 26. September in London, um CSS zu generieren - klicken Sie auf das Bild, um Ihr Ticket zu buchen(Bildnachweis: Zukunft)

04. Konfiguration

Erstellen Sie ein Blog mit Jekyll: Configuration

Jekyll bietet Ihnen eine großartige Struktur zum Arbeiten und eine einfach zu verwaltende Konfigurationsdatei(Bildnachweis: netto)

Öffnen Sie _config.yml in Ihrem Texteditor und fügen Sie Ihre eigenen Details hinzu. Ein wichtiger Bereich, den Sie überprüfen müssen, ist das Festlegen Ihrer Basis-URL. Dies ist der Ordner, in den Ihre Site geladen wird. Die Konfigurationsdatei ähnelt der Verwendung globaler Optionen in Kombination mit Ihrer wp-Konfigurationsdatei, wenn Sie ein WordPress-Design erstellen.

Sie können Kerninformationen wie Titel und Meta-Beschreibungen, Ihre E-Mail- und sozialen Konten und dann alle Informationen steuern, die die Site zum Zusammenstellen benötigt, z. B. Sammlungen und verwendete Plugins. Sie können eine Mischung aus HTML und Markdown für Seiten verwenden, je nachdem, was Sie erreichen möchten. Benutzerdefinierte Seiten wie Ihre Homepage und Listenseiten sind jedoch im Allgemeinen HTML, während Posts und andere allgemeine Seiten, die eine festgelegte Vorlage verwenden, Markdown sind.

05. Front Angelegenheit

Die vordere Angelegenheit ist ein Ausschnitt aus YAML am Anfang einer Datei. Jekyll verwendet es, um Variablen zu halten. Schauen Sie in die Datei about.md und Sie können sehen, dass wir den Titel, das zu verwendende Layout, den Autor und alle zugehörigen Bilder festlegen.

06. Flüssige Tags

Erstellen Sie ein Blog mit Jekyll: Liquid-Tags

Flüssige Tags bieten eine einfache Möglichkeit, mit Vorlagen zu arbeiten, und werden auch in Shopify-Designs verwendet(Bildnachweis: netto)

Jekyll verwendet Liquid - eine Vorlagensprache, die Objekte, Tags und Filter verwendet. Wir nehmen das Objekt Tag von doppelten Klammern umgeben {{}} zur Ausgabe von Variablen für die vordere Materie und einer Klammer und eines Prozentzeichens für die Logik {%%} .

07. Bauen Sie Ihre Navigation auf

Anstelle einer statischen Navigation verwenden wir die Leistung von Konfigurationsdateien, um den Inhalt von der Vorlage zu trennen. Wir halten Navigationselemente im Ordner 'data' als Konfigurationsdatei bereit und durchlaufen sie dann in der Datei navigation.html. Wir können einfach die gewünschten Seiten und Links eingeben, ohne zur Vorlage zurückzukehren. Stellen Sie sicher, dass Sie beim Bearbeiten Ihrer Konfigurationsdateien wie navigation.yml oder front matter zu Beginn eines Beitrags sehr vorsichtig mit Leerzeichen umgehen, da ein streunendes Leerzeichen einen Fehler verursacht.

Die Konfigurationsdatei ist bereits festgelegt. Geben Sie daher den folgenden Code in Ihre Include-Datei 'navigation.html' ein:

{% for item in site.data.navigation %} {{ item.name }} {% endfor %}

Wir verwenden Liquid-Logik-Tags, um in der Navigationskonfigurationsdatei nachzuschauen und für jeden Eintrag einen Link und einen Namen zu erstellen, im Grunde genommen nur einen Standard für die Schleife.

08. Erstellen Sie die Homepage

Auf unserer Homepage werden wir unseren neuesten Blog-Beitrag als Helden auflisten und dann einen Ausschnitt von unserer About-Seite mit einem Link durch haben. Beginnen wir mit dem Heldenblock. Öffnen Sie index.html und fügen Sie den folgenden Code hinzu:

{% assign post = site.posts.first %}

{{ post.title }}

{ post.intro } Read the full Post

Sie werden sehen, dass wir zuerst den neuesten Beitrag zuweisen und dann auf das Miniaturbild verweisen, das in der Titelseite des Beitrags festgelegt ist. Das Post-Intro verwendet einen Flüssigkeitsfilter markdownify um den Markdown in HTML zu konvertieren.

Nachdem dies geschehen ist, fügen wir auch einen Teaser von der About-Seite hinzu. Fügen Sie Folgendes hinzu:



{% for page in site.pages %} {% if page.url == '/about.html' %}

{{ page.title }}

{{ page.intro }}



{% endif %} {% endfor %}

Diesmal verwenden wir a zum Schleife, um die Seiten auf der Site zu durchsuchen. Wir benutzen Seiten-URL Um die About-Seite herauszufiltern, verwenden wir einen ähnlichen Vorlagenstil wie der Held, um die Informationen der Seiten auszugeben.

09. Blogliste

Erstellen Sie ein Blog mit Jekyll: Blog-Liste



Ein einfaches Kartenlayout für die restlichen Beiträge auf der Site, das CSS Grid und Flexbox verwendet(Bildnachweis: netto)

Mit der erstellten Homepage können wir auf die Bloglistenseite wechseln. Um die Listenseite zu erstellen, verwenden wir erneut Liquid-Tags, um die Logik zum Durchlaufen aller Dateien im Ordner 'posts' zu erhalten.

Der Held ist für Sie erledigt, weil er dem gleichen Prozess wie die Homepage folgt. Fügen Sie unter dem Helden in 'blog.html' Folgendes hinzu:

The best of the rest

{% for post in site.posts offset:1 %}

{ date:'%d %b' } - {{ post.title }}

Read More {% endfor %}

Wieder verwenden wir eine zum Schleife, um durch die Postsammlung zu gehen. Da wir jedoch bereits das Neueste aus dem Helden herausgeschleift haben, haben wir diese Schleife ausgeglichen, um mit dem zweiten Beitrag zu beginnen. Ein Flüssigkeitsfilter wird verwendet, um das Datum in ein Format unserer Wahl zu konvertieren.



wie man eine Farbe in Photoshop ändert

10. Blog-Detailseite

Nicht mehr lange: Wir haben fast alle Grundelemente zusammen. Ein wichtiger Aspekt, der noch angesprochen werden muss, ist die Navigation. Wenn Sie einen Blog-Beitrag lesen, benötigen Sie eine Möglichkeit, durchzugehen und mehr zu lesen. Wir können unserer Site mithilfe einer Seitenvariablen eine nette Paginierung hinzufügen. Öffnen Sie post.html im Ordner 'Layouts' und fügen Sie Folgendes hinzu:



{% if page.previous %}

Previous

{{page.previous.title}}



Read Post

{% endif %} {% if page.next %}

Up Next

{{page.next.title}}



Read Post

{% endif %}

Wir nehmen das page.previous und page.next Variablen, um zu überprüfen, ob es einen Beitrag gibt, auf den Sie klicken können. Wenn ja, können wir einen Block ausgeben und den Titel und den Link des Beitrags einfügen.

11. Erstellen und veröffentlichen

GitHub Pages rendert die Sass-Dateien für uns, wenn Sie also ausführen Jekyll bauen Die kompilierten Dateien werden im Ordner _site erstellt. Keine Schluckdateien oder Webpacks hier, nur schöne schlanke Styles! Sie können die Sass-Ausgabe sogar als Einstellung in der Hauptdatei config.yml für die Site minimieren. Der Inhalt dieses Verzeichnisses kann auf das von Ihnen gewählte Hosting übertragen werden. Beachten Sie, dass GitHub Pages tatsächlich Jekyll unterstützt, sodass Sie eine Site mit Ihrem Hauptzweig als Quelle erstellen und hosten können. Weitere Informationen hierzu finden Sie hier Hier .

Dieser Artikel wurde ursprünglich in Ausgabe 320 von veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 320 hier kaufen oder Abonnieren Sie hier .

Zum Thema passende Artikel: