In diesem Artikel lernst du einen der beliebtesten SSGs kennen – Jekyll -, erf\u00e4hrst, wie er funktioniert und wie du damit eine statische Website erstellen kannst.<\/p>\n
Hier siehst du eine Live-Demo der Blog-Site<\/a>, die du mit Jekyll erstellen wirst.<\/p>\n Du kannst auf das GitHub-Repository des Projekts<\/a> zugreifen, wenn du einen genaueren Blick darauf werfen m\u00f6chtest.<\/p>\n Jekyll ist ein kostenloses Open-Source-SSG, das auf der Programmiersprache Ruby<\/a> aufbaut und l\u00e4uft. Du musst nicht wissen, wie Ruby funktioniert, um Jekyll zu benutzen; du musst nur Ruby auf deinem Rechner installiert haben.<\/p>\n Mit Jekyll kannst du verschiedene Arten von statischen Websites erstellen, z. B. einen pers\u00f6nlichen Blog, eine Portfolio-Website oder eine Dokumentations-Website, ohne dass du eine Datenbank oder ein Content-Management-System wie WordPress<\/a> ben\u00f6tigst.<\/p>\n Hier ist, was Jekyll von anderen SSGs abhebt:<\/p>\n Du musst zuerst Ruby auf deinem Rechner installieren, bevor du mit der Installation von Jekyll fortfahren kannst, wie in der Jekyll-Dokumentation<\/a> beschrieben.<\/p>\n Standardm\u00e4\u00dfig ist Ruby auf macOS vorinstalliert, aber es ist nicht empfehlenswert, diese Version von Ruby f\u00fcr 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).<\/p>\n Um dies zu beheben, musst du Ruby mit einem Versionsmanager wie chruby<\/a> korrekt installieren. Du musst zuerst Homebrew<\/a> auf deinem Mac installieren, indem du den folgenden Befehl in deinem Terminal eingibst:<\/p>\n Wenn die Installation erfolgreich war, beende und starte Terminal und \u00fcberpr\u00fcfe dann, ob Homebrew einsatzbereit ist, indem du diesen Befehl ausf\u00fchrst:<\/p>\n Wenn du die Meldung „Dein System ist bereit f\u00fcr Homebrew“<\/strong> erh\u00e4ltst, kannst du jetzt mit dem folgenden Befehl Du kannst jetzt die neueste Version von ruby installieren, n\u00e4mlich 3.1.3, indem du das Paket Das wird ein paar Minuten dauern. Sobald die Installation erfolgreich war, konfiguriere deine Shell mit dem folgenden Befehl so, dass sie automatisch Du kannst nun dein Terminal beenden und neu starten. \u00dcberpr\u00fcfe dann, ob alles funktioniert, indem du diesen Befehl ausf\u00fchrst:<\/p>\n Es sollte Ruby 3.1.3<\/strong> angezeigt werden.<\/p>\n Jetzt hast du die neueste Version von Ruby auf deinem Rechner installiert. Jetzt kannst du die neuesten Jekyll- und Bundler-Gems installieren:<\/p>\n Um Ruby und Jekyll auf einem Windows-Rechner zu installieren, musst du den RubyInstaller<\/a> verwenden. Dazu kannst du eine Ruby+Devkit-Version<\/strong> von RubyInstaller Downloads<\/a> herunterladen und installieren und die Standardoptionen f\u00fcr die Installation verwenden.<\/p>\n Im letzten Schritt des Installationsassistenten f\u00fchrst du den Schritt W\u00e4hle in den Optionen MSYS2 und die MINGW-Entwicklungstoolchain aus. \u00d6ffne ein neues Fenster der Eingabeaufforderung und installiere Jekyll und Bundler mit dem folgenden Befehl:<\/p>\n Um zu \u00fcberpr\u00fcfen, ob Jekyll korrekt auf deinem Rechner installiert ist, \u00f6ffne dein Terminal und f\u00fchre den folgenden Befehl aus:<\/p>\n Wenn du die Versionsnummer siehst, bedeutet das, dass Jekyll auf deinem System installiert ist und richtig funktioniert. Jetzt kannst du Jekyll benutzen!<\/p>\n 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.<\/p>\n Hier sind einige der g\u00e4ngigen 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\u00e4ter in diesem Artikel bemerkst.<\/p>\n Du kannst auch einige Optionen an diese Befehle anh\u00e4ngen. Eine vollst\u00e4ndige Liste der Jekyll-Befehle und -Optionen findest du in der Jekyll-Dokumentation<\/a>.<\/p>\n Die Jekyll-Konfigurationsdatei ist eine YAML-Datei namens _config.yml<\/strong>, die Einstellungen und Optionen f\u00fcr deine Jekyll-Website enth\u00e4lt. Sie wird verwendet, um verschiedene Aspekte deiner Website zu konfigurieren, z. B. den Titel, die Beschreibung, die URL und andere Einstellungen der Website.<\/p>\n Hier sind einige der am h\u00e4ufigsten verwendeten Konfigurationsoptionen:<\/p>\n Du kannst auch benutzerdefinierte Variablen in deiner Konfigurationsdatei erstellen und sie in den Vorlagen, Layouts und Includes deiner Website verwenden. Du k\u00f6nntest zum Beispiel eine Variable mit dem Namen Um deine Jekyll-Konfigurationsdatei zu \u00e4ndern, \u00f6ffne die Datei _config.yml<\/strong> in deinem Jekyll-Projektverzeichnis mit einem Texteditor und nimm die \u00c4nderungen vor.<\/p>\n Hinweis:<\/strong> Alle \u00c4nderungen, die du an der Konfigurationsdatei vornimmst, werden wirksam, wenn du deine Website das n\u00e4chste Mal mit Jetzt, wo du Jekyll auf deinem Rechner installiert hast, ist es m\u00f6glich, mit einem einzigen Befehl innerhalb weniger Sekunden eine statische Website mit Jekyll zu erstellen. \u00d6ffne dein Terminal und f\u00fchre diesen Befehl aus:<\/p>\n Ersetze „joels-blog“ durch den Namen deiner gew\u00fcnschten Website.<\/p>\n Als N\u00e4chstes navigierst du zum Website-Ordner. Du wirst eine grundlegende Jekyll-Site-Struktur sehen, die Verzeichnisse und Dateien wie diese enth\u00e4lt:<\/p>\n Hier siehst du, wof\u00fcr jedes dieser Verzeichnisse und Dateien gedacht ist:<\/p>\n Es gibt aber noch mehr Dateien\/Ordner, mit denen du deine Jekyll-Website anpassen kannst. Zu diesen Ordnern geh\u00f6ren:<\/p>\n Diese Dateistruktur bietet eine solide Grundlage f\u00fcr ein Jekyll-Projekt, aber du kannst sie nach Bedarf \u00e4ndern, um sie an die speziellen Anforderungen deines Projekts anzupassen.<\/p>\n Alternativ zum Start deines Projekts mit dem Jekyll CLI kannst du auch ein Git-Repository mit der „Hello World“-Jekyll-Vorlage<\/a> von Kinsta auf GitHub erstellen. W\u00e4hle diese Vorlage verwenden<\/strong> > Neues Repository erstellen<\/strong>, um den Startcode in ein neues Repository in deinem GitHub-Konto zu kopieren.<\/p>\n Du hast jetzt eine Jekyll-Site, aber wie kannst du dir eine Vorschau der Website ansehen, bevor du sie vielleicht an deine Bed\u00fcrfnisse anpasst? \u00d6ffne dein Terminal, gehe in das Verzeichnis deines Projekts und f\u00fchre den folgenden Befehl aus:<\/p>\n Dadurch wird ein _site-Ordner<\/strong> erstellt, der alle statischen Dateien deines Projekts enth\u00e4lt. Au\u00dferdem wird der Jekyll-Server gestartet und du kannst dir deine Seite \u00fcber http:\/\/localhost:4000 ansehen<\/strong>.<\/p>\n Wenn du die URL in deinem Webbrowser aufrufst, solltest du deine Jekyll-Site mit dem Minima-Theme sehen:<\/p>\n Wenn du eine Website mit Jekyll erstellst und ein Theme verwendest, kannst du die Website an deine Bed\u00fcrfnisse anpassen. Du kannst zum Beispiel neue Seiten hinzuf\u00fcgen, das Layout einer Seite \u00e4ndern oder die Anzeige bestimmter Elemente anpassen. All das ist mit Jekyll m\u00f6glich.<\/p>\n Wenn du eine Seite oder einen Blogbeitrag in deinem Projektordner \u00f6ffnest, siehst du oben auf der Seite einen Informationsblock mit drei Strichen (—). Dies wird als Vorspann<\/strong> bezeichnet.<\/p>\n Es ist ein Metadatenformat, das in Jekyll verwendet wird, um Informationen \u00fcber eine Seite oder einen Beitrag zu speichern – es kann entweder in YAML oder JSON geschrieben werden.<\/p>\n Im obigen Beispiel enth\u00e4lt das Frontmate Variablen wie den Titel, die Beschreibung und das Datum des Beitrags. Diese Variablen k\u00f6nnen im Layout oder Inhalt der Seite oder des Beitrags verwendet werden.<\/p>\n Jekyll analysiert das Frontmatter und verwendet es, um die HTML-Ausgabe f\u00fcr deine Website zu erstellen. Mit dem Front Matter kannst du verschiedene Optionen festlegen, z. B. das Layout, den Permalink, den Ver\u00f6ffentlichungsstatus usw.<\/p>\n Du kannst auch Standardvorlagen konfigurieren, damit du nicht f\u00fcr \u00e4hnliche Dateien dieselbe Vorgabe machen musst. Zum Beispiel, wenn jeder Blogbeitrag denselben Autorennamen und dasselbe Layout verwendet. Du kannst in der Datei _config.yml<\/strong> ein benutzerdefiniertes Titelbild f\u00fcr alle deine Blogposts festlegen.<\/p>\n Die Struktur ist etwas kompliziert, aber so wird sie aussehen. F\u00fcge dies unter der letzten Konfiguration in deiner _config.yml-Datei<\/strong> ein:<\/p>\n Wenn du jetzt den Befehl Hinweis:<\/strong> Wenn du keinen Pfad definierst, verwenden alle Dateien die definierten Werte f\u00fcr das Titelbild.<\/p>\n 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.<\/p>\n Wenn du z. B. eine Seite mit der URL https:\/\/example.com\/about<\/strong> erstellen willst, erstelle eine Datei mit dem Namen about.html <\/strong>oder about.md<\/strong>. Die Dateierweiterung bestimmt die Auszeichnungssprache, die f\u00fcr den Seiteninhalt verwendet wird (HTML oder Markdown).<\/p>\n Sobald du eine Datei erstellt hast, f\u00fcgst 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.<\/p>\n Du kannst Layouts verwenden, um die Struktur und das Design der Seiten und Beitr\u00e4ge deiner Website zu definieren. Dies geschieht in der Regel haupts\u00e4chlich mit HTML-Code. Du kannst eine Kopf- und Fu\u00dfzeile sowie Metainformationen in die Metadaten der Seite einf\u00fcgen.<\/p>\n Der erste Schritt besteht darin, im Hauptverzeichnis deines Projekts einen Ordner _layouts<\/strong> anzulegen. Dann erstellst du eine Datei f\u00fcr jedes Layout – die Datei sollte einen beschreibenden Namen haben, der den Zweck des Layouts widerspiegelt. Du k\u00f6nntest zum Beispiel eine Datei namens page.html <\/strong>erstellen, um das Seitenlayout f\u00fcr alle Seiten deiner Website festzulegen.<\/p>\n Es ist am besten, wenn du die Gesamtstruktur deiner Layouts mit HTML oder einer anderen Auszeichnungssprache definierst.<\/p>\n Du kannst Platzhalter f\u00fcr alle dynamischen Inhalte einf\u00fcgen, die in das Layout eingef\u00fcgt werden, z. B. f\u00fcr den Seitentitel, den Inhalt und die Metadaten. Du k\u00f6nntest zum Beispiel ein Basislayout erstellen, das eine Kopf- und eine Fu\u00dfzeile sowie einen Inhaltsbereich wie diesen enth\u00e4lt:<\/p>\n In diesem Beispiel werden die Platzhalter 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<\/strong> erstellen und deine Layouts nach Belieben gestalten. Du kannst auch das Layout eines Themes au\u00dfer Kraft setzen, indem du ein Layout mit einem \u00e4hnlichen Namen definierst.<\/p>\n Der Ordner _includes<\/strong> enth\u00e4lt wiederverwendbare Codeschnipsel, die du in verschiedene Teile deiner Website einbauen kannst. Du kannst zum Beispiel eine Datei navbar.html<\/strong> in deinem Includes-Ordner erstellen und sie mit dem Tag Bei der Erstellung ersetzt Jekyll das Tag durch den Inhalt von navbar.html<\/strong>.<\/p>\n Der Ordner _includes<\/strong> 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.<\/p>\n Wenn du eine eigene Blogseite mit all deinen Blogbeitr\u00e4gen erstellen m\u00f6chtest, musst du alle Beitr\u00e4ge auf deiner Website abrufen und sie in einer Schleife durchgehen. In Jekyll ist das mit dem Tag Alle Beitr\u00e4ge auf einer Jekyll-Website werden in der Variable Du kannst auch zus\u00e4tzliche Liquid-Variablen verwenden, um andere Informationen \u00fcber jeden Beitrag auszugeben, z. B. das Datum oder den Autor des Beitrags:<\/p>\n Im obigen Beispiel formatiert der Liquid-Filter „Datum“ das Datum eines Beitrags in einem besser lesbaren Format.<\/p>\n Jetzt wei\u00dft du, welche grundlegenden Formatierungen du auf deiner Jekyll-Seite vornehmen kannst. Aber vielleicht musst du nicht alle diese M\u00f6glichkeiten nutzen, um eine Jekyll-Site von Grund auf zu erstellen, denn du kannst jederzeit nach einem Theme suchen, das deinen Bed\u00fcrfnissen entspricht, und es zu deiner Jekyll-Site hinzuf\u00fcgen.<\/p>\n Es gibt verschiedene einfach hinzuzuf\u00fcgende Themes, aber das Gute ist, dass es f\u00fcr jedes Theme immer klare Informationen dar\u00fcber 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<\/a> handelt, ist der Prozess einfacher.<\/p>\n In diesem Artikel installierst du ein Blog-Theme<\/a> und passt es an, um eine Blog-Site auf Kinsta<\/a> einzurichten. Es handelt sich um ein Gen-basiertes Theme, dessen Quellcode<\/a> und Anleitung du auf GitHub<\/a> finden kannst.<\/p>\n Um ein Gem-basiertes Theme hinzuzuf\u00fcgen, \u00f6ffnest du das Gemfile deiner Website und f\u00fcgst das Gem f\u00fcr das Theme hinzu, das du verwenden m\u00f6chtest. Das Theme, das wir verwenden werden, ist das jekyll-theme-clean-blog<\/strong>. Du kannst das Standard-Theme minima<\/strong> im Gemfile ersetzen:<\/p>\n F\u00fchre den Befehl F\u00fcge in der Datei _config.yml<\/strong> deiner Website die folgende Zeile hinzu, um das gew\u00fcnschte Theme anzugeben:<\/p>\n Jetzt ist dein Theme einsatzbereit.<\/p>\n Du solltest alle Layouts im Verzeichnis _layouts<\/strong> entfernen, damit sie nicht das Layout des Themes \u00fcberschreiben.<\/p>\n Die Namen der Layouts f\u00fcr deine Dateien findest du dann in der Dokumentation des Themes<\/a>. Wenn du zum Beispiel das Theme jekyll-theme-clean-blog<\/strong> verwendest, lautet der Layoutname f\u00fcr die Datei index.html<\/strong> home<\/strong>, f\u00fcr andere Seiten page<\/strong> und f\u00fcr alle Beitr\u00e4ge post<\/strong>.<\/p>\n F\u00fchre abschlie\u00dfend Das war’s! Deine Jekyll-Website sollte jetzt das neue gem-basierte Theme verwenden, das du hinzugef\u00fcgt hast. Du kannst das Theme weiter anpassen, indem du sein Layout in den _layouts-Verzeichnissen<\/strong> deiner Website ver\u00e4nderst.<\/p>\n Jetzt hast du dein Theme zu deiner Website hinzugef\u00fcgt. Als N\u00e4chstes musst du die Website so anpassen, dass sie deinen Bed\u00fcrfnissen entspricht und so funktioniert, wie sie funktionieren soll. Zum Beispiel werden die Bilder f\u00fcr jede Seite und jeden Beitrag nicht angezeigt, sondern es wird ein grauer Hintergrund angezeigt.<\/p>\n Du kannst dies beheben, indem du auf jeder Seite und in jedem Beitrag den Pfad zu einem Bild angibst, das du verwenden m\u00f6chtest. In Jekyll werden Assets wie Bilder im Ordner „Assets“<\/strong> gespeichert. In diesem Ordner kannst du Unterordner anlegen, um deine Bilder zu organisieren.<\/p>\n Du kannst nun eine Hintergrundoption zum Front-Matter-Block und einen Pfad zu seinem Bild hinzuf\u00fcgen. Auf der Info-Seite ist das zum Beispiel das Titelbild:<\/p>\n Wenn du das f\u00fcr alle Seiten und Beitr\u00e4ge machst, sieht deine Seite wie folgt aus:<\/p>\n 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<\/a> studierst, die Datei f\u00fcr die Navigationslinks entdeckst und die Datei in deinem Projekt genau kopierst, indem du die nicht ben\u00f6tigte Option entfernst.<\/p>\n Die Navigationslinks befinden sich in der Datei navbar.html aus dem Ordner _includes<\/a>. Du kannst diese Datei erstellen, den Code aus deinem Quellcode einf\u00fcgen und die Kontaktoption entfernen oder eine neue Option hinzuf\u00fcgen, die du m\u00f6chtest.<\/p>\n![\"Blog-Website](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/joels-blog-jekyll-site.jpg\")
Was ist Jekyll?<\/h2>\n
\n
So installierst du Jekyll<\/h2>\n
So installierst du Jekyll auf macOS<\/h3>\n
\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"<\/code><\/pre>\nbrew doctor<\/code><\/pre>\nchruby<\/code> und ruby-install<\/strong> installieren:<\/p>\nbrew install chruby ruby-install<\/code><\/pre>\nruby-install<\/code> verwendest, das du gerade installiert hast:<\/p>\nruby-install 3.1.3<\/code><\/pre>\nchruby<\/code> verwendet:<\/p>\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/chruby.sh\" >> ~\/.zshrc\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/auto.sh\" >> ~\/.zshrc\necho \"chruby ruby-3.1.3\" >> ~\/.zshrc<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install jekyll bundler<\/code><\/pre>\nSo installierst du Jekyll unter Windows<\/h3>\n
ridk install<\/code> aus, der f\u00fcr die Installation von Gems verwendet wird. Weitere Informationen findest du in der RubyInstaller Dokumentation<\/a>.<\/p>\ngem install jekyll bundler<\/code><\/pre>\nSo \u00fcberpr\u00fcfst du, dass Jekyll richtig installiert ist<\/h3>\n
jekyll -v<\/code><\/pre>\nJekyll-Befehle und Konfiguration<\/h2>\n
Jekyll CLI-Befehle<\/h3>\n
\n
jekyll build<\/code>: Erzeugt die statische Website im Verzeichnis _site<\/strong>.<\/li>\njekyll serve<\/code>: Erstellt die Seite und startet einen Webserver auf deinem lokalen Rechner, damit du die Seite in deinem Browser unter http:\/\/localhost:4000 ansehen kannst.<\/li>\njekyll new [site name]<\/code>: Erzeugt eine neue Jekyll-Site in einem neuen Verzeichnis mit dem angegebenen Site-Namen.<\/li>\njekyll doctor<\/code>: Gibt alle Konfigurations- oder Abh\u00e4ngigkeitsprobleme aus, die eventuell vorhanden sind.<\/li>\njekyll clean<\/code>: L\u00f6scht das _site-Verzeichnis<\/strong>, in dem die erzeugten Site-Dateien gespeichert sind.<\/li>\njekyll help<\/code>: Gibt die Hilfedokumentation f\u00fcr Jekyll aus.<\/li>\njekyll serve --draft<\/code>: Erzeugt und liefert deine Jekyll-Site, einschlie\u00dflich aller Beitr\u00e4ge, die sich im Verzeichnis _drafts<\/strong> befinden.<\/li>\n<\/ul>\nJekyll-Konfigurationsdatei<\/h3>\n
\n
minima<\/code> eingestellt. Du kannst jedes andere Thema<\/a> verwenden, indem du seinen Namen festlegst und andere Einstellungen vornimmst, die wir sp\u00e4ter in diesem Artikel kennenlernen werden.<\/li>\n<\/ul>\nauthor_name<\/code> erstellen und sie dann in deinen Vorlagen wie folgt verwenden: {{ site.author_name }}<\/code>.<\/p>\njekyll build<\/code> oder jekyll serve<\/code> erstellst.<\/p>\nWie erstellst du eine statische Website mit Jekyll?<\/h2>\n
jekyll new joels-blog<\/code><\/pre>\n![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-jekyll-site.jpg\")
\u251c\u2500\u2500 _config.yml\n\u251c\u2500\u2500 _posts\n\u251c\u2500\u2500 Gemfile\n\u251c\u2500\u2500 Gemfile.lock\n\u251c\u2500\u2500 index.md\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n
\n
Schnellstart-Option: Verwende unsere GitHub-Vorlage<\/h3>\n
Vorschau einer Jekyll-Site<\/h2>\n
jekyll serve<\/code><\/pre>\n![\"Jekyll](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/minima-jekyll-theme.jpg\")
Wie du eine Jekyll-Site anpasst<\/h2>\n
So funktioniert das Front Matter in Jekyll<\/h3>\n
---\ntitle: \"Welcome to Jekyll!\"\ndescription: \"Introduction to what Jekyll is about and how it works\"\ndate: 2023-03-07 16:54:37 +0100\n---<\/code><\/pre>\nSo konfigurierst du das Standard-Titelblatt<\/h4>\n
defaults:\n -\n scope:\n path: \"posts\" # empty string means all files\n values:\n layout: \"post\"\n author: \"John Doe\"<\/code><\/pre>\njekyll serve<\/code> aufrufst, wirst du feststellen, dass du auch dann, wenn du das Layout und den Autor nicht f\u00fcr jeden Beitrag definierst, in deinen Dateien Zugriff darauf hast.<\/p>\nSeiten in Jekyll erstellen<\/h3>\n
![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-page.jpg\")
Layouts in Jekyll erstellen<\/h3>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>{{ page.title }}<\/title>\n <\/head>\n <body>\n <header>\n \n <\/header>\n <main>{{ content }}<\/main>\n <footer>\n \n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n{{ page.title }}<\/code> und {{ content }}<\/code> durch den tats\u00e4chlichen Titel und Inhalt der gerenderten Seite ersetzt.<\/p>\nWie der _includes-Ordner in Jekyll funktioniert<\/h3>\n
{% include %}<\/code> in deine Layout-Datei page.html<\/strong> einf\u00fcgen.<\/p>\n<!DOCTYPE html>\n <html>\n <head>\n <title>{{ page.title }} <\/title>\n <\/head>\n <body>\n <header>{% include navbar.html %} <\/header>\n <main>{{ content }} <\/main>\n <footer>\n \n <\/footer>\n <\/body>\n <\/html><\/code><\/pre>\nBeitr\u00e4ge in Jekyll durchschleifen<\/h3>\n
{% for %}<\/code> ganz einfach m\u00f6glich.<\/p>\nsite.posts<\/code> gespeichert. Du kannst sie in einer Schleife durchgehen und die Liquid-Variable {{ post.title }}<\/code> verwenden, um den Titel jedes Beitrags auszugeben:<\/p>\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n{% endfor %}<\/code><\/pre>\n\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n <p>Published on {{ post.date | date: \"%B %-d, %Y\" }} by {{ post.author }}<\/p>\n{% endfor %}<\/code><\/pre>\nWie man ein Theme zu einer Jekyll-Site hinzuf\u00fcgt<\/h2>\n
gem \"jekyll-theme-clean-blog\"<\/code><\/pre>\nbundle install<\/code> im Verzeichnis deiner Website aus, um das Gem des Themes und seine Abh\u00e4ngigkeiten zu installieren.<\/p>\ntheme: jekyll-theme-clean-blog<\/code><\/pre>\njekyll serve<\/code> aus, um deine Website mit dem neuen Theme zu erstellen und bereitzustellen.<\/p>\n![\"Jekyll](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-blog-theme.jpg\")
Anpassen eines Jekyll-Themes<\/h3>\n
![\"Bilderordner](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-assets.jpg\")
---\nlayout: page\ntitle: About\ndescription: This is the page description. \npermalink: \/about\/\nbackground: '\/assets\/images\/about-page.jpeg'\n---<\/code><\/pre>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-page-customized.jpg\")
![\"Anpassen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/customizing-navbar.jpg\")