Jekyll-Tutorial: So erstellen Sie eine statische Website

Im heutigen digitalen Zeitalter ist eine Website unerlässlich, um eine Online-Präsenz aufzubauen, Ihre Marke zu bewerben und potenzielle Kunden zu erreichen. Allerdings kann die Erstellung einer Website eine entmutigende Aufgabe sein.

Hier kommen Static Site Generators (SSGs) ins Spiel – sie machen es einfach, schöne, schnell ladende Websites zu erstellen, ohne dass komplexe Backend-Systeme oder Datenbanken erforderlich sind.

In diesem Artikel lernen Sie eines der beliebtesten SSGs kennen – Jekyll. Erfahren Sie, wie es funktioniert und wie Sie damit eine statische Website erstellen können.

Hier ist eine Live-Demo der Blog-Site, die Sie mit Jekyll erstellen werden.

Wenn Sie einen genaueren Blick darauf werfen möchten, können Sie auf das GitHub-Repository des Projekts zugreifen.

Was ist Jekyll?

Jekyll ist ein kostenloses Open-Source-SSG, das auf der Programmiersprache Ruby basiert und darauf ausgeführt wird. Sie müssen nicht verstehen, wie Ruby funktioniert, um Jekyll zu verwenden; Sie müssen lediglich Ruby auf Ihrem Computer installiert haben.

Mit Jekyll können verschiedene Arten statischer Websites erstellt werden, z. B. ein persönlicher Blog, eine Portfolio-Website und eine Dokumentations-Website, ohne dass eine Datenbank oder die Verwendung eines Content-Management-Systems wie WordPress erforderlich ist.

Das zeichnet Jekyll unter den SSGs aus:

1. Einfach zu verwenden : Jekyll verwendet reine Textdateien und Markdown-Syntax, um Inhalte zu erstellen und zu verwalten, was bedeutet, dass Sie keine HTML- oder CSS-Kenntnisse benötigen, um loszulegen.
2. Schnell und sicher: Jekyll verwendet keine serverseitige Datenbank oder Skripte, was bedeutet, dass das Risiko von Schwachstellen und Angriffen geringer ist. Es generiert statische HTML-Dateien und macht Ihre Website unglaublich schnell und sicher.
3. Anpassbar: Jekyll ist hochgradig anpassbar, sodass Sie Layouts und Vorlagen verwenden oder sogar Plugins erstellen können, um die Funktionalität zu erweitern.
4. Einfache Bereitstellung : Jekyll generiert statische HTML-Dateien, die auf einem Webserver oder Hosting-Anbieter bereitgestellt werden können, ohne dass ein dynamisches Content-Management-System erforderlich ist.
5. Unterstützt von einer großen Community: Jekyll verfügt über eine große Community von Benutzern und Entwicklern, was bedeutet, dass zahlreiche Ressourcen zur Verfügung stehen, wenn Sie Hilfe benötigen oder die Funktionalität Ihrer Website erweitern möchten.

So installieren Sie Jekyll

Sie müssen zunächst Ruby auf Ihrem Computer installieren, bevor Sie mit der Installation von Jekyll fortfahren können, wie in der Jekyll-Dokumentation beschrieben.

So installieren Sie Jekyll unter macOS

Standardmäßig ist Ruby mit macOS vorinstalliert. Es wird jedoch nicht empfohlen, eine solche Version von Ruby für die Installation von Jekyll zu verwenden, da diese veraltet ist. Auf Ventura, dem neuesten Betriebssystem von Apple, ist beispielsweise die Ruby-Version 2.6.10 vorinstalliert, wobei die neueste Version 3.1.3 ist (zum Zeitpunkt der Erstellung dieses Artikels).

Um dies zu beheben, müssen Sie Ruby mit einem Versionsmanager wie chruby korrekt installieren. Sie müssen Homebrew zuerst auf Ihrem Mac installieren, indem Sie den folgenden Befehl in Ihrem Terminal verwenden:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Sobald die Installation erfolgreich ist, beenden Sie Terminal und starten Sie es neu. Überprüfen Sie dann, ob Homebrew einsatzbereit ist, indem Sie diesen Befehl ausführen:

 brew doctor

Wenn Sie die Meldung „ Ihr System ist bereit zum Brauen“ erhalten, können Sie nun mit der Installation chruby und ruby-install mit dem folgenden Befehl fortfahren:

 brew install chruby ruby-install

Sie können jetzt die neueste Version von Ruby, 3.1.3, mit dem gerade installierten ruby-install Paket installieren:

 ruby-install 3.1.3

Das wird ein paar Minuten dauern. Sobald es erfolgreich ist, konfigurieren Sie Ihre Shell mit dem folgenden Befehl so, dass sie automatisch chruby verwendet:

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

Sie können Ihr Terminal jetzt beenden und neu starten und dann überprüfen, ob alles funktioniert, indem Sie diesen Befehl ausführen:

 ruby -v

Es sollte Ruby 3.1.3 heißen.

Sie haben jetzt die neueste Version von Ruby auf Ihrem Computer installiert. Sie können jetzt mit der Installation des neuesten Jekyll- und Bundler-Gems fortfahren:

 gem install jekyll bundler

So installieren Sie Jekyll unter Windows

Um Ruby und Jekyll auf einem Windows-Computer zu installieren, verwenden Sie den RubyInstaller. Dies kann erreicht werden, indem Sie eine Ruby+Devkit- Version von RubyInstaller Downloads herunterladen und installieren und die Standardoptionen für die Installation verwenden.

Führen Sie im letzten Schritt des Installationsassistenten den ridk install aus, der zum Installieren von Gems verwendet wird. Weitere Informationen finden Sie in der RubyInstaller-Dokumentation.

Wählen Sie aus den Optionen die MSYS2- und MINGW-Entwicklungstoolchain aus. Öffnen Sie ein neues Eingabeaufforderungsfenster und installieren Sie Jekyll und Bundler mit dem folgenden Befehl:

 gem install jekyll bundler

So überprüfen Sie, ob Jekyll korrekt installiert ist

Um zu überprüfen, ob Jekyll korrekt auf Ihrem Computer installiert ist, öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

 jekyll -v

Wenn Sie die Versionsnummer sehen, bedeutet dies, dass Jekyll auf Ihrem System installiert ist und ordnungsgemäß funktioniert. Jetzt können Sie Jekyll verwenden!

Jekyll-Befehle und -Konfiguration

Bevor wir mit der Erstellung und Anpassung einer statischen Site mit Jekyll beginnen, ist es hilfreich, sich mit den verschiedenen CLI-Befehlen und Konfigurationsdateiparametern vertraut zu machen.

Jekyll CLI-Befehle

Hier sind einige der beliebtesten Jekyll CLI-Befehle. Sie müssen sie sich nicht merken, wissen aber einfach, dass sie existieren, und schauen Sie jederzeit noch einmal nach, was sie tun, wenn Sie später in diesem Artikel auf ihre Verwendung stoßen.

• jekyll build : Erzeugt die statische Site im Verzeichnis _site .
• jekyll serve : Erstellt die Site und startet einen Webserver auf Ihrem lokalen Computer, sodass Sie eine Vorschau der Site in Ihrem Browser unter http://localhost:4000 anzeigen können.
• jekyll new [site name] : Erstellt eine neue Jekyll-Site in einem neuen Verzeichnis mit dem angegebenen Site-Namen.
• jekyll doctor : Gibt alle möglicherweise vorhandenen Konfigurations- oder Abhängigkeitsprobleme aus.
• jekyll clean : Löscht das Verzeichnis _site , in dem die generierten Site-Dateien gespeichert sind.
• jekyll help : Gibt die Hilfedokumentation für Jekyll aus.
• jekyll serve --draft : Generiert und stellt Ihre Jekyll-Site bereit, einschließlich aller Beiträge, die sich im Verzeichnis _drafts befinden.

Sie können diesen Befehlen auch einige Optionen hinzufügen. Eine vollständige Liste der Jekyll-Befehle und -Optionen finden Sie in der Jekyll-Dokumentation.

Jekyll-Konfigurationsdatei

Die Jekyll-Konfigurationsdatei ist eine YAML-Datei mit dem Namen _config.yml , die Einstellungen und Optionen für Ihre Jekyll-Site enthält. Es wird verwendet, um verschiedene Aspekte Ihrer Site zu konfigurieren, einschließlich Site-Titel, Beschreibung, URL und anderen Einstellungen.

Hier sind einige der am häufigsten verwendeten Konfigurationsoptionen:

• Titel: Der Titel Ihrer Website.
• Beschreibung: Eine kurze Beschreibung Ihrer Website.
• URL: Die Basis-URL Ihrer Website.
• baseurl: Das Unterverzeichnis Ihrer Site, wenn diese in einem Unterverzeichnis einer Domain gehostet wird.
• Permalink: Die URL-Struktur für Ihre Beiträge und Seiten.
• Ausschließen: Eine Liste von Dateien oder Verzeichnissen, die vom Site-Generierungsprozess ausgeschlossen werden sollen.
• include: Eine Liste von Dateien oder Verzeichnissen, die in den Site-Generierungsprozess einbezogen werden sollen.
• paginieren: Die Anzahl der Beiträge, die pro Seite angezeigt werden sollen, wenn die Paginierung verwendet wird.
• Plugins: Eine Liste der zu ladenden Jekyll-Plugins.
• Thema: Standardmäßig ist dies auf minima eingestellt. Sie können jedes andere Thema verwenden, indem Sie dessen Namen festlegen und andere Einstellungen implementieren, über die wir später in diesem Artikel mehr erfahren.

Sie können in Ihrer Konfigurationsdatei auch benutzerdefinierte Variablen erstellen und diese in den Vorlagen, Layouts und Includes Ihrer Site verwenden. Sie könnten beispielsweise eine Variable mit dem Namen author_name erstellen und diese dann in Ihren Vorlagen wie folgt verwenden: {{ site.author_name }} .

Um Ihre Jekyll-Konfigurationsdatei zu ändern, öffnen Sie die Datei _config.yml in Ihrem Jekyll-Projektverzeichnis in einem Texteditor und nehmen Sie Änderungen vor.

Hinweis: Alle Änderungen, die Sie an der Konfigurationsdatei vornehmen, werden wirksam, wenn Sie Ihre Site das nächste Mal mit jekyll build oder jekyll serve generieren.

Wie erstellt man eine statische Website auf Jekyll?

Nachdem Sie Jekyll nun auf Ihrem Computer installiert haben, ist es nun möglich, mit einem Befehl innerhalb weniger Sekunden eine statische Jekyll-Website zu erstellen. Öffnen Sie Ihr Terminal und führen Sie diesen Befehl aus:

 jekyll new joels-blog

Stellen Sie sicher, dass Sie „joels-blog“ durch den Namen Ihrer bevorzugten Website ersetzen.

Navigieren Sie als Nächstes zum Website-Ordner. Sie werden eine grundlegende Jekyll-Site-Struktur bemerken, die Verzeichnisse und Dateien wie diese enthält:

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

Hier erfahren Sie, wozu jedes dieser Verzeichnisse und Dateien dient:

• _config.yml: Die Jekyll-Konfigurationsdatei, die die Einstellungen und Optionen Ihrer Site enthält.
• _posts: Ein Verzeichnis, das den Inhalt Ihrer Website enthält (z. B. Blogbeiträge). Dies können Markdown- oder HTML-Dateien mit einer bestimmten Dateinamenskonvention sein: YEAR-MONTH-DAY-title.MARKUP .
• Gemfile und Gemfile.lock: Bundler verwendet diese Dateien, um die Ruby-Gems zu verwalten, auf die Ihre Site angewiesen ist.
• index.md: Die Standard-Homepage für Ihre Website, generiert aus einer Markdown- oder HTML-Datei.

Es gibt jedoch noch weitere Dateien/Ordner, mit denen Sie Ihre Jekyll-Website anpassen können. Zu diesen Ordnern gehören:

• _includes: Ein Verzeichnis, das wiederverwendbare HTML-Snippets enthält, die in Ihre Layouts und Seiten eingefügt werden können. Wie Navigationsleiste, Fußzeile usw
• _layouts: Ein Verzeichnis, das HTML-Layoutvorlagen enthält, die die Struktur Ihrer Seiten definieren.
• Assets: Ein Verzeichnis, das alle Dateien enthält, die von Ihrer Site verwendet werden, z. B. Bilder und CSS-Dateien.
• _sass: Ein Verzeichnis, das Sass-Dateien enthält, die zum Generieren von CSS für Ihre Site verwendet werden können.

Diese Dateistruktur bietet eine solide Grundlage für ein Jekyll-Projekt, Sie können sie jedoch nach Bedarf ändern, um sie an die spezifischen Anforderungen Ihres Projekts anzupassen.

Schnellstartoption: Verwenden Sie unsere GitHub-Vorlage

Als Alternative zum Starten Ihres Projekts mit der Jekyll-CLI können Sie ein Git-Repository mithilfe der Jekyll-Vorlage „Hello World“ von Kinsta auf GitHub erstellen. Wählen Sie „Diese Vorlage verwenden > Neues Repository erstellen“ , um den Startercode in ein neues Repository in Ihrem eigenen GitHub-Konto zu kopieren.

So zeigen Sie eine Vorschau einer Jekyll-Site an

Sie haben jetzt eine Jekyll-Site, aber wie können Sie eine Vorschau der Website anzeigen, um zu sehen, wie sie aussieht, bevor Sie möglicherweise damit beginnen, sie an Ihre Bedürfnisse anzupassen? Öffnen Sie Ihr Terminal, wechseln Sie in das Verzeichnis Ihres Projekts und führen Sie dann den folgenden Befehl aus:

 jekyll serve

Dadurch wird ein _site- Ordner generiert, der alle aus Ihrem Projekt generierten statischen Dateien enthält. Außerdem wird dadurch der Jekyll-Server gestartet und Sie können eine Vorschau Ihrer Site über http://localhost:4000 anzeigen.

Wenn Sie die URL in Ihrem Webbrowser aufrufen, sollte Ihre Jekyll-Site mit dem Minima-Thema angezeigt werden:

So passen Sie eine Jekyll-Site an

Wenn Sie mit Jekyll eine Site erstellen und ein Theme verwenden, können Sie die Site an Ihre Bedürfnisse anpassen. Beispielsweise möchten Sie möglicherweise neue Seiten hinzufügen, das Layout einer Seite ändern oder die Anzeige einiger Elemente anpassen. All dies ist mit Jekyll möglich.

Wie Front Matter in Jekyll funktioniert

Wenn Sie jede Seite oder jeden Blogbeitrag Ihres Projektordners öffnen, werden Sie oben auf der Seite einen Informationsblock mit drei Strichen (-) bemerken. Dies wird als Vordermaterie bezeichnet.

Es handelt sich um ein Metadatenformat, das in Jekyll verwendet wird, um Informationen über eine Seite oder einen Beitrag zu speichern – es kann entweder in YAML oder JSON geschrieben werden.

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

Im obigen Beispiel enthält die Titelseite Variablen wie den Titel, die Beschreibung und das Datum des Beitrags. Diese Variablen können im Layout oder Inhalt der Seite oder des Beitrags verwendet werden.

Jekyll analysiert den Inhalt und generiert daraus den Ausgabe-HTML-Code für Ihre Website. Mithilfe der Titelseite können Sie verschiedene Optionen angeben, z. B. Layout, Permalink, Veröffentlichungsstatus usw.

So konfigurieren Sie die Standardvorderseite

Sie können auch das standardmäßige Titelblatt konfigurieren, sodass Sie nicht dasselbe Titelblatt für ähnliche Dateien definieren müssen. Wenn beispielsweise jeder Blogbeitrag denselben Autorennamen und dasselbe Layout verwendet. Sie können in Ihrer _config.yml- Datei eine benutzerdefinierte Titelseite definieren, um alle Ihre Blog-Beiträge bereitzustellen.

Die Art und Weise, wie es strukturiert ist, ist etwas komplex, aber so wird es aussehen. Fügen Sie dies unter der letzten Konfiguration in Ihre _config.yml- Datei ein:

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

Wenn Sie jetzt den Befehl jekyll serve ausführen, werden Sie feststellen, dass Sie in Ihren Dateien auch dann darauf zugreifen können, wenn Sie nicht für jeden Beitrag das Layout und den Autor festlegen.

Hinweis: Wenn Sie keinen Pfad definieren, verwenden alle Dateien die definierten Werte für die Titelseite.

Seiten in Jekyll erstellen

Wenn Sie eine Datei im Stammverzeichnis Ihres Projekts erstellen, wird diese als Seite betrachtet. Der Name, den Sie der Datei geben, wird am häufigsten in der URL verwendet, daher geben Sie jeder Auslagerungsdatei einen Namen, der gut ankommt.

Wenn Sie beispielsweise eine Seite mit der URL https://example.com/about erstellen möchten, erstellen Sie eine Datei mit dem Namen about.htm l oder about.md . Die Dateierweiterung bestimmt die Auszeichnungssprache, die für den Seiteninhalt verwendet werden soll (HTML oder Markdown).

Sobald Sie eine Datei erstellt haben, fügen Sie die entsprechende Titelseite und den entsprechenden Inhalt hinzu. Speichern Sie die Datei und aktualisieren Sie Ihre Jekyll-Site im Browser. Die neue Seite sollte nun unter der dem Dateinamen entsprechenden URL erreichbar sein.

Erstellen von Layouts in Jekyll

Mithilfe von Layouts können Sie die Struktur und das Design der Seiten und Beiträge Ihrer Website definieren. Dies geschieht normalerweise hauptsächlich mit HTML-Code. Sie können eine Kopf- und Fußzeile sowie Metainformationen in die Metadaten der Seite einfügen.

Der erste Schritt wäre die Erstellung eines _layouts- Ordners im Stammverzeichnis Ihres Projekts. Erstellen Sie dann für jedes Layout eine Datei. Die Datei sollte einen beschreibenden Namen haben, der den Zweck des Layouts widerspiegelt. Sie können beispielsweise eine Datei mit dem Namen page.htm l erstellen, um das Seitenlayout für alle Seiten Ihrer Website zu definieren.

Am besten definieren Sie die Gesamtstruktur Ihrer Layouts mit HTML oder einer anderen Auszeichnungssprache.

Sie können Platzhalter für jeden dynamischen Inhalt einschließen, der in das Layout eingefügt wird, z. B. Seitentitel, Inhalt und Metadaten. Sie könnten beispielsweise ein grundlegendes Layout erstellen, das eine Kopf- und Fußzeile sowie einen Inhaltsbereich wie folgt umfasst:

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

In diesem Beispiel werden die Platzhalter {{ page.title }} und {{ content }} durch den tatsächlichen Titel und Inhalt der gerenderten Seite ersetzt.

Zu diesem Zeitpunkt wird jede Seite oder jeder Beitrag, der in der Titelseite die Seite als Layoutwert verwendet, dieses Layout haben. Sie können im Ordner „_layouts“ mehrere Layouts erstellen und Ihre Layouts nach Ihren Wünschen gestalten. Sie können das Layout eines Themas auch überschreiben, indem Sie ein Layout mit einem ähnlichen Namen definieren.

So funktioniert der Ordner „_includes“ in Jekyll

Der Ordner „_includes“ enthält wiederverwendbare Codeausschnitte, die Sie in verschiedene Teile Ihrer Website einfügen können. Sie können beispielsweise eine Datei „navbar.html“ in Ihrem Ordner „Includes“ erstellen und diese mit dem Tag {% include %} zu Ihrer Layoutdatei „page.html“ hinzufügen.

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

Zur Erstellungszeit ersetzt Jekyll das Tag durch den Inhalt von navbar.html .

Der Ordner _includes kann jede Art von Datei enthalten, z. B. HTML-, Markdown- oder Liquid-Dateien. Das Hauptziel besteht darin, Ihren Code trocken zu halten (Don't Repeat Yourself), indem Sie die Wiederverwendung von Code auf Ihrer Website ermöglichen.

Durch Beiträge in Jekyll blättern

Möglicherweise möchten Sie eine eigene Blog-Seite erstellen, auf der alle Ihre Blog-Beiträge gespeichert werden. Das bedeutet, dass Sie alle Beiträge auf Ihrer Website abrufen und sie durchlaufen möchten. Mit Jekyll ist dies einfach mit dem Tag {% for %} zu erreichen.

Alle Beiträge auf einer Jekyll-Website werden in der Variablen site.posts gespeichert. Sie können die Liquid-Variable {{ post.title }} durchlaufen und verwenden, um den Titel jedes Beitrags auf diese Weise auszugeben:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

Sie können auch zusätzliche Liquid-Variablen verwenden, um weitere Informationen zu jedem Beitrag auszugeben, beispielsweise das Datum oder den Autor des Beitrags:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

Beachten Sie, dass im obigen Beispiel der Datums-Liquid-Filter das Datum jedes Beitrags in ein für Menschen besser lesbares Format formatiert.

Jetzt haben Sie eine Vorstellung von einigen grundlegenden Formatierungen, die Sie an Ihrer Jekyll-Site vornehmen können. Möglicherweise müssen Sie jedoch nicht alle davon verwenden, um eine Jekyll-Site von Grund auf zu erstellen, da Sie jederzeit nach einem Thema suchen können, das Ihren Anforderungen entspricht, und es Ihrer Jekyll-Site hinzufügen können.

So fügen Sie einer Jekyll-Site ein Theme hinzu

Es gibt verschiedene einfach hinzuzufügende Themes, aber das Gute ist, dass es für jedes Theme immer klare Informationen darüber gibt, wie man sie in der ReadMe-Datei auf GitHub installiert. Sie können sich dafür entscheiden, das Theme zu klonen, oder wenn es sich um ein Gem-basiertes Theme handelt, ist der Vorgang einfacher.

Für diesen Artikel würden Sie ein Blog-Theme installieren und es anpassen, um eine Blog-Site auf Kinsta bereitzustellen. Dies ist ein genbasiertes Thema und Sie können auf GitHub auf den Quellcode und die Anweisungen zugreifen.

Um ein Gem-basiertes Theme hinzuzufügen, öffnen Sie die Gem-Datei Ihrer Website und fügen Sie das Gem für das Theme hinzu, das Sie verwenden möchten. Das Thema, das wir verwenden werden, ist das Jekyll-Theme-Clean-Blog . Sie können das Standard- Minima- Thema im Gemfile ersetzen:

 gem "jekyll-theme-clean-blog"

Führen Sie den bundle install im Verzeichnis Ihrer Site aus, um das Gem des Themes und seine Abhängigkeiten zu installieren.

Fügen Sie in der Datei _config.yml Ihrer Site die folgende Zeile hinzu, um das Thema anzugeben, das Sie verwenden möchten:

 theme: jekyll-theme-clean-blog

An diesem Punkt ist Ihr Theme einsatzbereit.

Sie sollten alle Layouts im Verzeichnis _layouts entfernen, um zu vermeiden, dass sie das Layout des Themes überschreiben.

Die Layoutnamen für Ihre Dateien finden Sie dann in der Dokumentation des Themes. Wenn Sie beispielsweise das Design „jekyll-theme-clean-blog“ verwenden, lautet der Layoutname für die Datei index.html home , für andere Seiten page und für alle Beiträge post .

Führen Sie abschließend jekyll serve aus, um Ihre Website mit dem neuen Design zu erstellen und bereitzustellen.

Das ist es! Ihre Jekyll-Site sollte jetzt das neue, auf Edelsteinen basierende Design verwenden, das Sie hinzugefügt haben. Sie können das Design weiter anpassen, indem Sie das Layout in den _layouts- Verzeichnissen Ihrer Site ändern.

Passen Sie ein Jekyll-Theme an

Sie haben nun Ihr Thema zu Ihrer Website hinzugefügt. Der nächste Schritt besteht darin, die Website an Ihre Bedürfnisse anzupassen und so zu funktionieren, wie sie soll. Beispielsweise werden die Bilder für jede Seite und jeden Beitrag nicht angezeigt, sondern mit einem grauen Hintergrund angezeigt.

Sie können dies beheben, indem Sie jeder Seite und jedem Beitrag eine Option für die Titelseite hinzufügen, indem Sie den Pfad zu einem Bild angeben, das Sie verwenden möchten. In Jekyll werden Assets wie Bilder im Assets- Ordner gespeichert. In diesem Ordner können Sie Unterordner erstellen, um Ihre Bilder zu organisieren.

Sie können jetzt dem vorderen Materieblock eine Hintergrundoption und einen Pfad zu seinem Bild hinzufügen. Auf der About-Seite ist dies beispielsweise die Titelsache:

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

Tun Sie dies für alle Seiten und Beiträge und Ihre Seite wird so aussehen:

Eine weitere Anpassung, die Sie vornehmen können, ist die Anpassung der Navigationsleistenoptionen. Beispielsweise benötigen Sie möglicherweise keine Kontaktseite und sollten daher den Link aus den Navigationsleistenoptionen entfernen. Sie können dies tun, indem Sie den Quellcode des Themas studieren, sich die Datei ansehen, die für die Navigationslinks verantwortlich ist, und die Datei genau in Ihrem Projekt replizieren, wobei Sie die Option entfernen, die Sie nicht benötigen.

Die Navigationslinks befinden sich in der Datei navbar.html des Ordners _includes. Sie können diese Datei erstellen, den Code aus Ihrem Quellcode einfügen und die Kontaktoption entfernen oder eine beliebige neue Option hinzufügen.

Wenn Sie Ihr Projekt speichern, werden Sie feststellen, dass die Navigationsoptionen angepasst werden:

Eine letzte Anpassung wäre schließlich die Erstellung einer Beitragsseite, die alle Ihre Blog-Beiträge enthält – was bedeutet, dass Sie alle Beiträge auf dieser Seite durchlaufen.

Erstellen Sie eine Datei, posts.html , und fügen Sie den folgenden Code ein:

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

Sie können das Hintergrundbild jederzeit an Ihr gespeichertes Bild anpassen. Im obigen Code durchlaufen Sie alle Beiträge, um alle Beiträge auf dieser Seite anzuzeigen. So sieht die Beitragsseite nach dem Speichern aus.

So fügen Sie Inhalte zu einer Jekyll-Site hinzu

Sie haben nun eine Jekyll-Site erstellt und die Site entsprechend Ihren Anforderungen konfiguriert. Der letzte Schritt besteht darin, Inhalte hinzuzufügen oder zu erfahren, wie Inhalte zu einer Jekyll-Site hinzugefügt werden können.

Der gesamte Inhalt wird im Ordner _posts gespeichert. Jeder Inhalt wird in einer Datei mit der ähnlichen Namenskonvention JJJJ-MM-TT-Titel.md (oder .html für HTML-Dateien) gespeichert. Wenn Sie beispielsweise einen Beitrag mit dem Namen „Mein erster Beitrag“ erstellen möchten, erstellen Sie eine 2023-03-08-my-first-post.md im Verzeichnis _posts .

Stellen Sie als Nächstes sicher, dass Sie für jeden Beitrag/jede Inhaltsdatei oben den Titeltext zum Beitrag hinzufügen. Dazu gehören das Layout, der Titel, die Beschreibung, das Datum und andere Informationen.

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

Anschließend können Sie Ihren Inhalt mit HTML-Tags oder Markdown-Syntax unterhalb des Front Matter-Blocks hinzufügen.

Speichern Sie die Datei und Jekyll erstellt sie automatisch und bindet sie in Ihre Site ein.

So stellen Sie Ihre Jekyll-Site auf Kinsta bereit

Kinsta ist eine Cloud-Plattform, die es Ihnen ermöglicht, statische Websites, einschließlich Jekyll, zu hosten. Dies kann erreicht werden, indem Sie einige Konfigurationen einrichten, Ihre Codes an GitHub übertragen und schließlich bei Kinsta bereitstellen.

Voraussetzungen: Konfigurieren Ihrer Jekyll-Site

Überprüfen Sie Ihre Gemfile.lock- Datei und stellen Sie sicher, dass sie eine Plattform für alle Geräte enthält. Um sicherzustellen, dass alle Plattformen richtig konfiguriert sind, führen Sie den folgenden Befehl aus:

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Anschließend können Sie mit der Erstellung einer Proc-Datei fortfahren. Diese Datei gibt die Befehle an, die bei der Bereitstellung Ihrer Site ausgeführt werden. Diese Datei aktualisiert automatisch die Befehle, die im Prozess-Tab von MyKinsta ausgeführt werden sollen. Dies ist der Befehl, der zu Ihrer Procfile hinzugefügt werden soll:

 web: bundle exec jekyll build && ruby -run -e httpd _site

Pushen Sie Ihre Jekyll-Site auf GitHub

Für diesen Artikel verwenden wir Git-Befehle, um Ihre Codes an GitHub zu übertragen. Erstellen Sie zunächst ein Repository auf GitHub; Dadurch erhalten Sie Zugriff auf die URL des Repositorys.

Sie können jetzt ein lokales Git-Repository initialisieren, indem Sie Ihr Terminal öffnen, zu dem Verzeichnis navigieren, das Ihr Projekt enthält, und den folgenden Befehl ausführen:

 git init

Fügen Sie nun Ihren Code mit dem folgenden Befehl zum lokalen Git-Repository hinzu:

 git add

Sie können Ihre Änderungen jetzt mit dem folgenden Befehl festschreiben:

 git commit -m "my first commit"

Hinweis: Sie können „mein erstes Commit“ durch eine kurze Nachricht ersetzen, in der Ihre Änderungen beschrieben werden.

Schieben Sie abschließend Ihren Code mit den folgenden Befehlen an GitHub:

 git remote add origin [repository URL] git push -u origin master

Hinweis: Stellen Sie sicher, dass Sie „[Repository-URL]“ durch Ihre eigene GitHub-Repository-URL ersetzen.

Sobald Sie diese Schritte abgeschlossen haben, wird Ihr Code an GitHub übertragen und ist über die URL Ihres Repositorys zugänglich. Du kannst jetzt bei Kinsta bereitstellen!

Bereitstellen Ihrer Jekyll-Site bei Kinsta

Die Bereitstellung bei Kinsta erfolgt in nur wenigen Minuten. Beginnen Sie im My Kinsta-Dashboard, um sich anzumelden oder Ihr Konto zu erstellen. Als nächstes autorisieren Sie Kinsta auf GitHub.

Anschließend können Sie die folgenden Schritte ausführen, um Ihre Jekyll-Site bereitzustellen:

1. Klicken Sie in der linken Seitenleiste auf Anwendungen
2. Klicken Sie auf Dienst hinzufügen
3. Klicken Sie im Dropdown-Menü auf „Anwendung“.

Es erscheint ein Modal, über das Sie das Repository auswählen können, das Sie bereitstellen möchten. Wählen Sie einen Zweig aus, den Sie bereitstellen möchten, wenn Ihr Repository mehrere Zweige enthält.

Anschließend können Sie dieser Anwendung einen Namen zuweisen. Wählen Sie einen der 25 verfügbaren Rechenzentrumsstandorte aus, und Procfile stellt dann automatisch den Webprozessbefehl bereit.

Ihre Anwendung wird mit der Bereitstellung beginnen. Innerhalb weniger Minuten wird ein Link bereitgestellt, über den Sie auf die bereitgestellte Version Ihrer Website zugreifen können. In diesem Fall ist es: https://myblog-84b54.kinsta.app/

Zusammenfassung

Bisher haben Sie erfahren, wie Jekyll funktioniert und welche verschiedenen Anpassungen Sie mit Jekyll vornehmen können. Mittlerweile kann man mit Sicherheit zustimmen, dass Jekyll aufgrund seiner Einfachheit, Flexibilität und leistungsstarken Funktionen ein hervorragendes Tool zum Erstellen statischer Websites ist.

Jekylls intuitives Vorlagensystem, flüssige Vorlagen und die integrierte Unterstützung für Markdown und andere Markup-Sprachen erleichtern die schnelle Erstellung und Verwaltung inhaltsreicher Websites.

Fühlen Sie sich frei, alle Ihre statischen Websites kostenlos mit Kinstas Application Hosting zu hosten, und wenn es Ihnen gefällt, entscheiden Sie sich für unseren Hobby-Tier-Plan ab 7 $/Monat .

Was denkst du über Jekyll? Haben Sie Jekyll genutzt, um etwas zu bauen? Bitte teilen Sie uns Ihre Projekte und Erfahrungen im Kommentarbereich unten mit.