Jekyll-Tutorial: So erstellen Sie eine statische Website (2023)

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

Sie kommen anStatischer Site-Generator(SSGs) kommen ins Spiel – sie machen es einfach, schöne, schnell ladende Webseiten ohne komplizierte Backend-Systeme oder Datenbanken zu erstellen.

In diesem Artikel erfahren Sie mehr über eines der beliebtesten SSG – Jekyll – wie es funktioniert und wie Sie damit statische Websites erstellen können.

Hier sehen Sie einLive-Blog-Site-DemoZum Erstellen verwenden Sie Jekyll.

Du kannst dabei seinGitHub – Projekt-RepositoryWenn Sie einen genaueren Blick darauf werfen möchten, besuchen Sie uns.

Was ist Jekyll?

Jekyll ist eine kostenlose und Open-Source-SSG-basierte ProgrammierspracheRubinErstellen und ausführen. Sie müssen nicht wissen, wie Ruby funktioniert, um Jekyll zu verwenden. Sie benötigen lediglich Ruby auf Ihrem Computer.

Mit Jekyll können Sie verschiedene Arten von statischen Websites erstellen, z. B. persönliche Blogs, Portfolio-Websites oder Dokumentationsseiten, die keine Datenbank oder kein Content-Management-System erfordernWordPressbrauchen

So unterscheidet sich Jekyll von anderen SSGs:

1. praktisch: Jekyll verwendet reine Textdateien und Markup-Syntax, um Inhalte zu erstellen und zu verwalten. das bedeutet, dass du es nicht tustHTML-LubKenntnisse in CSSEs muss beginnen.
2. Schnell und sicher:Da Jekyll nicht mit Datenbanken oder Serverskripten arbeitet, ist das Risiko von Schwachstellen und Angriffen geringer. Es generiert statische HTML-Dateien, um Ihre Website sehr schnell und sicher zu machen.
3. konfigurierbar:Jekyll ist hochgradig anpassbar, sodass Sie Layouts und Vorlagen verwenden und sogar Plugins erstellen können, um die Funktionalität zu erweitern.
4. einfach anzuwenden: Jekyll generiert statische HTML-Dateien, die auf einem Webserver oder Hosting-Anbieter gehostet 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 Benutzer- und Entwickler-Community, was bedeutet, dass Ihnen zahlreiche Ressourcen zur Verfügung stehen, wenn Sie Hilfe benötigen oder Ihrer Website Funktionen hinzufügen möchten.

So installieren Sie Jekyll

Bevor Sie mit der Installation von Jekyll fortfahren, müssen Sie Ruby zunächst wie folgt auf Ihrem Computer installierenJekyll-Dokumentationbeschreiben.

So installieren Sie Jekyll unter macOS

Ruby ist auf macOS standardmäßig vorinstalliert, diese Version von Ruby wird jedoch nicht für die Installation von Jekyll empfohlen, da sie veraltet ist. Auf dem neuesten Betriebssystem von Apple, Ventura, ist beispielsweise Ruby 2.6.10 vorinstalliert, die neueste Version ist 3.1.3 (zum Zeitpunkt des Verfassens dieses Artikels).

Um dies zu beheben, müssen Sie Ruby mit einem Versionsmanager ausführen, z. B.GesamtKorrekt installieren. muss zuerstHeimvorbereitungInstallieren Sie es auf einem Mac, indem Sie den folgenden Befehl im Terminal eingeben:

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

Wenn die Installation erfolgreich war, schließen und starten Sie Terminal. Überprüfen Sie dann, ob Homebrew einsatzbereit ist, indem Sie Folgendes ausführen:

Brauereiarzt

wenn Sie die Nachricht sehen„Ihr System ist bereit für Homebrew“Jetzt können Sie den folgenden Befehl verwendenGesamtICHRuby-InstallationEinrichten:

brew install chruby ruby ​​​​install

Jetzt können Sie das neueste Ruby 3.1.3 installieren, indem Sie das Paket installierenRuby-InstallationVerwenden Sie, was Sie gerade installiert haben:

Installieren Sie Ruby 3.1.3

Es wird einige Minuten dauern. Nach erfolgreicher Installation konfigurieren Sie die Shell mit dem folgenden Befehl so, dass sie automatisch startetGesamtgebraucht:

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

Jetzt können Sie das Terminal beenden und neu starten. Überprüfen Sie dann, ob alles funktioniert, indem Sie diesen Befehl ausführen:

Rubin -v

mussRubin 3.1.3zur Schau stellen.

Sie haben jetzt die neueste Version von Ruby auf Ihrem Computer installiert. Sie können jetzt die neuesten Jekyll- und Bundler-Gems installieren:

gem Jekyll Packer installieren

So installieren Sie Jekyll unter Windows

Um Ruby und Jekyll auf Ihrem Windows-Computer zu installieren, müssen Sie Folgendes haben:Installation Rubinverwenden. kannst du tunRuby + Devkit-VersionFengLaden Sie das Ruby-Installationsprogramm herunterLaden Sie es herunter, installieren Sie es und installieren Sie es mit den Standardoptionen.

Im letzten Schritt des Installationsassistenten werden Sie durch diesen Schritt geführteinrichtenEs wird zum Installieren von Edelsteinen verwendet. Sie können findenDokumentation zum Ruby-Installationsprogramm.

Wählen Sie in den Optionen die Entwicklungstoolchains MSYS2 und MINGW aus. Öffnen Sie ein neues Eingabeaufforderungsfenster und installieren Sie Jekyll und Bundler mit den folgenden Befehlen:

gem Jekyll Packer installieren

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

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

Jekyll-v

Wenn Sie eine Versionsnummer sehen, ist Jekyll auf Ihrem System installiert und läuft. Jetzt können Sie Jekyll verwenden!

Jekyll-Befehle und -Konfiguration

Bevor Sie mit der Erstellung und Anpassung statischer Websites mit Jekyll beginnen, sollten Sie sich mit den verschiedenen CLI-Befehlen und Konfigurationsdateiparametern vertraut machen.

Jekyll CLI-Befehle

Nachfolgend finden Sie einige gängige Jekyll-CLI-Befehle. Sie müssen sie sich nicht merken, aber Sie sollten wissen, dass sie vorhanden sind, und wenn Sie sie später in diesem Artikel verwenden möchten, können Sie jederzeit auf ihre Funktion zurückgreifen.

• Jekyll-Gebäude: Erstellen Sie eine statische Site im Verzeichnis_Position.
• serw jekylla: Erstellt eine Seite und führt einen Webserver auf Ihrem lokalen Computer aus, sodass Sie die Seite in einem 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.
• Doktor Jekyll: Beseitigen Sie eventuell vorhandene Konfigurations- oder Abhängigkeitsprobleme.
• Jekyll pur: entfernen Sie esVerzeichnis _sitewelches generierte Website-Dateien speichert.
• Jekyll-Hilfe: Drucken Sie die Jekyll-Hilfedokumentation.
• Jekyll T-Shirt – Skizze: Erstellen und teilen Sie eine Jekyll-Site, die alle Verzeichnisbeiträge enthält_ArbeitenGesundheit.

Sie können diesen Befehlen auch bestimmte Optionen hinzufügen. volle ListeInformationen zu Jekyll-Befehlen und -Optionen finden Sie in der Jekyll-Dokumentation.

Jekyll-Profil

Die Jekyll-Konfigurationsdatei ist eine Datei namens_config.yml, das Einstellungen und Optionen der Jekyll-Site enthält. Es wird verwendet, um verschiedene Aspekte der Website wie Titel, Beschreibung, URL und andere Seiteneinstellungen zu konfigurieren.

Hier sind einige der am häufigsten verwendeten Konfigurationsoptionen:

• Titel:Der Titel Ihrer Website.
• beschreiben:Eine kurze Beschreibung Ihrer Website.
• URL:die BasisURLdeine Website.
• Basis-URL:Ein Unterverzeichnis Ihrer Site, wenn es in einem Unterverzeichnis Ihrer Domain gehostet wird.
• Direkte Verbindung:URL-Struktur Ihrer Beiträge und Seiten.
• ausschließen:Eine Liste von Dateien oder Verzeichnissen, die beim Erstellen einer Site nicht einbezogen werden sollten.
• Anmachen:Eine Liste von Dateien oder Verzeichnissen, die beim Erstellen einer Site einbezogen werden sollen.
• Seite:Die Anzahl der pro Seite anzuzeigenden Beiträge bei Verwendung der Paginierung.
• Extras:Liste der zu ladenden Jekyll-Plugins.
• Thema:Standardmäßig ist es hierminimaler PreisIch lege. Du kannst alles schaffenein anderes ThemaDas Festlegen des Namens und anderer Einstellungen werden wir später in diesem Artikel besprechen.

Sie können in Ihren Konfigurationsdateien auch benutzerdefinierte Variablen erstellen und diese in den Vorlagen, Layouts und Einbindungen Ihrer Site verwenden. Sie können z.BAutorennameErstellen Sie sie und verwenden Sie sie dann wie folgt in Ihren Vorlagen:{{sitename.author}}.

Um Änderungen an der Jekyll-Konfigurationsdatei vorzunehmen, öffnen Sie die Datei_config.ymlVerwenden Sie einen Texteditor, um Änderungen am Jekyll-Projektverzeichnis vorzunehmen.

Vorsicht:Alle an der Konfigurationsdatei vorgenommenen Änderungen werden bei Ihrer nächsten Nutzung der Website wirksamJekyll-GebäudeLubserw jekyllaerstellen

Wie erstelle ich mit Jekyll eine statische Website?

Nachdem Sie Jekyll nun auf Ihrem Computer installiert haben, können Sie mit Jekyll in Sekundenschnelle und mit einem einzigen Befehl eine statische Website erstellen. Öffnen Sie ein Terminal und führen Sie diesen Befehl aus:

Jekyll Joels neuer Blog

Ersetzen Sie „joels-blog“ durch den Namen der gewünschten Website.

Gehen Sie dann zum Website-Ordner. Sie sehen die Grundstruktur Ihrer Jekyll-Site mit den folgenden Verzeichnissen und Dateien:

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

Hier erfahren Sie, was jedes Verzeichnis und jede Datei bewirkt:

• _config.yml:Jekyll-Konfigurationsdatei mit Site-Einstellungen und -Optionen.
• _Beiträge:Ein Verzeichnis mit den Inhalten Ihrer Website (dies könnten Blog-Beiträge sein). Dies können Markdown- oder HTML-Dateien mit bestimmten Dateinamenskonventionen sein:Jahr Monat Tag Titel.MARKUP.
• Gemfile und Gemfile.lock:Bundler verwendet diese Dateien, um die Ruby-Gems zu verwalten, von denen Ihre Website abhängt.
• indexes.md:Die Standard-Homepage Ihrer Website, generiert aus einer Markdown- oder HTML-Datei.

Sie können jedoch weitere Dateien/Ordner verwenden, um Ihre Jekyll-Site anzupassen. Zu diesen Ordnern gehören:

• _Anmachen:Ein Verzeichnis mit wiederverwendbaren HTML-Snippets, die in Layouts und Seiten eingefügt werden können. Wie Navigationsleiste, Fußzeile usw.
• _System:Das Verzeichnis mit den HTML-Layoutvorlagen, die die Struktur der Seite definieren.
• Vermögenswerte:Ein Verzeichnis, das alle von Ihrer Website verwendeten Dateien enthält, wie z. B. Bilder und CSS-Dateien.
• _sas:Das Verzeichnis mit den Sass-Dateien, die zum Generieren von CSS für die Site verwendet werden können.

Diese Dateistruktur bietet eine solide Grundlage für ein Jekyll-Projekt, kann aber bei Bedarf geändert werden, um spezifische Projektanforderungen zu erfüllen.

Schnellstart-Option: Verwenden Sie die GitHub-Vorlage

Alternativ zum Starten eines Projekts mit der Jekyll-CLI können Sie auch ein Git-Repository mit erstellenHallo Welt-Jekyll-VorlageBauen Sie mit Kinsta auf GitHub. wählenVerwenden Sie diese Vorlage>Erstellen Sie ein neues RepositoryKopieren Sie den Quellcode in ein neues Repository in Ihrem GitHub-Konto.

Vorschau der Jekyll-Site

Jetzt haben Sie eine Jekyll-Site, aber wie können Sie eine Vorschau davon anzeigen, bevor Sie sie an Ihre Bedürfnisse anpassen? Öffnen Sie das Terminal, gehen Sie in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus:

serw jekylla

Dadurch wird ein erstelltOrdner _siteErstellt, enthält alle statischen Projektdateien. Der Jekyll-Server wird ebenfalls gestartet und Sie können Ihre Website durchsuchenSiehe http://localhost:4000.

Wenn Sie diese URL in einem Webbrowser aufrufen, sollten Sie eine Jekyll-Site mit einem Minima-Theme sehen:

So passen Sie eine Jekyll-Website an

Wenn Sie mit Jekyll eine Website erstellen und Themes verwenden, können Sie die Website an Ihre Bedürfnisse anpassen. Sie können beispielsweise neue Seiten hinzufügen, das Seitenlayout ändern oder die Darstellung bestimmter Elemente anpassen. Jekyll kann alles.

So funktioniert Front Matter in Jekyll

Wenn Sie eine Seite oder einen Blogbeitrag in Ihrem Projektordner öffnen, wird oben auf der Seite ein Informationsblock mit drei Bindestrichen (-) angezeigt. Es läutetOffene CreditsEs steht fest.

Dies ist das Metadatenformat, das in Jekyll zum Speichern von Informationen über Seiten oder Beiträge verwendet wird – es kann in YAML oder JSON geschrieben sein.

--- Titel: „Willkommen bei Jekyll!“ Beschreibung: „Einführung in das, was Jekyll ist und wie es funktioniert“ Datum: 07.03.2023 16:54:37 +0100---

Im obigen Beispiel enthält frontmate Variablen wie Titel, Beschreibung und Eintragsdatum. Diese Variablen können im Layout oder Inhalt einer Seite oder eines Beitrags verwendet werden.

Jekyll analysiert den Inhalt der Benutzeroberfläche und generiert daraus eine HTML-Ausgabe für Ihre Website. Mit Front Matter können Sie verschiedene Optionen festlegen, z. B. Layout, Permalinks, Beitragsstatus usw.

So konfigurieren Sie das Standard-Deckblatt

Sie können auch eine Standardvorlage konfigurieren, sodass Sie nicht dieselbe Standardvorlage für ähnliche Dateien festlegen müssen. Wenn beispielsweise jeder Blogbeitrag denselben Namen und dasselbe Autorenlayout verwendet. Sie können in der Datei_config.ymlLegen Sie ein benutzerdefiniertes Titelbild für alle Ihre Blogbeiträge fest.

Der Aufbau ist etwas kompliziert, aber so sieht es aus. Fügen Sie dies unterhalb der letzten Konfiguration hinzu_config.yml-DateiEINS:

Standard: - Bereich: Pfad: „Beiträge“ # Leere Zeichenfolge bedeutet alle Dateien Wert: Array: „Beitrag“ Autor: „John Doe“

Wenn Sie jetzt bestellenserw jekyllaSie werden feststellen, dass Sie in Ihren Dateien darauf zugreifen können, auch wenn Sie nicht für jeden Artikel Layouts und Autoren definieren.

Vorsicht:Wenn kein Pfad angegeben ist, verwenden alle Dateien den angegebenen Titelbildwert.

Erstellen Sie Seiten in Jekyll

Wenn Sie eine Datei im Stammverzeichnis Ihres Projekts erstellen, wird diese als Seite bezeichnet. Die Namen, die Sie Ihren Dateien geben, werden am häufigsten in URLs verwendet. Geben Sie daher jeder Auslagerungsdatei einen für Menschen lesbaren Namen.

Wenn Sie beispielsweise B. haben, haben Sie eine Seite mit einer URLhttps://example.com/aboutErstellen Sie eine Datei mit dem NamenO.htmlLubO.mdDie Erweiterung .file gibt die Auszeichnungssprache (HTML oder Markdown) an, die für den Inhalt der Seite verwendet wird.

Sobald die Datei erstellt ist, können Sie die entsprechenden Untertitel und Inhalte hinzufügen. Speichern Sie die Datei und aktualisieren Sie die Jekyll-Site in Ihrem Browser. Die neue Seite sollte nun über die dem Dateinamen entsprechende URL erreichbar sein.

Erstellen Sie Layouts in Jekyll

Layouts werden verwendet, um die Struktur und das Erscheinungsbild der Seiten und Beiträge Ihrer Website zu definieren. Dies geschieht in der Regel meist mit HTML-Code. Sie können Kopf- und Fußzeilen sowie Metadaten in die Metadaten Ihrer Seite einbinden.

Der erste Schritt besteht darin, einen Ordner im Stammverzeichnis Ihres Projekts zu erstellen_Systemerstellen. Erstellen Sie als Nächstes eine Datei für jedes Layout. Diese Datei sollte einen aussagekräftigen Namen haben, der den Zweck des Layouts widerspiegelt. Sie können z.Bpage.htmlWird erstellt, um das Seitenlayout für alle Seiten der Website zu definieren.

Am besten definieren Sie die gesamte Layoutstruktur mithilfe von HTML oder einer anderen Auszeichnungssprache.

Sie können Platzhalter für jeden dynamischen Inhalt einfügen, der in das Layout eingefügt wird, z. B. B für Seitentitel, Inhalt und Metadaten. Sie können beispielsweise ein Grundlayout mit Kopf-, Fuß- und Inhaltsbereich wie folgt erstellen:

     
 
 
{{ Inhalt }}
 

In diesem Beispiel ein Platzhalter{{ Seitentitel }}ICH{{ Inhalt }}Wird durch den tatsächlichen Titel und Inhalt der gerenderten Seite ersetzt.

Alle Seiten oder Beiträge, die im Header einen Seitenlayoutwert verwenden, haben jetzt dieses Layout. Ein Ordner kann mehrere Layouts enthalten_SystemErstellen und gestalten Sie Layouts nach Bedarf. Sie können das Designlayout auch überschreiben, indem Sie ein Layout mit einem ähnlichen Namen definieren.

So funktioniert der Ordner „_includes“ in Jekyll

Datei_Mach es anEs enthält wiederverwendbare Codeausschnitte, die in verschiedene Teile der Website eingebettet werden können. Sie können beispielsweise eine Datei erstellenNavigationsleiste.htmlim Ordner „Enthält“ und wählen Sie ihn aus{% erlauben %}in der Layoutdateipage.htmlIch lege.

      
{% enthält navbar.html %}
 
{{Inhalt}}
   

Beim Build ersetzt Jekyll die Tags durch die folgendenNavigationsleiste.html.

Datei_Mach es anEs kann Dateien jeglicher Art enthalten, beispielsweise B.HTML-, Markdown- oder Liquid-Dateien. Das Hauptziel besteht darin, den Code trocken zu halten (wiederholen Sie sich nicht), indem Sie ihn auf der gesamten Website wiederverwenden können.

Durchsuchen Sie Beiträge in Jekyll

Wenn Sie Ihre eigene Blog-Seite mit all Ihren Blog-Beiträgen erstellen möchten, müssen Sie alle Beiträge von Ihrer Website herunterladen und ansehen. In Jekyll ist es ein Tag{% Ich mache %}Leicht möglich.

Alle Beiträge auf der Jekyll-Site werden in Variablen gespeichertpage.postsRettung. Sie können über diese und Fluidvariablen iterieren{{Beitragstitel}}Wird verwendet, um den Titel jedes Beitrags anzuzeigen:

{% za post w site.posts %}
{{Beitragstitel}}
{% Ende für %}

Sie können auch andere Liquid-Variablen verwenden, um zusätzliche Informationen zu jedem Beitrag anzuzeigen, wie z. B. Datum des Beitrags oder Autor:

{% za post w site.posts %}
{{Beitragstitel}}
 
Gepostet am {{ post.date | Datum: {{ post.author }}
(Video) WordPress Webseite als statische Webseite generieren
{% endfor %} 的„%B %-d, %Y“}}

Im obigen Beispiel formatiert der Filter „Liquid Date“ das Datum des Eintrags in ein besser lesbares Format.

Jetzt wissen Sie, welche grundlegenden Formatierungen Sie an Ihrer Jekyll-Site vornehmen können. Möglicherweise müssen Sie jedoch nicht alle diese Methoden 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 Ihrer Jekyll-Site ein Thema hinzu

Es gibt verschiedene Themes, die einfach hinzuzufügen sind, aber das Gute daran ist, dass es für jedes Theme immer klare Informationen zur Installation in der Readme-Datei auf GitHub gibt. Sie können das Thema klonen oder falls vorhandenThemen basierend auf EdelsteinenVerhalten, der Prozess ist einfacher.

In diesem Artikel werden Sie es installierenBlog-Themaund sich anpassenKinsta-BlogIch organisiere etwas. Das ist eine genetisch bedingte AngelegenheitQuellcodeICHAnleitung auf GitHubes kann gefunden werden.

Um ein Gem-basiertes Theme hinzuzufügen, öffnen Sie die Gems-Datei Ihrer Website und fügen Sie ein Gem für das Theme hinzu, das Sie verwenden möchten. Das Thema, das wir verwenden werden, ist diesesJekyll-Theme-Clean-Blog.Sie können das Standardthema verwendenminimaler PreisErsetzen Sie in der Gemfile:

Klejnot „jekyll-theme-clean-blog“

FührungsbefehlPaketinstallationInstallieren Sie das Theme-Gem und seine Abhängigkeiten in Ihrem Site-Verzeichnis.

in die Datei einfügen_config.ymlFügen Sie Ihrer Site die folgende Zeile hinzu, um das gewünschte Thema anzugeben:

Motyw: Jekyll-Theme-Clean-Blog

Ihr Theme ist jetzt einsatzbereit.

Sie sollten alle Layouts im Katalog sehen_SystemEntfernen Sie sie, damit sie das Designlayout nicht überschreiben.

Dann können Sie den Layoutnamen der Datei findenDokumentation von Problemen.Zum Beispiel, wenn Sie ein Thema verwendenJekyll-Theme-Clean-Blogist der Layoutname der Dateiindex.html Domfür andere SeitenSeiteund alle JobsPost-.

zu Schlussfolgerungen führenserw jekyllaErstellen und entwickeln Sie Ihre Website mit einem neuen Thema.

Das ist! Ihre Jekyll-Site sollte jetzt das neue, auf Edelsteinen basierende Design verwenden, das Sie hinzugefügt haben. Sie können Zugriff habenKatalog_LayoutsÄndern Sie Ihre Website.

Passen Sie Jekyll-Themen an

Sie haben gerade ein Thema zu Ihrer Website hinzugefügt. Anschließend müssen Sie die Website an Ihre Bedürfnisse anpassen und so arbeiten, wie Sie es möchten. Anstatt beispielsweise Bilder für jede Seite und jeden Beitrag anzuzeigen, wird ein grauer Hintergrund angezeigt.

Sie können dies beheben, indem Sie den Pfad zu dem Bild angeben, das Sie auf jeder Seite und jedem Beitrag verwenden möchten. In Jekyll sind Ressourcen wie Bilder in Ordnern"Vermögenswerte"Rettung. Innerhalb dieses Ordners können Sie Unterordner erstellen, um Ihre Bilder zu organisieren.

Sie können jetzt Hintergrundoptionen zum Pfad der Front Matter-Blöcke und ihrer Bilder hinzufügen. Auf der About-Seite ist dies beispielsweise das Titelbild:

---layout: Seitentitel: Aboutdescription: Dies ist die Beschreibung der Seite. Direkter Link: /about/background:'/assets/images/about-page.jpeg' ---

Wenn Sie dies für alle Seiten und Beiträge tun, sehen Ihre Seiten folgendermaßen aus:

Eine weitere Anpassung, die Sie vornehmen können, besteht darin, die Optionen in der Navigationsleiste anzupassen. Wenn Sie beispielsweise keine Kontaktseite benötigen, sollten Sie den entsprechenden Link aus den Optionen der Navigationsleiste entfernen. du kannst es benutzenTheme-QuellcodeÜberprüfen Sie die Datei, suchen Sie die Navigationslinkdatei und kopieren Sie genau diese Datei in Ihr Projekt. Entfernen Sie dabei unnötige Optionen.

Navigationslinks finden Sie unterDie Datei „navbar.html“ im Ordner „_includes“.Sie können diese Datei erstellen, den Code aus dem Quellcode einfügen und die Kontaktoptionen entfernen oder bei Bedarf neue hinzufügen.

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

Die letzte Verbesserung besteht darin, eine Beitragsseite zu erstellen, die alle Blogbeiträge enthält, was bedeutet, dass Sie alle Beiträge auf dieser Seite sehen können.

eine Datei erstellenpost.htmlund fügen Sie den folgenden Code ein:

---Layout: Seitentitel: Blog-Beschreibung: Erweitern Sie Ihr Wissen und bleiben Sie mit unseren interessanten Blogbeiträgen auf dem Laufenden. Verlauf: „/assets/images/blog-page.jpeg“--- {% für einen Beitrag auf site.posts %}
  
{{Titel des Beitrags}}
{% if post.subtitle %}
{{post.subtitle}}
{% ansonsten %}
Gepostet von {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} am {{ post.date | Datum: '%B %d, %Y' }} {% enthält read_time.html content=post.content %}
{% Ende für %}

Sie können das Hintergrundbild an das gespeicherte Bild anpassen. Durchlaufen Sie im obigen Code alle Beiträge, um alle Beiträge auf dieser Seite anzuzeigen. Dies ist die gespeicherte Beitragsseite.

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

Sie haben nun eine Jekyll-Website erstellt und diese entsprechend Ihren Bedürfnissen konfiguriert. Der letzte Schritt besteht darin, Inhalte hinzuzufügen oder zu erfahren, wie Sie Inhalte zu Ihrer Jekyll-Site hinzufügen.

Der gesamte Inhalt wird im Ordner _posts gespeichert. Jeder Inhalt wird in einer Datei mit einer ähnlichen Namenskonvention gespeichert:JJJJ-MM-TT-Titel.md(Lumb.htmlfür HTML-Dateien). Wenn Sie beispielsweise einen Artikel mit dem Namen „Mein erster Artikel“ erstellen möchten, erstellen Sie eine Datei2023-03-08-mein-erster-beitrag.mdIch binVerzeichnisbeiträge.

Fügen Sie dann für jeden Beitrag/jede Inhaltsdatei oben grundlegende Informationen zum Beitrag hinzu. Dazu gehören Layout, Titel, Beschreibung, Datum und andere Informationen.

---Layout: Beitragstitel: „Wie man liest: Tipps und Strategien zur Maximierung des Lernens“ Untertitel: „Lesen ist eine der effektivsten Möglichkeiten, sich neue Informationen anzueignen, neue Perspektiven zu gewinnen und Wissen zu erweitern.“ Datum: 2023-03-02 23:45:13 -0400 Verlauf: „/assets/images/blog/books.jpeg“ ---

Fügen Sie dann den Inhalt mithilfe von HTML-Tags oder Markup-Syntax unterhalb des Eingabeblocks ein.

Speichern Sie die Datei und Jekyll erstellt sie automatisch und bettet sie in Ihre Website ein.

So hosten Sie Ihre Jekyll-Website auf Kinsta

Kinsta ist eine Cloud-Plattform, auf der Sie könnenstatische Websiteeinschließlich Jekyll. Dazu gehörte die Konfiguration, das Hochladen des Codes auf GitHub und schließlich die Bereitstellung bei Kinsta.

Voraussetzung: Einrichtung der Jekyll-Site

Überprüfen Sie IhreKlicken Sie auf Gemfile.lockUnd stellen Sie sicher, dass es eine Plattform für alle Geräte enthält. Um sicherzustellen, dass alle Plattformen richtig konfiguriert sind, führen Sie den folgenden Befehl aus:

Paketsperre – Plattform arm64-darwin-22 x64-mingw-ucrt x86_64-linux hinzufügen

dann kannst duEingangBuild – Diese Datei definiert die Befehle, die ausgeführt werden sollen, wenn die Site entwickelt wird. Diese Datei aktualisiert automatisch die Befehle, die auf der Registerkarte „MyKinsta-Prozesse“ ausgeführt werden sollen. Hier ist der Befehl zum Hinzufügen zum Profil:

Netzwerk: package exec jekyll build && ruby​​-run -e httpd _site

Verschieben Sie Ihre Jekyll-Site nach GitHub

In diesem Artikel verwenden wir Git-Befehle, um Code auf GitHub zu veröffentlichen. Beginnen Sie mit der Erstellung eines Repositorys auf GitHub. Dadurch erhalten Sie Zugriff auf die Repository-URL.

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

Initialisierung

Fügen Sie nun den Code mit dem folgenden Befehl zu Ihrem lokalen Git-Repository hinzu:

ergänzen

Sie können nun Ihre Änderungen vornehmen mit:

git commit -m „Mein erster Commit“

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

Schließlich können Sie Ihren Code auf GitHub veröffentlichen mit:

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

Vorsicht:Ersetzen Sie „[Repository-URL]“ durch Ihre eigene GitHub-Repository-URL.

Nachdem Sie diese Schritte ausgeführt haben, wird Ihr Code auf GitHub hochgeladen und ist unter Ihrer Repository-URL verfügbar. Jetzt kannst du auf Kinsta wachsen!

Hosten Sie Ihre Jekyll-Website auf Kinsta

Die Bereitstellung bei Kinsta dauert nur wenige Minuten. anfangen beimein CousinSystemsteuerung zum Anmelden oder Erstellen eines Kontos. muss immer nochAutorisieren Sie Kinsta auf GitHub.

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

1. Klicken Sie auf die linke SeitenleisteAnwendung
2. klickenDienst hinzufügen
3. Klicken Sie auf die Dropdown-ListeAnwendung

Es erscheint ein Modal, in dem Sie ein Repository zum Hosten auswählen können. Wenn Ihr Repository mehrere Zweige enthält, wählen Sie den Zweig aus, in dem die Bereitstellung erfolgen soll.

Anschließend können Sie der App einen Namen geben. wähle einStandort des RechenzentrumsUnterhalb von 25 gibt das Profil automatisch Netzwerkprozessbefehle aus.

Ihre Anwendung wurde entwickelt. Innerhalb weniger Minuten erhalten Sie einen Link, der Sie zur konfigurierten Version der Website führt. In diesem Fall ist es:https://myblog-84b54.kinsta.app/

zusammenfassen

Jetzt verstehen Sie, wie Jekyll funktioniert und welche verschiedenen Anpassungen Sie an Jekyll vornehmen können. Jetzt können Sie sicher sein, dass Jekyll aufgrund seiner Einfachheit, Flexibilität und Leistungsfähigkeit ein großartiges Tool zum Erstellen statischer Websites ist.

Jekylls intuitives Vorlagensystem, Liquid Templates und die integrierte Unterstützung für Markdown und andere Auszeichnungssprachen machen es einfach, schnell inhaltsreiche Websites zu erstellen und zu verwalten.

Sie können alle Seiten statisch machenKostenloses Kinsta-App-HostingGastgeber. Wenn es Ihnen gefällt, können Sie für uns stimmenZitate über Tierliebeentscheide dasAb nur 7 $ pro Monatverfügbar.

Was halten Sie von Jekyll? Hast du etwas mit Jekyll gemacht? Teilen Sie Ihre Projekte und Erfahrungen mit uns in den Kommentaren unten.