{"id":61200,"date":"2023-04-27T11:34:04","date_gmt":"2023-04-27T10:34:04","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=61200&#038;preview=true&#038;preview_id=61200"},"modified":"2023-08-23T16:09:52","modified_gmt":"2023-08-23T15:09:52","slug":"eleventy","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/eleventy\/","title":{"rendered":"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest"},"content":{"rendered":"<p>Mit dem Aufkommen von <a href=\"https:\/\/kinsta.com\/de\/blog\/statische-webseiten-generatoren\/\">Static Site Generators<\/a> (SSGs) wie Eleventy war es noch nie so einfach, eine elegante und effiziente statische Website zu erstellen.<\/p>\n<p>In diesem Artikel zeigen wir dir, wie du mit Eleventy eine beeindruckende und funktionale statische Portfolio-Website erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.<\/p>\n<p>Au\u00dferdem erf\u00e4hrst du, wie du deine statische Website direkt <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application\">von deinem GitHub-Repository auf der Kinsta Anwendungs-Hosting-Plattform<\/a> bereitstellst, damit deine Website schnell unter der kostenlosen Domain <em>.kinsta.app<\/em> online gehen kann.<\/p>\n<p>Hier siehst du eine <a href=\"https:\/\/ty-portfolio-lvjy7.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Live-Demo<\/a> der statischen Portfolio-Website, die du mit Eleventy erstellst.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/11ty-portfolio-static-site.jpg\" alt=\"Stilvolle statische Portfolio-Website\" width=\"1600\" height=\"788\"><figcaption class=\"wp-caption-text\">Stilvolle statische Portfolio-Website<\/figcaption><\/figure>\n<p>Du kannst auf das <a href=\"https:\/\/github.com\/kinsta\/11ty-portfolio\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub-Repository<\/a> dieses Projekts zugreifen, wenn du einen genaueren Blick darauf werfen m\u00f6chtest.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist Eleventy?<\/h2>\n<p>Eleventy, auch bekannt als 11ty, ist ein Generator f\u00fcr statische Websites, der Websites mit <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> und <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> erstellt, ohne dass Datenbanken und <a href=\"https:\/\/kinsta.com\/de\/blog\/backend-vs-frontend\/\">Backend<\/a>-Programmiersprachen erforderlich sind.<\/p>\n<p>Eleventy ist bekannt f\u00fcr seine Einfachheit und Flexibilit\u00e4t, da es dich nicht zwingt, nur eine Vorlagensprache oder ein Framework zu verwenden. Es unterst\u00fctzt mehr als 10 Vorlagensprachen und erlaubt dir sogar, so viele wie du willst in einem einzigen Projekt zu verwenden:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/11ty-template-languages.jpg\" alt=\"Von Eleventy unterst\u00fctzte Vorlagensprachen\" width=\"1600\" height=\"226\"><figcaption class=\"wp-caption-text\">Von Eleventy unterst\u00fctzte Vorlagensprachen<\/figcaption><\/figure>\n<p>Eleventy erm\u00f6glicht es dir, wie die meisten SSGs, den Inhalt deiner statischen Website mit wiederverwendbaren Komponenten aufzubauen, anstatt f\u00fcr jede Seite ein komplettes HTML-Dokument zu erstellen.<\/p>\n\n<h2>So installierst du Eleventy<\/h2>\n<p>Die Installation von Eleventy ist ganz einfach. So geht&#8217;s:<\/p>\n<ol start=\"1\">\n<li>Stelle sicher, dass du <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-node-js\/\">Node.js<\/a> auf deinem Computer installiert hast. Das kannst du \u00fcberpr\u00fcfen, indem du den Befehl <code>node -v<\/code> in deinem Terminal ausf\u00fchrst. Nicht verf\u00fcgbar? Hier erf\u00e4hrst du , <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">wie du Node.js auf deinem Computer installierst<\/a>.<\/li>\n<li>Erstelle ein neues Verzeichnis f\u00fcr dein Projekt.<\/li>\n<li>\u00d6ffne dein Terminal und f\u00fchre den Befehl <code>npm init -y<\/code> im Verzeichnis deines Projekts aus, um ein neues Node.js-Projekt zu initialisieren und eine <strong>package.json<\/strong>-Datei mit Standardeinstellungen zu erstellen.<\/li>\n<li>F\u00fchre den Befehl <code>npm install @11ty\/eleventy --save-dev<\/code> aus, um das Paket als Entwicklungsabh\u00e4ngigkeit in deinem Projekt zu installieren.<\/li>\n<li>Das war&#8217;s! Jetzt kannst du Eleventy starten, indem du den Befehl <code>npx @11ty\/eleventy<\/code> in deinem Projektverzeichnis ausf\u00fchrst. Dadurch werden deine Site-Dateien erzeugt und in einem <strong>_site<\/strong>-Verzeichnis (oder dem von dir konfigurierten Verzeichnis) in deinem Projektordner ausgegeben.<\/li>\n<\/ol>\n<p><strong>Hinweis:<\/strong> Wenn du den Befehl <code>npx @11ty\/eleventy<\/code> ausf\u00fchrst. Du erh\u00e4ltst diese Ausgabe:<\/p>\n<pre><code class=\"language-bash\">[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)<\/code><\/pre>\n<p>Hier werden 0 Dateien geschrieben, weil sich keine Vorlagen im Ordner deines Projekts befinden.<\/p>\n<h2>Eleventy-Befehle und Konfiguration<\/h2>\n<p>Du hast jetzt dein Eleventy-Projekt erstellt, aber das ist noch nicht alles. Du musst noch einige Konfigurationen erstellen und einige grundlegende Befehle f\u00fcr deine statische Website kennen, die an den Browser gesendet werden k\u00f6nnen.<\/p>\n<h3>Eleventy-Befehle<\/h3>\n<p>Hier sind einige der wichtigsten Eleventy-Befehle, die du kennen solltest:<\/p>\n<ul>\n<li><code>npx eleventy<\/code>: Mit diesem Befehl baust du deine Website auf und gibst das Ergebnis im <strong>_site<\/strong>-Ordner aus (oder in einem anderen Ordner, den du als Ausgabeverzeichnis festgelegt hast).<\/li>\n<li><code>npx @11ty\/eleventy --serve<\/code>: Mit diesem Befehl wird ein lokaler Server gestartet, damit du eine Vorschau deiner Website in deinem Browser sehen kannst. Wenn du \u00c4nderungen an deiner Seite vornimmst, wird dein Projekt automatisch neu erstellt und in deinem Browser aktualisiert.<\/li>\n<li><code>npx @11ty\/eleventy --serve --port=8081<\/code>: Mit diesem Befehl startest du den Eleventy-Server und gibst einen benutzerdefinierten Port an, auf dem der Server lauschen soll.<\/li>\n<li><code>npx @11ty\/eleventy --watch<\/code>: Dieser Befehl \u00fcberwacht deine Projektdateien auf \u00c4nderungen und baut deine Website bei Bedarf automatisch neu auf.<\/li>\n<\/ul>\n<p>Du musst diese Befehle nicht auswendig lernen, denn du kannst sie zu den allgemeinen Befehlen im Skriptobjekt deiner package.json-Datei hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-bash\">\"scripts\": {\n    \"start\": \"npx @11ty\/eleventy --serve\",\n    \"watch\": \"npx @11ty\/eleventy --watch\",\n    \"build\": \"npx eleventy\"\n  },<\/code><\/pre>\n<p>Jetzt kannst du <code>npm start<\/code> anstelle von <code>npx @11ty\/eleventy --serve<\/code> verwenden, um deine Anwendung zu bedienen, und du kannst auch <code>npm run build<\/code> anstelle von <code>npx eleventy<\/code> ausf\u00fchren.<\/p>\n<h3>Wie du deine statische Website mit Eleventy konfigurierst<\/h3>\n<p>Eleventy ist standardm\u00e4\u00dfig &#8222;Zero-Config&#8220; und hat flexible Konfigurationsoptionen. Hier sind einige wichtige Konfigurationsoptionen, die du kennen solltest:<\/p>\n<ul>\n<li><strong>eingabe:<\/strong> Mit dieser Option kannst du das Verzeichnis f\u00fcr deine Projektdateien angeben. Am besten ist es, <strong>src<\/strong> zu verwenden.<\/li>\n<li><strong>output:<\/strong> Mit dieser Option kannst du das Verzeichnis angeben, in dem deine erstellte Website ausgegeben werden soll. Standardm\u00e4\u00dfig gibt Eleventy die Dateien im Ordner <strong>_site<\/strong> aus. (Viele Entwickler verwenden <strong>public<\/strong>).<\/li>\n<li><strong>templateFormats:<\/strong> Mit dieser Option kannst du festlegen, welche Dateierweiterungen als Vorlagen verarbeitet werden sollen. Standardm\u00e4\u00dfig verarbeitet Eleventy <strong>.html<\/strong>-, <strong>.njk<\/strong>&#8211; und <strong>.md<\/strong>-Dateien als Vorlagen.<\/li>\n<\/ul>\n<p>Dies sind nur einige der Befehle und Konfigurationsoptionen, die in Eleventy zur Verf\u00fcgung stehen. Um dein Eleventy-Projekt zu konfigurieren, erstelle eine <strong>.eleventy.js<\/strong>-Datei im Stammverzeichnis deines Projekts. F\u00fcge dann diesen Code in die Datei ein, um deinem Projekt eine Struktur zu geben, die Eingabe- und Ausgabeverzeichnisse enth\u00e4lt:<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    return {\n        dir: {\n            input: 'src',\n            output: 'public',\n        },\n    };\n};<\/code><\/pre>\n<p><strong>Hinweis:<\/strong> <code>eleventyConfig<\/code> wird als Argument \u00fcbergeben und bietet weitere Konfigurationsoptionen, die sp\u00e4ter in diesem Projekt verwendet werden.<\/p>\n<h2>Vorschau einer Eleventy-Website<\/h2>\n<p>Du kennst jetzt einige wichtige Befehle, mit denen du eine Vorschau deiner statischen Eleventy-Website erstellen kannst. Wenn du jedoch einen Befehl wie <code>npx @11ty\/eleventy<\/code> ausf\u00fchrst, wird nichts angezeigt. Das liegt daran, dass du keine Vorlagendatei hast.<\/p>\n<p>Du kannst einen <strong>src<\/strong>-Ordner im Stammverzeichnis deines Projekts anlegen und dann einige Vorlagendateien wie <strong>index.html<\/strong> erstellen oder deine bevorzugte Vorlagensprache verwenden, um die Startseite darzustellen:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;title&gt;Eleventy Static Site&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        Hello World!\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Wenn du nun den Befehl <code>npx @11ty\/eleventy<\/code> ausf\u00fchrst, wird ein <strong>\u00f6ffentlicher<\/strong> Ordner mit der erzeugten statischen Datei erstellt. Du wirst diese Datei auf jeden Fall in deinem Browser anzeigen lassen und einige Hot-Reloading-Funktionen aktivieren wollen. Das ist m\u00f6glich, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n<pre><code class=\"language-bash\">npx @11ty\/eleventy --serve<\/code><\/pre>\n<p>Damit wird deine Website auf http:\/\/localhost:8080\/ bereitgestellt.<\/p>\n<p>Diese Befehle sind ziemlich schwer zu merken und immer zu verwenden. Du hast sie bereits in deiner <strong>package.json<\/strong> Datei zur vertrauten Syntax hinzugef\u00fcgt, also kannst du <code>npm start<\/code> verwenden, um deine Anwendung auf <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a> zu serven <a href=\"http:\/\/localhost:8080\/\">.<\/a><\/p>\n<h2>Wie du eine statische Portfolio-Website mit Eleventy erstellst<\/h2>\n<p>Du wei\u00dft jetzt, wie du eine statische Website mit Eleventy erstellen kannst. Lass uns das Portfolio-Projekt erstellen.<\/p>\n<p>Du kannst ein neues Eleventy-Projekt von Grund auf erstellen, oder du m\u00f6chtest Bilder, CSS und aktuelle Inhalte f\u00fcr dein Projekt, deshalb haben wir eine <a href=\"https:\/\/github.com\/olawanlejoel\/11ty-portfolio-starter\" target=\"_blank\" rel=\"noopener noreferrer\">Vorlage f\u00fcr das GitHub-Repository<\/a> erstellt, damit du schneller vorankommst. W\u00e4hle in GitHub die Option <strong>Diese Vorlage verwenden<\/strong> &gt; <strong>Neues Repository erstellen<\/strong>, um diese Assets und die anf\u00e4nglichen Konfigurationsdateien in ein eigenes Repository zu kopieren und dann auf deinen lokalen Rechner herunterzuladen.<\/p>\n<p>Dein Projekt wird die folgende Struktur haben:<\/p>\n<pre><code class=\"language-bash\">\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 public\/\n\u251c\u2500\u2500 src\/\n |        \u251c\u2500\u2500 _includes\n |                      \u251c\u2500\u2500 layouts\n \u2502       \u251c\u2500\u2500 assets\n \u2502       \u251c\u2500\u2500 css\n \u2502       \u251c\u2500\u2500 projects\n \u2502       \u2514\u2500\u2500 index.njk\n\u251c\u2500\u2500 .eleventy.js\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 package.lock.json\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n<h3>Wie du Vorlagen in Eleventy verwendest<\/h3>\n<p>Bei der Verwendung von Eleventy gibt es drei Haupttypen von Vorlagen, die du verstehen musst. Diese Vorlagen k\u00f6nnen mit Nunjucks erstellt werden. Damit kannst du Variablen, Schleifen, Bedingungen und andere Logik definieren, mit denen du den Inhalt der Seite dynamisch generieren kannst.<\/p>\n<ul>\n<li><strong>Seitenvorlagen:<\/strong> Sie definieren die Struktur und den Inhalt der einzelnen Seiten deiner Website.<\/li>\n<li><strong>Layout-Vorlagen:<\/strong> Sie definieren die Gesamtstruktur und das Design deiner Website-Seite(n). Sie enthalten normalerweise gemeinsame Elemente wie Kopf- und Fu\u00dfzeilen, Navigationsmen\u00fcs und Seitenleisten, die auf mehreren Seiten verwendet werden.<\/li>\n<li><strong>Partialvorlagen:<\/strong> Sie definieren kleine, wiederverwendbare Abschnitte des HTML-Markups deiner Website. Sie werden in der Regel verwendet, um gemeinsame Elemente wie Kopf- und Fu\u00dfzeilen, Navigationsmen\u00fcs und Seitenleisten zu definieren, die in Layout- und Seitenvorlagen aufgenommen werden k\u00f6nnen.<\/li>\n<\/ul>\n<p>Jetzt kennst du jeden dieser Vorlagentypen. Lass uns nun Vorlagen f\u00fcr die statische Portfolio-Website erstellen.<\/p>\n<h4>So erstellst du Layouts in Eleventy<\/h4>\n<p>Erstelle innerhalb des src-Verzeichnisses ein <strong>_includes<\/strong>-Verzeichnis. Darin werden alle Layouts und Teilvorlagen gespeichert.<\/p>\n<p>Dann kannst du einen Ordner &#8222;<strong>layouts<\/strong>&#8220;\u00a0erstellen (f\u00fcr eine gute Organisation), in dem alle Layouts gespeichert werden. Diese Layouts sind Vorlagen und k\u00f6nnen deine bevorzugte Vorlagensprache verwenden, z. B. Nunjucks, die wir hier verwenden.<\/p>\n<p>Erstellen wir eine Datei <strong>base.njk<\/strong>, in der das allgemeine Layout f\u00fcr alle Seiten gespeichert wird.<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;link rel=\"icon\" href=\"\/assets\/favicon.jpeg\" \/&gt;\n        &lt;link\n            rel=\"stylesheet\"\n            href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n            integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n            crossorigin=\"anonymous\"\n            referrerpolicy=\"no-referrer\"\n        \/&gt;\n        &lt;link rel=\"stylesheet\" href=\"\/css\/global.css\" \/&gt;\n        &lt;title&gt;J.'s Portfolio&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div&gt;\n            {{ content | safe }}\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Im obigen Code wird ein allgemeines HTML-Markup erstellt und Font Awesome von einem CDN eingebunden, damit du Zugriff auf die Icons hast. Au\u00dferdem wird die Variable content \u00fcbergeben, damit alle Inhalte aller Seiten, die dieses Layout verwenden, enthalten sind.<\/p>\n<p>Aber das ist noch nicht die ganze Geschichte des Layouts. Dein Layout wird einige Abschnitte haben, die auf jeder Seite erscheinen, z. B. die Navigationsleiste und die Fu\u00dfzeile. F\u00fcr jeden dieser Abschnitte werden wir Teilbereiche erstellen.<\/p>\n<h4>So verwendest du Teilbereiche in Eleventy<\/h4>\n<p>Alle Teilbereiche werden im Verzeichnis <strong>_includes<\/strong> gespeichert. Um sie zu organisieren, kannst du sie in einem Ordner speichern. In diesem Fall erstellst du einen <strong>Komponenten<\/strong>-Ordner im <strong>_includes<\/strong>-Verzeichnis und erstellst Vorlagen f\u00fcr die Navigationsleiste und die Fu\u00dfzeile.<\/p>\n<p>Hier sind die Navbar Partials in <strong>navbar.njk<\/strong>:<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"nav-container\"&gt;\n    &lt;div class=\"logo\"&gt;\n        &lt;a href=\"\/\"&gt;\n            J.\n        &lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"nav\"&gt;\n        &lt;a href=\"\/projects\" class=\"link\"&gt;\n            Projects\n        &lt;\/a&gt;\n        &lt;a href=\"https:\/\/docs.google.com\/document\/d\/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE\/edit?usp=sharing\" class=\"cta-btn\"&gt;Resume&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Hier sind die Fu\u00dfzeilenvorlagen in <strong>footer.njk<\/strong>:<\/p>\n<pre><code class=\"language-html\">&lt;hr \/&gt;\n&lt;div class=\"footer-container\"&gt;\n    &lt;p&gt;\u00a9 {% year %} Joel's Portfolio&lt;\/p&gt;\n    &lt;div class=\"social_icons\"&gt;\n        &lt;a\n            href=\"https:\/\/twitter.com\/olawanle_joel\"\n            aria-label=\"Twitter\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n        &gt;\n            &lt;i class=\"fa-brands fa-twitter\"&gt;&lt;\/i&gt;\n        &lt;\/a&gt;\n        &lt;a\n            href=\"https:\/\/github.com\/olawanlejoel\"\n            aria-label=\"GitHub\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n        &gt;\n            &lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;\n        &lt;\/a&gt;\n        &lt;a\n            href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n            aria-label=\"LinkedIn\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n        &gt;\n            &lt;i class=\"fa-brands fa-linkedin\"&gt;&lt;\/i&gt;\n        &lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>F\u00fcge diese Partials zu deiner Seite oder Layoutvorlage hinzu. Das kannst du mit der Anweisung <code>{% include %}<\/code> tun. So sieht die Vorlage <strong>layouts\/base.njk<\/strong> aus, wenn du die Vorlagen navbar und footer einf\u00fcgst:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;link rel=\"icon\" href=\"\/assets\/favicon.jpeg\" \/&gt;\n        &lt;link\n            rel=\"stylesheet\"\n            href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n            integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n            crossorigin=\"anonymous\"\n            referrerpolicy=\"no-referrer\"\n        \/&gt;\n        &lt;link rel=\"stylesheet\" href=\"\/css\/global.css\" \/&gt;\n        &lt;title&gt;J.'s Portfolio&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div&gt;\n            {% include \"components\/navbar.njk\" %}\n                {{ content | safe }}\n            {% include \"components\/footer.njk\" %}\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Wenn du den Befehl <code>npm start<\/code> ausf\u00fchrst, wird dieses Layout nicht angezeigt, weil es keiner Seitenvorlage hinzugef\u00fcgt wurde. Erstelle eine Seitenvorlage und f\u00fcge dieses Layout hinzu.<\/p>\n<h4>So erstellst du Seitenvorlagen in Eleventy<\/h4>\n<p>Erstelle in deinem <strong>src<\/strong>-Ordner eine <strong>index.njk<\/strong>-Datei, die als Startseite f\u00fcr deine Portfolio-Website dient. Diese Seite wird das Basislayout verwenden:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/base.njk\ntitle: Home\n---\n&lt;h1&gt; This is the {{title}} Page. &lt;\/h1&gt;<\/code><\/pre>\n<p>Wenn du jetzt den Befehl <code>npm start<\/code> ausf\u00fchrst, wird deine statische Seite auf <strong>http:\/\/localhost:8080\/<\/strong> geladen <strong>.<\/strong> So sieht die Ausgabe aus:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-home-page.jpg\" alt=\"Seitenvorlage ohne Styling\" width=\"1600\" height=\"470\"><figcaption class=\"wp-caption-text\">Seitenvorlage ohne Styling<\/figcaption><\/figure>\n<h3>Wie du CSS und Bilder in Eleventy verwendest<\/h3>\n<p>Du kennst jetzt die verschiedenen Vorlagen, die es gibt, wie sie funktionieren und wie sie zusammen verwendet werden k\u00f6nnen. Aber du wirst feststellen, dass in der Datei <strong>layouts\/base.njk<\/strong> eine CSS-Datei verlinkt ist, um die Portfolioseite zu stylen, aber wenn die Seite geladen wird, werden die CSS-Stile nicht beeinflusst, weil die CSS-Datei nicht zum <strong>\u00f6ffentlichen<\/strong> Ordner hinzugef\u00fcgt wurde.<\/p>\n<p>Um dieses Problem zu beheben, musst du es in deiner<strong>.eleventy.js<\/strong>-Datei mit dem Parameter <code>eleventyConfig<\/code> konfigurieren. Auf diese Weise wei\u00df Eleventy, dass die CSS-Datei(en) vorhanden sind, und achtet auch auf m\u00f6gliche \u00c4nderungen an der CSS-Datei.<\/p>\n<p>Im <strong>src<\/strong>-Ordner kannst du einen <strong>css<\/strong>-Ordner anlegen, in dem du alle CSS-Dateien speicherst, die du in deinem Projekt verwendest. F\u00fcr diesen Artikel kannst du jedoch nur eine CSS-Datei verwenden &#8211; <a href=\"https:\/\/github.com\/kinsta\/11ty-portfolio\/blob\/starter\/src\/css\/global.css\" target=\"_blank\" rel=\"noopener noreferrer\">global.css<\/a>. Dann kannst du den <strong>css<\/strong>-Ordner so konfigurieren, dass er alle Dateien innerhalb des Ordners konfiguriert:<\/p>\n<pre><code class=\"language-js\">eleventyConfig.addPassthroughCopy('src\/css');\neleventyConfig.addWatchTarget('src\/css');<\/code><\/pre>\n<p>Das Gleiche gilt f\u00fcr Bilder. Wenn du ein Bild zu deiner Seite hinzuf\u00fcgst, wirst du feststellen, dass es nicht angezeigt wird. Damit es angezeigt wird, musst du den Ordner konfigurieren, in dem die Bilder gespeichert sind. Legen wir einen Ordner &#8222;<strong>Assets<\/strong>&#8220;\u00a0an, in dem wir alle unsere Bilder speichern, und konfigurieren wir den Ordner &#8222;<strong>Assets<\/strong>&#8222;.<\/p>\n<pre><code class=\"language-js\">eleventyConfig.addPassthroughCopy('src\/assets');<\/code><\/pre>\n<p>So sieht deine Konfigurationsdatei jetzt aus:<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    eleventyConfig.addPassthroughCopy('src\/assets');\n    eleventyConfig.addPassthroughCopy('src\/css');\n    eleventyConfig.addWatchTarget('src\/css');\n\n    return {\n        dir: {\n            input: 'src',\n            output: 'public',\n        },\n    };\n};<\/code><\/pre>\n<p>Wenn du <code>npm start<\/code> aufrufst, wird das CSS-Styling funktionieren und deine Homepage wird so aussehen:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-home-page-with-css.jpg\" alt=\"Aussehen der Vorlage nach dem Hinzuf\u00fcgen des Layouts\" width=\"1600\" height=\"436\"><figcaption class=\"wp-caption-text\">Aussehen der Vorlage nach dem Hinzuf\u00fcgen des Layouts<\/figcaption><\/figure>\n<h2>Partials erstellen und zur Startseite hinzuf\u00fcgen<\/h2>\n<p>Du hast nun erfolgreich ein Layout erstellt und es zu deiner Homepage (<strong>index.njk<\/strong>) hinzugef\u00fcgt. Jetzt kannst du die Startseite anpassen, um einige Informationen \u00fcber dich zu speichern, z. B. weitere Informationen \u00fcber dich, deine F\u00e4higkeiten und Kontaktinformationen.<\/p>\n<p>Du kannst deine Codes und Markups direkt in die <strong>index.njk<\/strong>-Vorlage einf\u00fcgen, aber wir werden einzelne Partials f\u00fcr die Home-, About-, Skills- und Kontaktinformationen erstellen.<\/p>\n<h3>Die Hero-Partials<\/h3>\n<p>Dies ist der erste Bereich unterhalb der Navigationsleiste, der den Nutzern einen Eindruck davon vermitteln soll, worum es auf der Website geht.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"hero-container\"&gt;\n    &lt;img src='assets\/profile.jpeg' class=\"profile-img\" alt=\"Joe's personal headshot\" \/&gt;\n    &lt;div class=\"hero-text\"&gt;\n        &lt;h1&gt;Hey, I'm Joe \ud83d\udc4b&lt;\/h1&gt;\n        &lt;p&gt;\n            I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.\n        &lt;\/p&gt;\n        &lt;div class=\"social-icons\"&gt;\n            &lt;a href=\"https:\/\/twitter.com\/olawanle_joel\"&gt;\n                &lt;i class=\"fa-brands fa-twitter\"&gt;&lt;\/i&gt;\n            &lt;\/a&gt;\n            &lt;a href=\"https:\/\/github.com\/olawanlejoel\"&gt;\n                &lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;\n            &lt;\/a&gt;\n            &lt;a href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"&gt;\n                &lt;i class=\"fa-brands fa-linkedin\"&gt;&lt;\/i&gt;\n            &lt;\/a&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Der obige Code enth\u00e4lt einige Angaben zu deiner Person sowie einige soziale Symbole, die Links zu deinen Social-Media-Profilen enthalten.<\/p>\n<p>Die Hero-Teile sollten wie folgt aussehen:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-hero-partials.jpg\" alt=\"Die Hero-Partials zeigen grundlegende, einpr\u00e4gsame Details \u00fcber den Entwickler an\" width=\"1600\" height=\"680\"><figcaption class=\"wp-caption-text\">Hero-Anzeige<\/figcaption><\/figure>\n<p>Du kannst dem Hero-Abschnitt weitere Inhalte hinzuf\u00fcgen, die Stile in der Datei css\/globals.css \u00e4ndern oder sogar deine eigene Version dieses Abschnitts erstellen.<\/p>\n<h3>Die \u00dcber-Teilseiten<\/h3>\n<p>Im Abschnitt &#8222;\u00dcber&#8220; erf\u00e4hrt der Besucher deines Portfolios in beliebig vielen Abs\u00e4tzen mehr \u00fcber dich. Das kann eine eigene Seite sein, wenn du mehr Informationen zu erz\u00e4hlen hast.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"about-container\"&gt;\n    &lt;h2&gt;About Me&lt;\/h2&gt;\n    &lt;div class=\"flex-about\"&gt;\n        &lt;div class=\"about-text\"&gt;\n            &lt;p&gt;\n                As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.\n            &lt;\/p&gt;\n            &lt;p&gt;Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"about-img\"&gt;\n            &lt;Image src='\/assets\/about.jpeg' class=\"profile-img\" alt=\"Joe and animal relaxing and having fun\" \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Der Code enth\u00e4lt Informationen \u00fcber dich (ein Bild und etwas Text). So soll der Abschnitt \u00dcber dich aussehen:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-about-partials.jpg\" alt=\"\u00dcber dich Partials\" width=\"1600\" height=\"704\"><figcaption class=\"wp-caption-text\">\u00dcber dich Partials<\/figcaption><\/figure>\n<h3>Die Skills Partials<\/h3>\n<p>In diesem Abschnitt werden die Technologien angezeigt, die du benutzt oder gerne benutzt.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"skills-container\"&gt;\n    &lt;h2&gt;Skills&lt;\/h2&gt;\n    &lt;div class=\"grid-skills\"&gt;\n        &lt;div class=\"skill-card html\"&gt;\n            &lt;i class=\"fa-brands fa-html5 html-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;HTML&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card css\"&gt;\n            &lt;i class=\"fa-brands fa-css3-alt css-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;CSS&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card js\"&gt;\n            &lt;i class=\"fa-brands fa-js-square js-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;JavaScript&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card react\"&gt;\n            &lt;i class=\"fa-brands fa-react react-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;React&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card node\"&gt;\n            &lt;i class=\"fa-brands fa-node-js node-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;Node&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card python\"&gt;\n            &lt;i class=\"fa-brands fa-python python-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;Python&lt;\/p&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Der obige Code erstellt eine Karte, auf der das Technologie-Symbol und der Name f\u00fcr jede Fertigkeit stehen. Du kannst auch weitere Stile hinzuf\u00fcgen und den Code \u00e4ndern, um ihn ansprechender und eindeutiger zu gestalten. So soll der Bereich der F\u00e4higkeiten aussehen:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-skills-partials.jpg\" alt=\"Fertigkeiten Partials, die alle zus\u00e4tzlichen Fertigkeiten anzeigen\" width=\"1600\" height=\"446\"><figcaption class=\"wp-caption-text\">Fertigkeiten Partials<\/figcaption><\/figure>\n<h3>Die Kontakt-Teilbereiche<\/h3>\n<p>Da es sich um ein Portfolio handelt, solltest du potenziellen Kunden die M\u00f6glichkeit geben, dich zu erreichen. Eine M\u00f6glichkeit w\u00e4re, dass sie dir eine E-Mail schicken.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"contact-container\"&gt;\n    &lt;h2&gt;Get In Touch&lt;\/h2&gt;\n    &lt;p&gt;If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!&lt;\/p&gt;\n    &lt;a href=\"mailto:joelolawanle@kinsta.com\" class='cta-btn'&gt;Say Hello&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ersetze die E-Mail-Adresse im <code>a<\/code> Tag durch deine eigene, damit die Schaltfl\u00e4che eine E-Mail-Anwendung startet, mit der man dir eine Nachricht schicken kann.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-contact-partials.jpg\" alt=\"Kontakt-Partials zeigen ein paar Informationen und einen CTA-Button an\" width=\"1600\" height=\"318\"><figcaption class=\"wp-caption-text\">Kontakt-Partials<\/figcaption><\/figure>\n<p>Du hast nun erfolgreich alle Partials f\u00fcr deine Homepage erstellt. Als N\u00e4chstes musst du sie in deine <strong>index.njk<\/strong>-Datei einbinden, damit sie auf der Startseite angezeigt werden k\u00f6nnen:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/base.njk\ntitle: Home\n---\n{% include \"components\/hero.njk\" %}\n{% include \"components\/about.njk\" %}\n{% include \"components\/skills.njk\" %}\n{% include \"components\/contact.njk\" %}<\/code><\/pre>\n<p>Wenn du den Startbefehl ausf\u00fchrst, werden auf deiner Startseite alle hinzugef\u00fcgten Partials entsprechend angezeigt.<\/p>\n<h3>Wie du Sammlungen in Eleventy verwendest<\/h3>\n<p>In Eleventy sind Sammlungen eine M\u00f6glichkeit, zusammengeh\u00f6rige Inhalte zu gruppieren, so dass du Seiten auf Basis dieser Inhalte erstellen kannst. Wenn du zum Beispiel Markdown-Dateien mit \u00e4hnlichen Inhalten (Blog-Posts) in einem Blog-Ordner deines Projekts gespeichert hast, kannst du Sammlungen verwenden, um sie abzurufen und eine Liste aller Inhalte anzuzeigen. Au\u00dferdem kannst du ein Layout erstellen, um zu bestimmen, wie diese Inhalte angezeigt werden sollen.<\/p>\n<p>Sammlungen werden in der Konfigurationsdatei <strong>.eleventy.js<\/strong> definiert und k\u00f6nnen Daten aus verschiedenen Quellen enthalten, z. B. aus Markdown- oder JSON-Dateien.<\/p>\n<p>F\u00fcr diese Portfolio-Website erstellen wir ein <strong>Projektverzeichnis<\/strong> im <strong>src<\/strong>-Verzeichnis, um die Markdown-Inhalte der einzelnen Projekte zu speichern. Dieser Inhalt enth\u00e4lt Details \u00fcber das Projekt, das gel\u00f6ste Problem, die verwendeten Technologien, die aufgetretenen Herausforderungen und die gemachten Erfahrungen.<\/p>\n<p>Du kannst eine Markdown-Datei mit dem Namen des Projekts erstellen (<strong>quotes-generator.md<\/strong>) und den unten stehenden Code einf\u00fcgen:<\/p>\n<pre><code class=\"language-md\">---\ntitle: Quotes Generator\ndescription: \"Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.\"\ngitHubURL: \"https:\/\/github.com\/olawanlejoel\/random-quote-generator\"\nimage: \"\/assets\/quotes-banner.jpeg\"\n---\n\nThe quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.\n\n### Technologies Used\nThe technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.\n\n### Challenges and Lessons Learned\nOne of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.\n\nAnother challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.\n\nThroughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.\n\nOverall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.<\/code><\/pre>\n<p><strong>Hinweis:<\/strong> Wenn du die Startvorlage verwendet hast, solltest du sie bereits haben. Andernfalls kannst du sie aus dem Verzeichnis projects unserer <a href=\"https:\/\/github.com\/kinsta\/11ty-portfolio\/tree\/starter\/src\/projects\" target=\"_blank\" rel=\"noopener noreferrer\">Startvorlage auf GitHub<\/a> kopieren.<\/p>\n<p>Das Frontmatter am Anfang dieser Dateien stellt wie die Vorlagen Werte f\u00fcr die Injektion in deine Vorlagen zur Verf\u00fcgung.<\/p>\n<p>Da sich diese Markdown-Dateien im src-Verzeichnis befinden, behandelt Eleventy sie als Vorlagen und erstellt f\u00fcr jede eine HTML-Seite. Ihre URL lautet dann etwa <strong>\/projects\/quotes-generator<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/quote-project-page.jpg\" alt=\"Aussehen des Projekts ohne Layout\" width=\"1600\" height=\"587\"><figcaption class=\"wp-caption-text\">Aussehen des Projekts ohne Layout<\/figcaption><\/figure>\n<p>Eleventy wei\u00df jedoch nicht, welches Layout es f\u00fcr diese Seiten verwenden soll, weil sie noch keinen Layout-Wert in ihrem Frontmatter haben.<\/p>\n<p>Lass uns zuerst ein Layout f\u00fcr diese Inhalte erstellen, bevor wir eine Sammlung anlegen und sie als Liste zu einer eigenen Projektseite hinzuf\u00fcgen.<\/p>\n<p>Wie zuvor erstellst du eine Layout-Datei (<strong>project.njk<\/strong>) im Ordner <strong>layouts<\/strong>. Um Wiederholungen zu vermeiden, da diese Datei das Standard-HTML-Markup verwendet, passt du das Layout <strong>base.njk<\/strong> an, indem du einen Block erstellst, der den Abschnitt deines Layouts kennzeichnet, der ge\u00e4ndert werden soll.<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;link rel=\"icon\" href=\"\/assets\/favicon.jpeg\" \/&gt;\n        &lt;link\n            rel=\"stylesheet\"\n            href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n            integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n            crossorigin=\"anonymous\"\n            referrerpolicy=\"no-referrer\"\n        \/&gt;\n        &lt;link rel=\"stylesheet\" href=\"\/css\/global.css\" \/&gt;\n        &lt;title&gt;J.'s Portfolio&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div&gt;\n            {% include \"components\/navbar.njk\" %}\n                {% block content %} \n                    {{ content | safe }}\n                {% endblock %}\n            {% include \"components\/footer.njk\" %}\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Der Block erh\u00e4lt einen Namen, weil du viele Bl\u00f6cke in deinen Vorlagen haben kannst. Du kannst dies nun auf dein <strong>project.njk<\/strong>-Layout ausdehnen, sodass du nur noch den content-Block angeben musst:<\/p>\n<pre><code class=\"language-html\">{% extends \"layouts\/base.njk\" %}\n\n{% block content %}\n    &lt;div class=\"project-layout\"&gt;\n        &lt;h2&gt;{{title}}&lt;\/h2&gt;\n        &lt;img src=\"{{image}}\" alt=\"image\" class=\"banner-img\" \/&gt;\n        &lt;a href=\"{{gitHubURL}}\" class=\"cta-btn pt-btn\"&gt;\n            &lt;div class=\"small-icons\"&gt;\n                GitHub &lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;\n            &lt;\/div&gt;\n        &lt;\/a&gt;\n        {{ content | safe }}\n    &lt;\/div&gt;\n{% endblock %}<\/code><\/pre>\n<p>Im obigen Code legst du fest, wie jedes Projekt angezeigt werden soll. Es holt sich den <strong>Titel<\/strong>, das <strong>Bild<\/strong> und die <strong>gitHubURL<\/strong> aus dem Frontmatter und f\u00fcgt dann \u00fcber die Inhaltsvariable (<code>{{ content | safe }}<\/code>) weitere Inhalte hinzu.<\/p>\n<p>Der n\u00e4chste Schritt besteht darin, einen Layout-Schl\u00fcssel und einen Wert f\u00fcr das Frontmatter eines jeden Projekts hinzuzuf\u00fcgen:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/project.njk\ntitle: Quotes Generator\ndescription: \"Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.\"\ngitHubURL: \"https:\/\/github.com\/olawanlejoel\/random-quote-generator\"\nimage: \"\/assets\/quotes-banner.jpeg\"\n---\n\n\u2026<\/code><\/pre>\n<p>Wenn du die URL jedes Projekts neu l\u00e4dst, z. B. <strong>\/projects\/quotes-generator<\/strong>, wirst du feststellen, dass es jetzt das erstellte Layout verwendet:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/quote-project-page-with-layout.jpg\" alt=\"Projektauftritt mit Layout\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Projektauftritt mit Layout<\/figcaption><\/figure>\n<h4>So verwendest du Sammlungen in Vorlagen<\/h4>\n<p>Jedes deiner Projekte wird jetzt sch\u00f6n mit dem angegebenen Layout angezeigt, aber wie k\u00f6nnen die Leute auf diese Projekte zugreifen? Du musst eine Liste erstellen, auf die man klicken kann, um zu den einzelnen Projekten zu gelangen. Hier kommen die Sammlungen ins Spiel.<\/p>\n<p>Um Sammlungen zu verwenden, musst du sie in der Konfigurationsdatei <strong>.eleventy.js<\/strong> mit der Methode <code>addCollection()<\/code> definieren.<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    \/\/ \u2026\n\n    eleventyConfig.addCollection('projects', (collection) =&gt; {\n        return collection.getFilteredByGlob('src\/projects\/*.md');\n    });\n\n    return {\n        \/\/ ...\n    };\n};<\/code><\/pre>\n<p>Im obigen Code wird die Methode <code>addCollection()<\/code> verwendet, um eine Sammlung namens projects zu definieren. Die Callback-Funktion, die an <code>addCollection()<\/code> \u00fcbergeben wird, liefert alle Markdown-Dateien im Verzeichnis projects mit der Methode <code>getFilteredByGlob()<\/code> zur\u00fcck.<\/p>\n<p>Sobald du eine Sammlung definiert hast, kannst du sie in einer Vorlage verwenden, um Seiten zu erstellen, die auf diesem Inhalt basieren. Erstellen wir eine Seitenvorlage <strong>projects.njk<\/strong>, die das Layout <strong>base.njk<\/strong> verwendet, deren Inhalt aber die Projekte aus der Sammlung projects sind:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/base.njk\ntitle: Projects\n---\n&lt;div class=\"projects-container\"&gt;\n    &lt;h2&gt;Projects&lt;\/h2&gt;\n    &lt;div class=\"projects-grid\"&gt;\n        {% for project in collections.projects %}\n            &lt;div class=\"project-card\"&gt;\n                &lt;div class=\"project-header\"&gt;\n                    &lt;i class=\"fa-regular fa-folder-open folder-icon\"&gt;&lt;\/i&gt;\n                    &lt;div class=\"small-icons\"&gt;\n                        &lt;a href={{project.data.gitHubURL}}&gt;&lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;h3&gt;{{project.data.title}}&lt;\/h3&gt;\n                &lt;p&gt;{{project.data.description}}&lt;\/p&gt;\n                &lt;a href=\"{{project.url}}\" class=\"cta-btn\"&gt;Read more&lt;\/a&gt;\n            &lt;\/div&gt;\n        {% endfor %}\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Im obigen Code wird die Anweisung <code>{% for %}<\/code> verwendet, um eine Schleife durch alle Projekte in der Projektsammlung zu ziehen und eine Projektkarte f\u00fcr jedes Projekt zu erstellen.<\/p>\n<p>Mit <code>project.data.[key]<\/code> hast du Zugriff auf alle Variablen. Im obigen Code werden zum Beispiel der Titel, die Beschreibung und die GitHub-URL des Projekts angezeigt. Auf die URL des Projekts kannst du auch \u00fcber <code>project.url<\/code> zugreifen.<\/p>\n<p>Wenn du den Startbefehl ausf\u00fchrst und zur Projektseite navigierst, sieht deine Seite so aus, wenn du viele Projekte hinzuf\u00fcgst:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-page-with-content.jpg\" alt=\"Eine Sammlung aller Projekte auf der Seite mit den Projektvorlagen\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Projekte Vorlagenseite<\/figcaption><\/figure>\n<h3>Wie man Shortcodes verwendet<\/h3>\n<p>Mit Shortcodes kannst du benutzerdefinierte HTML-Tags oder dynamische JavaScript-Werte definieren, die du in deinen Vorlagen wiederverwenden kannst. Du kannst zum Beispiel einen Shortcode definieren, um das aktuelle Jahr zu generieren und in deine Website einzuf\u00fcgen.<\/p>\n<p>In der Konfigurationsdatei <strong>.eleventy.js<\/strong> kannst du einen Shortcode mit der Methode <code>addShortcode()<\/code> definieren. Der folgende Code definiert zum Beispiel einen Shortcode namens year:<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    \/\/ ...\n    eleventyConfig.addShortcode('year', () =&gt; {\n        return `${new Date().getFullYear()}`;\n    });\n    return {\n        \/\/ ...\n    };\n};<\/code><\/pre>\n<p>Der obige Shortcode year gibt das aktuelle Jahr zur\u00fcck, das du in jede Vorlage deines Projekts einf\u00fcgen kannst. Anstatt das Jahr fest in die Fu\u00dfzeile dieser Website zu kodieren, kannst du es zum Beispiel mit <code>{% year %}<\/code> dynamisch hinzuf\u00fcgen, sodass es sich jedes Jahr selbst aktualisiert:<\/p>\n<pre><code class=\"language-html\">&lt;hr \/&gt;\n&lt;div class=\"footer-container\"&gt;\n    &lt;p&gt;\u00a9 {% year %} Joel's Portfolio&lt;\/p&gt;\n    &lt;div class=\"social_icons\"&gt;\n        \/\/ ...\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Wenn die Seite gerendert wird, enth\u00e4lt die Ausgabe das aktuelle Jahr im HTML <code>p<\/code> Tag.<\/p>\n<h2>So f\u00fcgst du ein Theme zu einer Eleventy-Website hinzu<\/h2>\n<p>Das Hinzuf\u00fcgen eines Themes zu einer Eleventy-Website ist eine gute M\u00f6glichkeit, das Aussehen deiner Website schnell anzupassen. Offiziell bezeichnet Eleventy Themes als &#8222;Starter&#8220;, aber damit ist eigentlich dasselbe gemeint. Viele Websites bieten kostenlose Eleventy-Themes an, wie zum Beispiel die <a href=\"https:\/\/www.11ty.dev\/docs\/starter\/\" target=\"_blank\" rel=\"noopener noreferrer\">offiziellen Eleventy-Starter<\/a> und die <a href=\"https:\/\/jamstackthemes.dev\/ssg\/eleventy\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jamstack-Themes<\/a>.<\/p>\n<p>Du musst nur dein Lieblings-Theme oder Starter ausw\u00e4hlen und dann auf das GitHub-Repository zugreifen, um es auf deinen lokalen Rechner zu klonen. Lies dir unbedingt die Dokumentation durch, um die Projekte zu konfigurieren und anzupassen.<\/p>\n<p>F\u00fchre <code>npm install<\/code> aus, um alle ben\u00f6tigten Pakete zu installieren, und f\u00fchre dann <code>npm start<\/code> aus, um deine Anwendung lokal auf <strong>http:\/\/localhost:8080\/<\/strong> bereitzustellen <strong>.<\/strong><\/p>\n<h2>Wie du eine Eleventy-Website bereitstellst<\/h2>\n<p>Du hast es jetzt geschafft, mit Eleventy eine elegante statische Portfolio-Website zu erstellen. Es reicht nicht aus, diese Art von Website auf deinem lokalen Rechner zu haben. Du m\u00f6chtest sie online hosten, um sie mit anderen zu teilen.<\/p>\n<p>Kinsta ist eine Cloud-Plattform, auf der du <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">statische Websites hosten<\/a> kannst, darunter auch Eleventy. Dazu musst du deinen Code auf GitHub pushen und anschlie\u00dfend auf Kinsta bereitstellen.<\/p>\n<h3>Pushe deine Eleventy-Website auf GitHub<\/h3>\n<p>Erstelle zun\u00e4chst ein Repository auf GitHub; so erh\u00e4ltst du Zugriff auf die <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-url\/\">URL<\/a> des Repositorys. Dann kannst du Git-Befehle verwenden, um deine Codes zu pushen.<\/p>\n<p>Bevor du deine Dateien an GitHub weitergibst, solltest du eine <strong>.gitignore<\/strong>-Datei erstellen, in der du einige Dateien und Ordner angibst, die Git beim Pushen deines Codes ignorieren soll. Erstelle eine <strong>.gitignore<\/strong>-Datei in deinem Stammordner und f\u00fcge Folgendes hinzu:<\/p>\n<pre><code class=\"language-git\"># dependencies\n\/node_modules\n\n# run\n\/public<\/code><\/pre>\n<p>Du kannst nun dein lokales Git-Repository initialisieren, indem du dein Terminal \u00f6ffnest, in das Verzeichnis mit deinem Projekt navigierst und den folgenden Befehl ausf\u00fchrst:<\/p>\n<pre><code class=\"language-bash\">git init<\/code><\/pre>\n<p>F\u00fcge nun deinen Code mit dem folgenden Befehl zum lokalen Git-Repository hinzu:<\/p>\n<pre><code class=\"language-bash\">git add<\/code><\/pre>\n<p>Jetzt kannst du deine \u00c4nderungen mit dem folgenden Befehl \u00fcbertragen:<\/p>\n<pre><code class=\"language-bash\">git commit -m \"my first commit\"<\/code><\/pre>\n<p><strong>Hinweis:<\/strong> Du kannst &#8222;my first commit&#8220; durch eine kurze Nachricht ersetzen, die deine \u00c4nderungen beschreibt.<\/p>\n<p>Zum Schluss kannst du deinen Code mit den folgenden Befehlen auf GitHub ver\u00f6ffentlichen:<\/p>\n<pre><code class=\"language-bash\">git remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\n<p><strong>Hinweis:<\/strong> Ersetze &#8222;[Repository URL]&#8220; durch deine eigene GitHub Repository URL.<\/p>\n<p>Sobald du diese Schritte abgeschlossen hast, wird dein Code auf GitHub ver\u00f6ffentlicht und ist \u00fcber die URL deines Repositorys zug\u00e4nglich.<\/p>\n<p>Du kannst jetzt auf Kinsta deployen!<\/p>\n<h3>Bereitstellen deiner Eleventy-Website auf Kinsta<\/h3>\n<p>Die Bereitstellung auf Kinsta ist in wenigen Minuten erledigt. Beginne im <a href=\"https:\/\/my.kinsta.com\/?lang=de\">My Kinsta<\/a>-Dashboard, um dich anzumelden oder dein Konto zu erstellen. Als N\u00e4chstes musst du <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">Kinsta auf GitHub autorisieren<\/a>.<\/p>\n<p>Dann klickst du in der linken Seitenleiste auf <strong>Anwendungen<\/strong>, dann auf <strong>Dienst hinzuf\u00fcgen und schlie\u00dflich <\/strong>auf <strong>Anwendung<\/strong> aus dem Dropdown-Men\u00fc:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Untitled-1.jpg\" alt=\"Bereitstellen auf dem Anwendungs-Hosting von Kinsta\" width=\"1600\" height=\"503\"><figcaption class=\"wp-caption-text\">Bereitstellen auf dem Anwendungs-Hosting von Kinsta<\/figcaption><\/figure>\n<p>Es erscheint ein Modal, in dem du das Repository ausw\u00e4hlen kannst, das du bereitstellen m\u00f6chtest. W\u00e4hle einen Zweig aus, den du bereitstellen m\u00f6chtest, wenn du mehrere Zweige in deinem Repository hast.<\/p>\n<p>Anschlie\u00dfend kannst du dieser Anwendung einen Namen geben. W\u00e4hle unter 24 einen <a href=\"https:\/\/kinsta.com\/de\/docs\/service-information\/rechenzentrums-standorte\/#application-and-database-hosting-data-centers\">Standort f\u00fcr das Rechenzentrum<\/a> aus, dann erkennt Kinsta automatisch den Startbefehl.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploy-11ty-website.jpg\" alt=\"Erfolgreiche Bereitstellung der statischen Eleventy-Website\" width=\"1600\" height=\"815\"><figcaption class=\"wp-caption-text\">Erfolgreiche Bereitstellung der statischen Eleventy-Website<\/figcaption><\/figure>\n<p>Deine Anwendung wird nun bereitgestellt. Innerhalb weniger Minuten erh\u00e4ltst du einen Link, \u00fcber den du auf die bereitgestellte Version deiner Website zugreifen kannst. In diesem Fall ist es <strong>https:\/\/ty-portfolio-lvjy7.kinsta.app\/<\/strong><\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel hast du gelernt, wie du eine stilvolle Website mit Eleventy erstellst, wie du eine statische Eleventy-Website von Grund auf anpasst und wie du eine sch\u00f6ne Portfolio-Website erstellst.<\/p>\n<p>Ganz gleich, ob du einen pers\u00f6nlichen Blog, eine Portfolioseite oder einen Online-Shop erstellen willst, mit Eleventy kannst du deine Ziele mit minimalem Aufwand und maximaler Wirkung erreichen.<\/p>\n<p>Warum probierst du es also nicht noch heute aus und <a href=\"https:\/\/sevalla.com\/application-hosting\/\">stellst es kostenlos auf Kinsta bereit<\/a>? Wir haben eine <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">&#8222;Hello World&#8220;-Vorlage von Eleventy<\/a>, die du verwenden kannst, um noch schneller mit dem Erstellen zu beginnen.<\/p>\n<p><em>Jetzt bist du dran: Was h\u00e4ltst du von Eleventy? Hast du schon etwas mit Eleventy erstellt? Teile uns deine Projekte und Erfahrungen gerne in den Kommentaren mit.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit dem Aufkommen von Static Site Generators (SSGs) wie Eleventy war es noch nie so einfach, eine elegante und effiziente statische Website zu erstellen. In diesem &#8230;<\/p>\n","protected":false},"author":287,"featured_media":61201,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[982,945,991],"class_list":["post-61200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-statische-seiten-generatoren","topic-headless-cms","topic-web-entwicklungs-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-27T10:34:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T15:09:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"24\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest\",\"datePublished\":\"2023-04-27T10:34:04+00:00\",\"dateModified\":\"2023-08-23T15:09:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\"},\"wordCount\":3671,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\",\"name\":\"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png\",\"datePublished\":\"2023-04-27T10:34:04+00:00\",\"dateModified\":\"2023-08-23T15:09:52+00:00\",\"description\":\"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/eleventy\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/eleventy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generatoren f\u00fcr statische Seiten\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"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 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest - Kinsta\u00ae","description":"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/eleventy\/","og_locale":"de_DE","og_type":"article","og_title":"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest","og_description":"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.","og_url":"https:\/\/kinsta.com\/de\/blog\/eleventy\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-04-27T10:34:04+00:00","article_modified_time":"2023-08-23T15:09:52+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"24\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest","datePublished":"2023-04-27T10:34:04+00:00","dateModified":"2023-08-23T15:09:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/"},"wordCount":3671,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/eleventy\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/","url":"https:\/\/kinsta.com\/de\/blog\/eleventy\/","name":"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png","datePublished":"2023-04-27T10:34:04+00:00","dateModified":"2023-08-23T15:09:52+00:00","description":"Lerne, wie du mit Eleventy eine beeindruckende und funktionale statische Website f\u00fcr dein Portfolio erstellen kannst, ohne eine serverseitige Sprache oder Datenbank zu ben\u00f6tigen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/eleventy\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/04\/11ty-static-site-generator-01.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/eleventy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Generatoren f\u00fcr statische Seiten","item":"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/"},{"@type":"ListItem","position":3,"name":"Wie du eine stilvolle statische Website mit Eleventy (11ty) gestaltest"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"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 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/61200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=61200"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/61200\/revisions"}],"predecessor-version":[{"id":62731,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/61200\/revisions\/62731"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/61200\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/61201"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=61200"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=61200"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=61200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}