Jekyll Tutorial: Wie man eine statische Website erstellt

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

Hier kommen die 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 lernst du einen der beliebtesten SSGs kennen – Jekyll -, erfährst, wie er funktioniert und wie du damit eine statische Website erstellen kannst.

Hier siehst du eine Live-Demo der Blog-Site, die du mit Jekyll erstellen wirst.

Du kannst auf das GitHub-Repository des Projekts zugreifen, wenn du einen genaueren Blick darauf werfen möchtest.

Was ist Jekyll?

Jekyll ist ein kostenloses Open-Source-SSG, das auf der Programmiersprache Ruby aufbaut und läuft. Du musst nicht wissen, wie Ruby funktioniert, um Jekyll zu benutzen; du musst nur Ruby auf deinem Rechner installiert haben.

Mit Jekyll kannst du verschiedene Arten von statischen Websites erstellen, z. B. einen persönlichen Blog, eine Portfolio-Website oder eine Dokumentations-Website, ohne dass du eine Datenbank oder ein Content-Management-System wie WordPress benötigst.

Hier ist, was Jekyll von anderen SSGs abhebt:

1. Einfach zu bedienen: Jekyll verwendet einfache Textdateien und die Markdown-Syntax, um Inhalte zu erstellen und zu verwalten. Das bedeutet, dass du keine HTML- oder CSS-Kenntnisse haben musst, um loszulegen.
2. Schnell und sicher: Jekyll arbeitet nicht mit serverseitigen Datenbanken oder Skripten, so dass das Risiko von Schwachstellen und Angriffen geringer ist. Es erzeugt statische HTML-Dateien, was deine Website unglaublich schnell und sicher macht.
3. Anpassbar: Jekyll ist in hohem Maße anpassbar und ermöglicht es dir, Layouts und Vorlagen zu verwenden oder sogar Plugins zu erstellen, um die Funktionalität zu erweitern.
4. Einfach zu implementieren: Jekyll erzeugt statische HTML-Dateien, die auf einem Webserver oder bei einem Hosting-Anbieter bereitgestellt werden können, ohne dass ein dynamisches Content Management System erforderlich ist.
5. Unterstützt von einer großen Community: Jekyll hat eine große Gemeinschaft von Nutzern und Entwicklern, was bedeutet, dass viele Ressourcen zur Verfügung stehen, wenn du Hilfe brauchst oder die Funktionalität deiner Website erweitern möchtest.

So installierst du Jekyll

Du musst zuerst Ruby auf deinem Rechner installieren, bevor du mit der Installation von Jekyll fortfahren kannst, wie in der Jekyll-Dokumentation beschrieben.

So installierst du Jekyll auf macOS

Standardmäßig ist Ruby auf macOS vorinstalliert, aber es ist nicht empfehlenswert, diese Version von Ruby für die Installation von Jekyll zu verwenden, da sie veraltet ist. Auf Ventura, dem neuesten Betriebssystem von Apple, ist zum Beispiel die Version 2.6.10 von Ruby vorinstalliert, von der die neueste Version 3.1.3 ist (zum Zeitpunkt des Verfassens dieses Artikels).

Um dies zu beheben, musst du Ruby mit einem Versionsmanager wie chruby korrekt installieren. Du musst zuerst Homebrew auf deinem Mac installieren, indem du den folgenden Befehl in deinem Terminal eingibst:

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

Wenn die Installation erfolgreich war, beende und starte Terminal und überprüfe dann, ob Homebrew einsatzbereit ist, indem du diesen Befehl ausführst:

brew doctor

Wenn du die Meldung „Dein System ist bereit für Homebrew“ erhältst, kannst du jetzt mit dem folgenden Befehl chruby und ruby-install installieren:

brew install chruby ruby-install

Du kannst jetzt die neueste Version von ruby installieren, nämlich 3.1.3, indem du das Paket ruby-install verwendest, das du gerade installiert hast:

ruby-install 3.1.3

Das wird ein paar Minuten dauern. Sobald die Installation erfolgreich war, konfiguriere deine 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

Du kannst nun dein Terminal beenden und neu starten. Überprüfe dann, ob alles funktioniert, indem du diesen Befehl ausführst:

ruby -v

Es sollte Ruby 3.1.3 angezeigt werden.

Jetzt hast du die neueste Version von Ruby auf deinem Rechner installiert. Jetzt kannst du die neuesten Jekyll- und Bundler-Gems installieren:

gem install jekyll bundler

So installierst du Jekyll unter Windows

Um Ruby und Jekyll auf einem Windows-Rechner zu installieren, musst du den RubyInstaller verwenden. Dazu kannst du eine Ruby+Devkit-Version von RubyInstaller Downloads herunterladen und installieren und die Standardoptionen für die Installation verwenden.

Im letzten Schritt des Installationsassistenten führst du den Schritt ridk install aus, der für die Installation von Gems verwendet wird. Weitere Informationen findest du in der RubyInstaller Dokumentation.

Wähle in den Optionen MSYS2 und die MINGW-Entwicklungstoolchain aus. Öffne ein neues Fenster der Eingabeaufforderung und installiere Jekyll und Bundler mit dem folgenden Befehl:

gem install jekyll bundler

So überprüfst du, dass Jekyll richtig installiert ist

Um zu überprüfen, ob Jekyll korrekt auf deinem Rechner installiert ist, öffne dein Terminal und führe den folgenden Befehl aus:

jekyll -v

Wenn du die Versionsnummer siehst, bedeutet das, dass Jekyll auf deinem System installiert ist und richtig funktioniert. Jetzt kannst du Jekyll benutzen!

Jekyll-Befehle und Konfiguration

Bevor wir mit der Erstellung und Anpassung einer statischen Website mit Jekyll beginnen, ist es gut, sich mit den verschiedenen CLI-Befehlen und den Parametern der Konfigurationsdatei vertraut zu machen.

Jekyll CLI-Befehle

Hier sind einige der gängigen Jekyll CLI-Befehle. Du musst sie nicht auswendig lernen, aber du solltest wissen, dass es sie gibt, und du kannst gerne noch einmal nachschauen, was sie bewirken, wenn du ihre Verwendung später in diesem Artikel bemerkst.

• jekyll build: Erzeugt die statische Website im Verzeichnis _site.
• jekyll serve: Erstellt die Seite und startet einen Webserver auf deinem lokalen Rechner, damit du die Seite in deinem Browser unter http://localhost:4000 ansehen kannst.
• jekyll new [site name]: Erzeugt eine neue Jekyll-Site in einem neuen Verzeichnis mit dem angegebenen Site-Namen.
• jekyll doctor: Gibt alle Konfigurations- oder Abhängigkeitsprobleme aus, die eventuell vorhanden sind.
• jekyll clean: Löscht das _site-Verzeichnis, in dem die erzeugten Site-Dateien gespeichert sind.
• jekyll help: Gibt die Hilfedokumentation für Jekyll aus.
• jekyll serve --draft: Erzeugt und liefert deine Jekyll-Site, einschließlich aller Beiträge, die sich im Verzeichnis _drafts befinden.

Du kannst auch einige Optionen an diese Befehle anhängen. Eine vollständige Liste der Jekyll-Befehle und -Optionen findest du in der Jekyll-Dokumentation.

Jekyll-Konfigurationsdatei

Die Jekyll-Konfigurationsdatei ist eine YAML-Datei namens _config.yml, die Einstellungen und Optionen für deine Jekyll-Website enthält. Sie wird verwendet, um verschiedene Aspekte deiner Website zu konfigurieren, z. B. den Titel, die Beschreibung, die URL und andere Einstellungen der Website.

Hier sind einige der am häufigsten verwendeten Konfigurationsoptionen:

• titel: Der Titel deiner Website.
• description: Eine kurze Beschreibung deiner Website.
• url: Die Basis-URL deiner Website.
• baseurl: Das Unterverzeichnis deiner Website, wenn sie in einem Unterverzeichnis einer Domain gehostet wird.
• permalink: Die URL-Struktur für deine Beiträge und Seiten.
• exclude: Eine Liste von Dateien oder Verzeichnissen, die bei der Erstellung der Website nicht berücksichtigt werden sollen.
• include: Eine Liste von Dateien oder Verzeichnissen, die bei der Erstellung der Website berücksichtigt werden sollen.
• paginate: Die Anzahl der Beiträge, die pro Seite angezeigt werden sollen, wenn die Paginierung verwendet wird.
• plugins: Eine Liste der zu ladenden Jekyll-Plugins.
• theme: Standardmäßig ist hier minima eingestellt. Du kannst jedes andere Thema verwenden, indem du seinen Namen festlegst und andere Einstellungen vornimmst, die wir später in diesem Artikel kennenlernen werden.

Du kannst auch benutzerdefinierte Variablen in deiner Konfigurationsdatei erstellen und sie in den Vorlagen, Layouts und Includes deiner Website verwenden. Du könntest zum Beispiel eine Variable mit dem Namen author_name erstellen und sie dann in deinen Vorlagen wie folgt verwenden: {{ site.author_name }}.

Um deine Jekyll-Konfigurationsdatei zu ändern, öffne die Datei _config.yml in deinem Jekyll-Projektverzeichnis mit einem Texteditor und nimm die Änderungen vor.

Hinweis: Alle Änderungen, die du an der Konfigurationsdatei vornimmst, werden wirksam, wenn du deine Website das nächste Mal mit jekyll build oder jekyll serve erstellst.

Wie erstellst du eine statische Website mit Jekyll?

Jetzt, wo du Jekyll auf deinem Rechner installiert hast, ist es möglich, mit einem einzigen Befehl innerhalb weniger Sekunden eine statische Website mit Jekyll zu erstellen. Öffne dein Terminal und führe diesen Befehl aus:

jekyll new joels-blog

Ersetze „joels-blog“ durch den Namen deiner gewünschten Website.

Als Nächstes navigierst du zum Website-Ordner. Du wirst eine grundlegende Jekyll-Site-Struktur sehen, die Verzeichnisse und Dateien wie diese enthält:

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

Hier siehst du, wofür jedes dieser Verzeichnisse und Dateien gedacht ist:

• _config.yml: Die Jekyll-Konfigurationsdatei mit den Einstellungen und Optionen für deine Website.
• _posts: Ein Verzeichnis, das die Inhalte deiner Website enthält (das können Blogbeiträge sein). Dabei kann es sich um Markdown- oder HTML-Dateien mit einer bestimmten Dateinamenskonvention handeln: YEAR-MONTH-DAY-title.MARKUP.
• Gemfile und Gemfile.lock: Bundler verwendet diese Dateien, um die Ruby-Gems zu verwalten, auf die deine Seite angewiesen ist.
• index.md: Die Standard-Startseite für deine Website, die aus einer Markdown- oder HTML-Datei generiert wird.

Es gibt aber noch mehr Dateien/Ordner, mit denen du deine Jekyll-Website anpassen kannst. Zu diesen Ordnern gehören:

• _includes: Ein Verzeichnis, das wiederverwendbare HTML-Schnipsel enthält, die du in deine Layouts und Seiten einbauen kannst. Zum Beispiel die Navigationsleiste, die Fußzeile und so weiter.
• _layouts: Ein Verzeichnis, das HTML-Layoutvorlagen enthält, die die Struktur deiner Seiten definieren.
• assets: Ein Verzeichnis, das alle Dateien enthält, die von deiner Website verwendet werden, z. B. Bilder und CSS-Dateien.
• _sass: Ein Verzeichnis, das Sass-Dateien enthält, mit denen du CSS für deine Seite erzeugen kannst.

Diese Dateistruktur bietet eine solide Grundlage für ein Jekyll-Projekt, aber du kannst sie nach Bedarf ändern, um sie an die speziellen Anforderungen deines Projekts anzupassen.

Schnellstart-Option: Verwende unsere GitHub-Vorlage

Alternativ zum Start deines Projekts mit dem Jekyll CLI kannst du auch ein Git-Repository mit der „Hello World“-Jekyll-Vorlage von Kinsta auf GitHub erstellen. Wähle diese Vorlage verwenden > Neues Repository erstellen, um den Startcode in ein neues Repository in deinem GitHub-Konto zu kopieren.

Vorschau einer Jekyll-Site

Du hast jetzt eine Jekyll-Site, aber wie kannst du dir eine Vorschau der Website ansehen, bevor du sie vielleicht an deine Bedürfnisse anpasst? Öffne dein Terminal, gehe in das Verzeichnis deines Projekts und führe den folgenden Befehl aus:

jekyll serve

Dadurch wird ein _site-Ordner erstellt, der alle statischen Dateien deines Projekts enthält. Außerdem wird der Jekyll-Server gestartet und du kannst dir deine Seite über http://localhost:4000 ansehen.

Wenn du die URL in deinem Webbrowser aufrufst, solltest du deine Jekyll-Site mit dem Minima-Theme sehen:

Wie du eine Jekyll-Site anpasst

Wenn du eine Website mit Jekyll erstellst und ein Theme verwendest, kannst du die Website an deine Bedürfnisse anpassen. Du kannst zum Beispiel neue Seiten hinzufügen, das Layout einer Seite ändern oder die Anzeige bestimmter Elemente anpassen. All das ist mit Jekyll möglich.

So funktioniert das Front Matter in Jekyll

Wenn du eine Seite oder einen Blogbeitrag in deinem Projektordner öffnest, siehst du oben auf der Seite einen Informationsblock mit drei Strichen (—). Dies wird als Vorspann bezeichnet.

Es ist 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 das Frontmate 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 das Frontmatter und verwendet es, um die HTML-Ausgabe für deine Website zu erstellen. Mit dem Front Matter kannst du verschiedene Optionen festlegen, z. B. das Layout, den Permalink, den Veröffentlichungsstatus usw.

So konfigurierst du das Standard-Titelblatt

Du kannst auch Standardvorlagen konfigurieren, damit du nicht für ähnliche Dateien dieselbe Vorgabe machen musst. Zum Beispiel, wenn jeder Blogbeitrag denselben Autorennamen und dasselbe Layout verwendet. Du kannst in der Datei _config.yml ein benutzerdefiniertes Titelbild für alle deine Blogposts festlegen.

Die Struktur ist etwas kompliziert, aber so wird sie aussehen. Füge dies unter der letzten Konfiguration in deiner _config.yml-Datei ein:

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

Wenn du jetzt den Befehl jekyll serve aufrufst, wirst du feststellen, dass du auch dann, wenn du das Layout und den Autor nicht für jeden Beitrag definierst, in deinen Dateien Zugriff darauf hast.

Hinweis: Wenn du keinen Pfad definierst, verwenden alle Dateien die definierten Werte für das Titelbild.

Seiten in Jekyll erstellen

Wenn du eine Datei im Hauptverzeichnis deines Projekts erstellst, wird sie als Seite bezeichnet. Der Name, den du der Datei gibst, wird meistens in der URL verwendet, also gibst du jeder Seitendatei einen Namen, der gut ankommt.

Wenn du z. B. eine Seite mit der URL https://example.com/about erstellen willst, erstelle eine Datei mit dem Namen about.html oder about.md. Die Dateierweiterung bestimmt die Auszeichnungssprache, die für den Seiteninhalt verwendet wird (HTML oder Markdown).

Sobald du eine Datei erstellt hast, fügst du den entsprechenden Vorspann und Inhalt hinzu. Speichere die Datei und aktualisiere deine Jekyll-Seite im Browser. Die neue Seite sollte nun unter der URL, die dem Dateinamen entspricht, erreichbar sein.

Layouts in Jekyll erstellen

Du kannst Layouts verwenden, um die Struktur und das Design der Seiten und Beiträge deiner Website zu definieren. Dies geschieht in der Regel hauptsächlich mit HTML-Code. Du kannst eine Kopf- und Fußzeile sowie Metainformationen in die Metadaten der Seite einfügen.

Der erste Schritt besteht darin, im Hauptverzeichnis deines Projekts einen Ordner _layouts anzulegen. Dann erstellst du eine Datei für jedes Layout – die Datei sollte einen beschreibenden Namen haben, der den Zweck des Layouts widerspiegelt. Du könntest zum Beispiel eine Datei namens page.html erstellen, um das Seitenlayout für alle Seiten deiner Website festzulegen.

Es ist am besten, wenn du die Gesamtstruktur deiner Layouts mit HTML oder einer anderen Auszeichnungssprache definierst.

Du kannst Platzhalter für alle dynamischen Inhalte einfügen, die in das Layout eingefügt werden, z. B. für den Seitentitel, den Inhalt und die Metadaten. Du könntest zum Beispiel ein Basislayout erstellen, das eine Kopf- und eine Fußzeile sowie einen Inhaltsbereich wie diesen enthält:

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                
        </header>
        <main>{{ content }}</main>
        <footer>
            
        </footer>
    </body>
</html>

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

Jede Seite oder jeder Beitrag, die bzw. der in der Kopfzeile den Layoutwert page verwendet, hat nun dieses Layout. Du kannst mehrere Layouts im Ordner _layouts erstellen und deine Layouts nach Belieben gestalten. Du kannst auch das Layout eines Themes außer Kraft setzen, indem du ein Layout mit einem ähnlichen Namen definierst.

Wie der _includes-Ordner in Jekyll funktioniert

Der Ordner _includes enthält wiederverwendbare Codeschnipsel, die du in verschiedene Teile deiner Website einbauen kannst. Du kannst zum Beispiel eine Datei navbar.html in deinem Includes-Ordner erstellen und sie mit dem Tag {% include %} in deine Layout-Datei page.html einfügen.

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

Bei der Erstellung 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 ist es, deinen Code DRY (Don’t Repeat Yourself) zu halten, indem du den Code auf deiner gesamten Website wiederverwenden kannst.

Beiträge in Jekyll durchschleifen

Wenn du eine eigene Blogseite mit all deinen Blogbeiträgen erstellen möchtest, musst du alle Beiträge auf deiner Website abrufen und sie in einer Schleife durchgehen. In Jekyll ist das mit dem Tag {% for %} ganz einfach möglich.

Alle Beiträge auf einer Jekyll-Website werden in der Variable site.posts gespeichert. Du kannst sie in einer Schleife durchgehen und die Liquid-Variable {{ post.title }} verwenden, um den Titel jedes Beitrags auszugeben:

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

Du kannst auch zusätzliche Liquid-Variablen verwenden, um andere Informationen über jeden Beitrag auszugeben, z. B. 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 %}

Im obigen Beispiel formatiert der Liquid-Filter „Datum“ das Datum eines Beitrags in einem besser lesbaren Format.

Jetzt weißt du, welche grundlegenden Formatierungen du auf deiner Jekyll-Seite vornehmen kannst. Aber vielleicht musst du nicht alle diese Möglichkeiten nutzen, um eine Jekyll-Site von Grund auf zu erstellen, denn du kannst jederzeit nach einem Theme suchen, das deinen Bedürfnissen entspricht, und es zu deiner Jekyll-Site hinzufügen.

Wie man ein Theme zu einer Jekyll-Site hinzufügt

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 es in der ReadMe-Datei auf GitHub installiert. Du kannst dich entscheiden, das Theme zu klonen, oder wenn es sich um ein gem-basiertes Theme handelt, ist der Prozess einfacher.

In diesem Artikel installierst du ein Blog-Theme und passt es an, um eine Blog-Site auf Kinsta einzurichten. Es handelt sich um ein Gen-basiertes Theme, dessen Quellcode und Anleitung du auf GitHub finden kannst.

Um ein Gem-basiertes Theme hinzuzufügen, öffnest du das Gemfile deiner Website und fügst das Gem für das Theme hinzu, das du verwenden möchtest. Das Theme, das wir verwenden werden, ist das jekyll-theme-clean-blog. Du kannst das Standard-Theme minima im Gemfile ersetzen:

gem "jekyll-theme-clean-blog"

Führe den Befehl bundle install im Verzeichnis deiner Website aus, um das Gem des Themes und seine Abhängigkeiten zu installieren.

Füge in der Datei _config.yml deiner Website die folgende Zeile hinzu, um das gewünschte Theme anzugeben:

theme: jekyll-theme-clean-blog

Jetzt ist dein Theme einsatzbereit.

Du solltest alle Layouts im Verzeichnis _layouts entfernen, damit sie nicht das Layout des Themes überschreiben.

Die Namen der Layouts für deine Dateien findest du dann in der Dokumentation des Themes. Wenn du zum Beispiel das Theme jekyll-theme-clean-blog verwendest, lautet der Layoutname für die Datei index.html home, für andere Seiten page und für alle Beiträge post.

Führe abschließend jekyll serve aus, um deine Website mit dem neuen Theme zu erstellen und bereitzustellen.

Das war’s! Deine Jekyll-Website sollte jetzt das neue gem-basierte Theme verwenden, das du hinzugefügt hast. Du kannst das Theme weiter anpassen, indem du sein Layout in den _layouts-Verzeichnissen deiner Website veränderst.

Anpassen eines Jekyll-Themes

Jetzt hast du dein Theme zu deiner Website hinzugefügt. Als Nächstes musst du die Website so anpassen, dass sie deinen Bedürfnissen entspricht und so funktioniert, wie sie funktionieren soll. Zum Beispiel werden die Bilder für jede Seite und jeden Beitrag nicht angezeigt, sondern es wird ein grauer Hintergrund angezeigt.

Du kannst dies beheben, indem du auf jeder Seite und in jedem Beitrag den Pfad zu einem Bild angibst, das du verwenden möchtest. In Jekyll werden Assets wie Bilder im Ordner „Assets“ gespeichert. In diesem Ordner kannst du Unterordner anlegen, um deine Bilder zu organisieren.

Du kannst nun eine Hintergrundoption zum Front-Matter-Block und einen Pfad zu seinem Bild hinzufügen. Auf der Info-Seite ist das zum Beispiel das Titelbild:

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

Wenn du das für alle Seiten und Beiträge machst, sieht deine Seite wie folgt aus:

Eine weitere Anpassung, die du vornehmen kannst, ist die Anpassung der Optionen in der Navigationsleiste. Wenn du z. B. keine Kontaktseite brauchst, solltest du den entsprechenden Link aus den Optionen der Navigationsleiste entfernen. Du kannst dies tun, indem du den Quellcode des Themes studierst, die Datei für die Navigationslinks entdeckst und die Datei in deinem Projekt genau kopierst, indem du die nicht benötigte Option entfernst.

Die Navigationslinks befinden sich in der Datei navbar.html aus dem Ordner _includes. Du kannst diese Datei erstellen, den Code aus deinem Quellcode einfügen und die Kontaktoption entfernen oder eine neue Option hinzufügen, die du möchtest.

Wenn du dein Projekt speicherst, wirst du feststellen, dass die Navigationsoptionen angepasst sind:

Als letzte Anpassung kannst du eine Beitragsseite erstellen, die alle deine Blogbeiträge enthält – das bedeutet, dass du alle Beiträge auf dieser Seite in einer Schleife anzeigen kannst.

Erstelle eine Datei, posts.html, und füge 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 %}

Du kannst das Hintergrundbild an dein gespeichertes Bild anpassen. Im obigen Code durchläufst du eine Schleife durch alle Beiträge, um alle Beiträge auf dieser Seite anzuzeigen. So sieht die Beitragsseite aus, wenn sie gespeichert wird.

So fügst du Inhalte zu einer Jekyll-Seite hinzu

Du hast nun eine Jekyll-Site erstellt und die Site nach deinen Bedürfnissen konfiguriert. Der letzte Schritt besteht darin, Inhalte hinzuzufügen oder zu lernen, wie Inhalte zu einer Jekyll-Site hinzugefügt werden können.

Alle Inhalte werden in dem Ordner _posts gespeichert. Jeder Inhalt wird in einer Datei mit einer ähnlichen Namenskonvention gespeichert: YYYY-MM-DD-title.md (oder .html für HTML-Dateien). Wenn du zum Beispiel einen Beitrag mit dem Namen „Mein erster Beitrag“ erstellen möchtest, erstelle eine 2023-03-08-mein-erster-beitrag.md im _posts-Verzeichnis.

Als Nächstes fügst du für jeden Beitrag/jede Inhaltsdatei oben die wichtigsten Informationen über den Beitrag ein. 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'
---

Dann fügst du deinen Inhalt mit HTML-Tags oder Markdown-Syntax unterhalb des Blocks mit den einleitenden Informationen ein.

Speichere die Datei und Jekyll wird sie automatisch erstellen und in deine Website einbinden.

Wie du deine Jekyll-Site auf Kinsta bereitstellst

Kinsta ist eine Cloud-Plattform, auf der du statische Websites, einschließlich Jekyll, hosten kannst. Dazu musst du einige Konfigurationen einrichten, deinen Code auf GitHub hochladen und schließlich auf Kinsta bereitstellen.

Voraussetzungen: Konfigurieren deiner Jekyll-Website

Überprüfe deine Gemfile.lock-Datei und stelle sicher, dass sie eine Plattform für alle Geräte enthält. Um sicherzustellen, dass alle Plattformen richtig konfiguriert sind, führe den folgenden Befehl aus:

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

Dann kannst du ein Procfile erstellen – diese Datei legt die Befehle fest, die beim Deployment deiner Website ausgeführt werden. Diese Datei aktualisiert automatisch die auszuführenden Befehle auf der Registerkarte Prozess in MyKinsta. Dies ist der Befehl, der zu deinem Procfile hinzugefügt wird:

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

Push deine Jekyll-Site auf GitHub

In diesem Artikel verwenden wir Git-Befehle, um deine Codes auf GitHub zu veröffentlichen. Erstelle zunächst ein Repository auf GitHub; so erhältst du Zugriff auf die URL des Repositorys.

Du kannst nun ein lokales Git-Repository einrichten, indem du dein Terminal öffnest, in das Verzeichnis mit deinem Projekt navigierst und den folgenden Befehl ausführst:

git init

Füge nun deinen Code mit dem folgenden Befehl zum lokalen Git-Repository hinzu:

git add

Jetzt kannst du deine Änderungen mit dem folgenden Befehl übertragen:

git commit -m "my first commit"

Hinweis: Du kannst „my first commit“ durch eine kurze Nachricht ersetzen, die deine Änderungen beschreibt.

Zum Schluss kannst du deinen Code mit den folgenden Befehlen auf GitHub veröffentlichen:

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

Hinweis: Ersetze „[Repository URL]“ durch deine eigene GitHub Repository URL.

Sobald du diese Schritte abgeschlossen hast, wird dein Code auf GitHub gepusht und ist über die URL deines Repositorys zugänglich. Du kannst jetzt auf Kinsta deployen!

Bereitstellen deiner Jekyll-Website auf Kinsta

Das Deployment auf Kinsta dauert nur wenige Minuten. Beginne im My Kinsta Dashboard, um dich anzumelden oder dein Konto zu erstellen. Als Nächstes musst du Kinsta auf GitHub autorisieren.

Dann kannst du diese Schritte befolgen, um deine Jekyll-Site einzurichten:

1. Klicke in der linken Seitenleiste auf Anwendungen
2. Klicke auf Dienst hinzufügen
3. Klicke in der Dropdown-Liste auf Anwendung

Es erscheint ein Modal, in dem du das Repository auswählen kannst, das du bereitstellen möchtest. Wähle einen Zweig aus, den du bereitstellen möchtest, wenn du mehrere Zweige in deinem Repository hast.

Anschließend kannst du dieser Anwendung einen Namen geben. Wähle einen Standort für das Rechenzentrum unter 25 aus, und das Procfile liefert automatisch den Webprozessbefehl.

Deine Anwendung wird nun bereitgestellt. Innerhalb weniger Minuten erhältst du einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. In diesem Fall lautet er: https://myblog-84b54.kinsta.app/

Zusammenfassung

Nun hast du gelernt, wie Jekyll funktioniert und welche verschiedenen Anpassungen du mit Jekyll vornehmen kannst. Jetzt kannst du sicher sein, dass Jekyll aufgrund seiner Einfachheit, Flexibilität und leistungsstarken Funktionen ein hervorragendes Werkzeug für die Erstellung statischer Websites ist.

Das intuitive Templating-System von Jekyll, die Liquid Templates und die integrierte Unterstützung für Markdown und andere Auszeichnungssprachen machen es einfach, inhaltsreiche Websites schnell zu erstellen und zu verwalten.

Du kannst alle deine statischen Websites kostenlos mit dem Anwendungs-Hosting von Kinsta hosten. Wenn es dir gefällt, kannst du dich für unser Hobby-Tier-Angebot entscheiden, das schon ab $7/Monat erhältlich ist.

Was ist deine Meinung zu Jekyll? Hast du mit Jekyll schon etwas gebaut? Bitte teile uns deine Projekte und Erfahrungen in den Kommentaren unten mit.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.

• Webseite
• LinkedIn
• Twitter
• YouTube