{"id":66625,"date":"2023-10-30T13:34:07","date_gmt":"2023-10-30T12:34:07","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=66625&#038;preview=true&#038;preview_id=66625"},"modified":"2023-10-31T15:31:07","modified_gmt":"2023-10-31T14:31:07","slug":"gatsby","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/gatsby\/","title":{"rendered":"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby"},"content":{"rendered":"<p>Statische Websites haben in den letzten Jahren dank ihrer Geschwindigkeit, Sicherheit und Einfachheit ein Comeback erlebt. Eines der f\u00fchrenden Tools f\u00fcr die Erstellung statischer Websites ist heute Gatsby, ein blitzschneller <a href=\"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/\">Static Site Generator<\/a> (SSG).<\/p>\n<p>Egal, ob du ein Webentwickler bist, der einen <a href=\"https:\/\/kinsta.com\/de\/blog\/ideen-fuer-blognamen\/\">pers\u00f6nlichen Blog<\/a>, eine <a href=\"https:\/\/kinsta.com\/de\/blog\/portfolio-website\/\">Portfolioseite<\/a> oder eine Unternehmenswebsite erstellen m\u00f6chte, Gatsby kann dir helfen, deine Ziele zu erreichen. Dieser umfassende Leitfaden f\u00fchrt dich durch den Prozess der Erstellung <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-statische-website\/\">statischer Websites<\/a> mit Gatsby. Er deckt alles ab, von den Grundlagen bis hin zu fortgeschrittenen Themen.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/gatsby-demo-site.gif\" alt=\"Eine Demoseite, die zeigt, was du nach dem Lesen dieses Leitfadens erstellen kannst\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Eine Demoseite, die zeigt, was du nach dem Lesen dieses Leitfadens erstellen kannst<\/figcaption><\/figure>\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>Statische Seiten verstehen<\/h2>\n<p>Statische Websites sind Webseiten mit vorgerenderten <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-Dateien<\/a>. Im Gegensatz zu dynamischen Websites m\u00fcssen sie nicht bei jeder Anfrage serverseitig verarbeitet werden. Stattdessen wird der gesamte Inhalt im Voraus generiert und direkt an den Browser des Nutzers \u00fcbermittelt. Dieser Ansatz bietet mehrere Vorteile:<\/p>\n<ol start=\"1\">\n<li><strong>Geschwindigkeit:<\/strong> Statische Websites werden schnell geladen, da es keine serverseitige Verarbeitung gibt.<\/li>\n<li><strong>Sicherheit:<\/strong> Da kein serverseitiger Code ausgef\u00fchrt wird, sind statische Websites weniger anf\u00e4llig f\u00fcr Sicherheitsbedrohungen.<\/li>\n<li><strong>Skalierbarkeit<\/strong>: Statische Websites lassen sich leicht zwischenspeichern und \u00fcber Content Delivery Networks (CDNs) verbreiten.<\/li>\n<li><strong>Einfachheit:<\/strong> Sie sind einfacher zu entwickeln, einzurichten und zu pflegen.<\/li>\n<\/ol>\n<p>Nachdem du nun wei\u00dft, was statische Websites sind und welche Vorteile sie haben, wollen wir uns Gatsby genauer ansehen.<\/p>\n<h2>Was ist Gatsby?<\/h2>\n<p>Gatsby ist ein Open-Source-Framework, das auf der <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> JavaScript-Bibliothek basiert und die Erstellung statischer Websites vereinfacht. Es kombiniert die Leistungsf\u00e4higkeit von <a href=\"https:\/\/kinsta.com\/de\/blog\/react-komponenten-bibliotheken\/\">React-Komponenten<\/a> mit GraphQL f\u00fcr die Datenverwaltung und ist damit eine hervorragende Wahl f\u00fcr Entwickler aller Ebenen. Hier sind die Gr\u00fcnde, warum Gatsby so besonders ist:<\/p>\n<ol start=\"1\">\n<li><strong>Rasend schnell:<\/strong> Gatsby optimiert deine Website mithilfe von Techniken wie Code-Splitting und Lazy Loading auf Geschwindigkeit, sodass die Seite fast sofort geladen wird.<\/li>\n<li><strong>Flexible Datenbeschaffung:<\/strong> Gatsby kann Daten aus verschiedenen Quellen beziehen, darunter Markdown-Dateien, APIs und Datenbanken.<\/li>\n<li><strong>Reichhaltiges Plugin-\u00d6kosystem:<\/strong> Das <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">umfangreiche Plugin-\u00d6kosystem<\/a> von Gatsby erm\u00f6glicht es dir, seine Funktionen m\u00fchelos zu erweitern.<\/li>\n<li><strong>SEO und Leistung:<\/strong> Gatsby generiert automatisch optimiertes HTML f\u00fcr bessere SEO und Performance.<\/li>\n<\/ol>\n<h2>Erste Schritte mit Gatsby<\/h2>\n<p>Um diesem Leitfaden zu folgen, solltest du Folgendes mitbringen<\/p>\n<ul>\n<li>Grundlegendes Verst\u00e4ndnis von HTML, CSS und JavaScript<\/li>\n<li>Grundlegende Kenntnisse \u00fcber React<\/li>\n<li>Node.js und npm (<a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">Node Package Manager<\/a>) oder <a href=\"https:\/\/kinsta.com\/de\/blog\/webentwicklung-tools\/#39-yarn\">yarn<\/a> auf deinem Computer installiert haben<\/li>\n<\/ul>\n<p>Um mit Gatsby loszulegen und ein Projekt zu erstellen, kannst du eines der vielen Beispiele in der <a href=\"https:\/\/www.gatsbyjs.com\/starters\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby Starter Library<\/a> verwenden oder ein Projekt von Grund auf neu erstellen.<\/p>\n<p>F\u00fcr diese Anleitung verwenden wir den <a href=\"https:\/\/www.gatsbyjs.com\/starters\/gatsbyjs\/gatsby-starter-hello-world\/\" target=\"_blank\" rel=\"noopener noreferrer\">offiziellen Hello World Starter<\/a> f\u00fcr GatsbyJS, da wir damit ein einfaches Projekt ohne Plugins oder zus\u00e4tzliche Dateien erstellen k\u00f6nnen.<\/p>\n<ol start=\"1\">\n<li>Installiere zun\u00e4chst die Gatsby CLI auf deinem Computer, indem du den folgenden Befehl ausf\u00fchrst:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -g gatsby-cli<\/code><\/pre>\n<p>F\u00fchre <code>gatsby --version<\/code> aus, um zu \u00fcberpr\u00fcfen, ob die Installation erfolgreich war.<\/p>\n<ol start=\"2\">\n<li>Als N\u00e4chstes navigierst du in den Ordner, in dem du dein Projekt erstellen m\u00f6chtest, und f\u00fchrst den folgenden Befehl aus:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx gatsby new &lt;project-name&gt; https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world<\/code><\/pre>\n<p>\u00c4ndere <code>&lt;project-name&gt;<\/code> in den gew\u00fcnschten Namen f\u00fcr dein Projekt.<\/p>\n<ol start=\"3\">\n<li>Sobald dies erfolgreich war, navigiere in den Projektordner und starte den Entwicklungsserver:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\ngatsby develop<\/code><\/pre>\n<p>Der lokale Entwicklungsserver wird unter <a href=\"http:\/\/localhost:8000\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:8000<\/a> gestartet , von wo aus du auf deine Gatsby-Site zugreifen kannst.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/gatsby-hello-world.png\" alt=\"Das Gatsby Hello World Theme\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Das Gatsby Hello World Theme<\/figcaption><\/figure>\n<h3>Die Dateistruktur von Gatsby verstehen<\/h3>\n<p>Wenn du dein Projekt in einem Code-Editor \u00f6ffnest, wirst du die folgende Struktur sehen:<\/p>\n<pre><code class=\"language-bash\">\/\n|-- \/public\n|-- \/src\n    |-- \/pages\n        |-- index.js\n|-- \/static\n|-- gatsby-config.js<\/code><\/pre>\n<ul>\n<li><strong>\/public:<\/strong> Dieses Verzeichnis enth\u00e4lt die Ausgabe deines Gatsby-Build-Prozesses. Hier befinden sich die erzeugten HTML-, CSS-, JavaScript- und anderen Dateien.<\/li>\n<li><strong>\/src<\/strong>: Dies ist das Herzst\u00fcck deines Gatsby-Projekts, mit dem du die meiste Zeit verbringen wirst. Es enth\u00e4lt verschiedene Unterverzeichnisse und Dateien:\n<ul>\n<li><strong>\/pages:<\/strong> Hier werden alle Seiten deines Projekts gespeichert. Jede JavaScript-Datei hier entspricht einer Route auf deiner Website.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> Dieses Verzeichnis wird f\u00fcr statische Dateien verwendet, die du in deine Website einbinden m\u00f6chtest, z. B. Bilder, Schriftarten oder herunterladbare Dateien. Diese Dateien werden so bereitgestellt, wie sie sind, und werden von Gatsby nicht verarbeitet.<\/li>\n<li><strong>gatsby-config.js:<\/strong> In dieser Konfigurationsdatei legst du verschiedene Einstellungen f\u00fcr deine Gatsby-Website fest. Hier kannst du Plugins, Website-Metadaten und andere Konfigurationen festlegen.<\/li>\n<\/ul>\n<h2>Seiten und Komponenten erstellen<\/h2>\n<p>In Gatsby ist das Erstellen von Webseiten ein unkomplizierter Prozess. Jede JavaScript-Datei, die du im Ordner <strong>\/src\/pages<\/strong> erstellst, wird dank der automatischen Seitengenerierung von Gatsby automatisch zu einer Seite mit der entsprechenden Route.<\/p>\n<p>Du kannst so viele Seiten erstellen, wie du f\u00fcr deine Website brauchst, indem du weitere JavaScript-Dateien zum Ordner <strong>\/src\/pages<\/strong> hinzuf\u00fcgst. Du kannst zum Beispiel eine <strong>about.js-Datei<\/strong> f\u00fcr eine &#8222;\u00dcber&#8220;-Seite erstellen.<\/p>\n<p>Du kannst zwar einzelne JavaScript-Dateien f\u00fcr jede Seite direkt im Ordner <strong>\/src\/pages<\/strong> erstellen, aber es ist auch m\u00f6glich, deine Seiten weiter zu organisieren. Du kannst Unterordner erstellen, um zusammengeh\u00f6rige Seiten zu gruppieren. Du k\u00f6nntest z. B. einen <strong>Blog-Ordner<\/strong> erstellen, um alle Blog-Seiten zu organisieren.<\/p>\n<p>F\u00fcr dieses Projekt wird die Seitenstruktur folgenderma\u00dfen aussehen:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/pages\n        |-- about.js\n        |-- index.js\n        |-- \/blog\n            |-- index.js<\/code><\/pre>\n<h3>Verwendung von JSX f\u00fcr Seiten<\/h3>\n<p>Da Gatsby auf React aufbaut, sind seine Seiten und Komponenten in <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jsx\/\">JSX<\/a> (JavaScript XML) geschrieben. JSX ist eine Syntaxerweiterung f\u00fcr JavaScript, mit der du die Struktur und das Layout deiner Benutzeroberfl\u00e4chen auf eine sehr lesbare und ausdrucksstarke Weise definieren kannst.<\/p>\n<p>So kannst du zum Beispiel den Inhalt deiner Startseite (<strong>index.js<\/strong>) wie folgt erstellen:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<h3>Verlinkung von Seiten in Gatsby<\/h3>\n<p>Um einen Link zu einer anderen Seite zu erstellen, kannst du die Komponente <code>Link<\/code> wie folgt verwenden:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default function Home() {\n    return (\n        &lt;&gt;\n            &lt;div&gt;\n                &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                &lt;Link&gt; to=\"\/about\"&gt;About Us&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>Im obigen Beispiel haben wir die Komponente <code>Link<\/code> aus <code>gatsby<\/code> importiert und sie verwendet, um Links zur Seite &#8222;\u00dcber uns&#8220; und zu einem Blog zu erstellen. Die Seite &#8222;\u00dcber uns&#8220; hat zum Beispiel die Route <code>\/about<\/code>. Wenn die Nutzer auf den Link &#8222;\u00dcber uns&#8220; klicken, werden sie auf die Seite <code>\/about<\/code> weitergeleitet.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Die Ausgabe des obigen Codes sieht vielleicht so aus, als w\u00e4ren zwei verlinkte Elemente zusammengef\u00fcgt, aber das dient nur zur Erl\u00e4uterung. Sp\u00e4ter wird eine Navigationsleiste erstellt, die diese Links mit dem entsprechenden Styling darstellt.<\/p>\n<\/aside>\n\n<p>Um Links zu externen Websites zu erstellen, kannst du normale Anker-Tags (<code>&lt;a&gt;<\/code>) mit dem Attribut <code>href<\/code> verwenden:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nexport default function Home() {\n  return (\n        &lt;&gt;\n            &lt;div&gt;\n                &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                &lt;div&gt;\n                    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n                    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n                    &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\" target=\"_blank\" rel=\"noreferrer\"&gt;\n                        &lt;div&gt;Read more&lt;\/div&gt;\n                    &lt;\/a&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>In diesem Fall \u00f6ffnet der Link die externe Website dank der Attribute <code>target=\"_blank\"<\/code> und <code>rel=\"noreferrer\"<\/code> in einem neuen Browser-Tab.<\/p>\n<h3>Komponenten in Gatsby erstellen<\/h3>\n<p>Die komponentenbasierte Architektur von Gatsby erm\u00f6glicht es dir, wiederverwendbare Bausteine f\u00fcr deine Webseiten zu erstellen. Anstatt Code auf mehreren Seiten zu duplizieren, kannst du gemeinsame Elemente in Komponenten kapseln und so deine Codebasis \u00fcbersichtlicher, wartbarer und effizienter machen.<\/p>\n<p>Angenommen, der Code deiner Startseite besteht aus dem Navigationsbereich, dem Hauptinhalt und einer Fu\u00dfzeile:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;div className=\"nav-links\"&gt;\n        &lt;Link&gt; to=\"\/\"&gt;Home&lt;\/Link&gt;\n        &lt;Link&gt; to=\"\/about\"&gt;About&lt;\/Link&gt;\n        &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n      &lt;\/div&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;div className=\"footer\"&gt;\n        &lt;p&gt;\n          Hosted with \u2764\ufe0f by Kinsta's{' '}\n          &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;\n            Static Site Hosting\n          &lt;\/a&gt;\n          .\n        &lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Stell dir vor, du m\u00fcsstest den Code f\u00fcr die Navigationsleiste und die Fu\u00dfzeile f\u00fcr jede Seite deiner Website duplizieren. An dieser Stelle kommt die St\u00e4rke von Komponenten ins Spiel. Du kannst wiederverwendbare Komponenten f\u00fcr die Navigationsleiste, die Fu\u00dfzeile und jeden anderen Teil des Codes erstellen, der auf mehreren Seiten und Komponenten wiederholt werden soll.<\/p>\n<p>Um mit Komponenten in Gatsby zu arbeiten, erstellst du einen <strong>Komponentenordner<\/strong> im <strong>src-Ordner<\/strong>, in dem alle Komponenten gespeichert werden. Als n\u00e4chstes erstellst du deine Komponenten, z. B. <strong>Navbar.js<\/strong> und <strong>Footer.js<\/strong>. In der Datei <strong>Navbar.js<\/strong> trennst du den Code folgenderma\u00dfen:<\/p>\n<pre><code class=\"language-jsx\">import { Link } from 'gatsby';\nimport React from 'react';\n\nconst Navbar = () =&gt; {\n    return (\n        &lt;nav&gt;\n            &lt;div className=\"nav-links\"&gt;\n                &lt;Link to=\"\/\"&gt;Home&lt;\/Link&gt;\n                &lt;Link to=\"\/about\"&gt;About&lt;\/Link&gt;\n                &lt;Link to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n};\n\nexport default Navbar;<\/code><\/pre>\n<p>Und auch deine <strong>Footer.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nconst Footer = () =&gt; {\n    return (\n        &lt;div className=\"footer\"&gt;\n            &lt;p&gt;\n                Hosted with \u2764\ufe0f by Kinsta's{' '}\n                &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n                .\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Footer;<\/code><\/pre>\n<p>Als N\u00e4chstes importierst du deine Komponentendateien in deine Seiten oder Komponenten und verwendest sie auf diese Weise:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '..\/components\/Navbar';\nimport Footer from '..\/components\/Footer';\n\nexport default function Home() {\n  return (\n    &lt;&gt;\n      &lt;Navbar \/&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n      &lt;Footer \/&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<h3>Layout-Komponente erstellen<\/h3>\n<p>Eine g\u00e4ngige Praxis in der Webentwicklung ist die Erstellung einer <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/routing\/layout-components\/\" target=\"_blank\" rel=\"noopener noreferrer\">Layoutkomponente<\/a>, die die Gesamtstruktur deiner Website festlegt. Die Layoutkomponente enth\u00e4lt in der Regel Elemente, die auf jeder Seite erscheinen, wie Kopf- und Fu\u00dfzeilen, Navigationsmen\u00fcs und Seitenleisten.<\/p>\n<p>Erstelle eine neue Datei namens <strong>Layout.js<\/strong> in deinem Ordner <strong>\/src\/components<\/strong>. Als N\u00e4chstes definierst du die Layout-Struktur. In diesem Leitfaden wird die Layout-Struktur nur die Navigationsleiste und die Fu\u00dfzeile enthalten:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '.\/Navbar';\nimport Footer from '.\/Footer';\n\nconst Layout = ({ children }) =&gt; {\n    return (\n        &lt;div className=\"layout\"&gt;\n            &lt;Navbar \/&gt;\n            &lt;div&gt; className=\"content\"&gt;{children}&lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Layout;<\/code><\/pre>\n<p>In dieser Layoutkomponente verwenden wir die Komponenten, um den Seiteninhalt zu umh\u00fcllen (als <code>children<\/code> bereitgestellt). Um die Layoutkomponente in deinen Seiten zu verwenden, importiere sie und umh\u00fclle deinen Seiteninhalt damit. Zum Beispiel in deiner <strong>index.js<\/strong> Seite:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\n\nexport default function Home() {\n  return (\n    &lt;Layout&gt;\n      &lt;div&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  );\n}<\/code><\/pre>\n<p>Mit einer Layoutkomponente sorgst du f\u00fcr eine einheitliche Struktur und ein einheitliches Erscheinungsbild auf all deinen Seiten und h\u00e4ltst gleichzeitig deinen Code \u00fcbersichtlich und wartbar. Das ist eine leistungsstarke Methode, um die gemeinsamen Elemente deiner Website effizient zu verwalten.<\/p>\n<h3>Gestalten von Seiten und Komponenten in Gatsby<\/h3>\n<p>Das Styling deiner Gatsby-Site ist flexibel und erlaubt dir, verschiedene Ans\u00e4tze zu verwenden, darunter einfaches CSS, CSS-in-JS oder CSS-Pr\u00e4prozessoren wie Sass. Hier erf\u00e4hrst du, wie du ein normales und ein Modul-Styling f\u00fcr Seiten erstellen kannst.<\/p>\n<h4>CSS-Styling<\/h4>\n<p>In Gatsby kannst du ganz einfach eine CSS-Datei erstellen und sie mit einer beliebigen Komponente oder Seite verkn\u00fcpfen, die dann perfekt funktioniert. Du kannst zum Beispiel einen <strong>Styles-Ordner<\/strong> im <strong>src-Ordner<\/strong> anlegen und dann eine <strong>global.css-Datei<\/strong> mit deinem CSS-Code erstellen.<\/p>\n<p>Hier sind zum Beispiel einige grundlegende globale Styles f\u00fcr die zuvor erstellten Komponenten:<\/p>\n<pre><code class=\"language-css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500&display=swap');\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    background-color: #ddd;\n    font-family: 'Poppins',\n        sans-serif;\n    width: 1200px;\n    margin: 0 auto;\n}\n\na {\n    text-decoration: none;\n}\n\nimg {\n    width: 100%;\n}\n\nnav {\n    display: flex;\n    justify-content: space-between;\n    height: 200px;\n    align-items: center;\n}\n\nnav .logo-img {\n    width: 100px;\n}\n\nnav .nav-links a {\n    padding: 0 20px;\n    font-size: 18px;\n}\n\n@media (max-width:700px) {\n    body {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    nav .nav-links a {\n        padding: 0 18px;\n    }\n}\n\n.footer {\n    width: 100%;\n    text-align: center;\n    margin: 100px 0 20px;\n}<\/code><\/pre>\n<p>Im obigen Code importierst du die Schriftart Poppins von <a href=\"https:\/\/kinsta.com\/de\/blog\/besten-google-fonts\/\">Google Fonts<\/a> und definierst dann grundlegende Stile, die auf alle deine Komponenten angewendet werden.<\/p>\n<p>Als N\u00e4chstes importierst du die CSS-Datei in die Komponenten, die du stylen m\u00f6chtest. F\u00fcr dieses Projekt kannst du sie aber auch in deine Layout-Komponente einf\u00fcgen, damit sie global gilt:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Navbar from '.\/Navbar';\nimport Footer from '.\/Footer';\nimport '..\/styles\/global.css';\n\nconst Layout = ({ children }) =&gt; {\n    return (\n        &lt;div&gt;\n            &lt;Navbar \/&gt;\n            &lt;div&gt; className=\"content\"&gt;{children}&lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default Layout;<\/code><\/pre>\n<h4>Modul-CSS-Styling<\/h4>\n<p>Mit CSS-Modulen kannst du deine Stile auf bestimmte Komponenten oder Seiten anwenden. Das verhindert Stilkonflikte und macht es einfacher, deinen Code zu pflegen. Im Styles-Ordner erstellst du deine CSS-Module im Format <strong>&lt;Seitenname&gt;.module.css<\/strong> und f\u00fcgst der Datei den jeweiligen Stil hinzu.<\/p>\n<p>Erstelle zum Beispiel <strong>home.module.css<\/strong> f\u00fcr die Startseite und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-css\">.home_hero {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    text-align: center;\n\n}\n\n.home_hero h1 {\n    font-size: 60px;\n    width: 70%;\n}\n\n.home_hero p {\n    color: #6E7076;\n    font-size: 20px;\n}\n\n.btn {\n    background-color: #5333ed;\n    padding: 20px 30px;\n    margin-top: 40px;\n    border-radius: 5px;\n    color: #fff;\n}\n\n@media (max-width:700px) {\n    .home_hero h1 {\n        font-size: 40px;\n    }\n\n    .home_hero p {\n        font-size: 16px;\n    }\n}<\/code><\/pre>\n<p>Um die CSS-Stile des Moduls in deiner Gatsby-Seite oder -Komponente zu verwenden, importiere die Stile aus deinem CSS-Modul als Objekt am Anfang deiner Seite oder Komponentendatei und verwende sie so:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/home.module.css';\n\nexport default function Home() {\n  return (\n    &lt;Layout&gt;\n      &lt;div className={styles.home_hero}&gt;\n        &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n        &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n        &lt;a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\"&gt;\n          &lt;div className={styles.btn}&gt;Read more&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/div&gt;\n    &lt;\/Layout&gt;\n  );\n}<\/code><\/pre>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Du kannst auch Inline-Styling anwenden, \u00e4hnlich wie bei React-Komponenten.<\/p>\n<\/aside>\n<br \/>\n<aside data-9=\"NTYycnpXbjdjR3FYcFEtVFZIZw==\" class=\"Wzk4Miw5NTFd\" data-r3koi=\"Im1pZGRsZSI=|ImRlX0RFIg==\" data-6QLJcz=\"LkhhbVlWV1g3\" data-M0R=\"ZzRtU0JNekF4YQ==\" data-r=\"RmxmN29ES1VzTE5NM2hjQ0pBbmU=\" data-4=\"WXRyT0pDejhabDBmY1NtajkuZQ==\" id=\"NjY2MjU=\" data-3=\"YnEwTVF0ZFpwcjdFOFltc3hSQUQ=\"><\/aside><\/p>\n<h2>Statische Dateien in Gatsby verwenden<\/h2>\n<p>Statische Dateien sind in Gatsby Assets wie Bilder, Schriftarten, CSS-Dateien und andere Ressourcen, die ohne serverseitige Verarbeitung direkt an den Browser des Clients gesendet werden. Diese Dateien werden dem Verzeichnis <strong>\/static<\/strong> im Stammverzeichnis deines Projekts hinzugef\u00fcgt.<\/p>\n<p>Wenn du zum Beispiel das Bild <strong>kinsta-logo.png<\/strong> zum Verzeichnis <strong>\/static<\/strong> hinzuf\u00fcgst, kannst du es in deiner Komponente wie folgt anzeigen:<\/p>\n<pre><code class=\"language-jsx\">import { Link } from 'gatsby';\nimport React from 'react';\n\nconst Navbar = () =&gt; {\n    return (\n        &lt;nav&gt;\n            &lt;Link&gt; to=\"\/\"&gt;\n                &lt;img src=\"\/kinsta-logo.png\" alt=\"Kinsta Logo\" className=\"logo-img\" \/&gt;\n            &lt;\/Link&gt;\n            &lt;div className=\"nav-links\"&gt;\n                &lt;Link&gt; to=\"\/\"&gt;Home&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/about\"&gt;About&lt;\/Link&gt;\n                &lt;Link&gt; to=\"\/blog\"&gt;Blog&lt;\/Link&gt;\n            &lt;\/div&gt;\n        &lt;\/nav&gt;\n    );\n};\n\nexport default Navbar;<\/code><\/pre>\n<p>Gatsby l\u00f6st diese relativen Pfade automatisch in die richtige URL auf, wenn deine Website erstellt wird. Sp\u00e4ter in diesem Leitfaden erf\u00e4hrst du, wie du Bilder in Gatsby optimieren kannst.<\/p>\n<h2>Plugins und Integrationen<\/h2>\n<p>Gatsby verf\u00fcgt \u00fcber ein reichhaltiges \u00d6kosystem an Plugins, mit denen du seine Funktionen erweitern kannst. Du findest Plugins f\u00fcr <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>, <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-google-analytics\/\" target=\"_blank\" rel=\"noopener noreferrer\">Analytics<\/a>, Bildoptimierung, Markdown-Umwandlung und vieles mehr. Die Installation und Konfiguration von Plugins ist ganz einfach und kann die M\u00f6glichkeiten deiner Website erheblich erweitern.<\/p>\n<p>In diesem Leitfaden verwenden wir vier Plugins:<\/p>\n<ol start=\"1\">\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-transformer-remark\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-transformer-remark<\/a>: Mit diesem Plugin kannst du Markdown-Dateien in HTML-Inhalte umwandeln und so ganz einfach Blogbeitr\u00e4ge, Dokumentationen oder andere textbasierte Inhalte erstellen und verwalten.<\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-transformer-sharp\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-transformer-sharp<\/a> und <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-plugin-sharp\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-plugin-sharp<\/a>: Diese Plugins arbeiten zusammen, um Bilder in deinem Gatsby-Projekt zu optimieren und zu manipulieren.<\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-source-filesystem\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-source-filesystem<\/a>: Mit diesem Plugin kannst du Dateien aus deinem Projektverzeichnis quellen lassen und sie f\u00fcr die Abfrage mit GraphQL verf\u00fcgbar machen.<\/li>\n<\/ol>\n<p>Um diese Plugins in deinem Gatsby-Projekt zu verwenden, f\u00fchre den folgenden Befehl im Hauptverzeichnis deines Projekts aus, um sie zu installieren:<\/p>\n<pre><code class=\"language-bash\">npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem<\/code><\/pre>\n<p>Anschlie\u00dfend konfigurierst du sie in deiner <strong>gatsby-config.js-Datei<\/strong>. Hier ist ein Beispiel, wie du die Plugins einrichtest:<\/p>\n<pre><code class=\"language-js\">module.exports = {\n    plugins: [\n        \/\/ ...other plugins\n        \/\/ Transform Markdown files into HTML\n        'gatsby-transformer-remark',\n        \/\/ Optimize and manipulate images\n        'gatsby-transformer-sharp',\n        'gatsby-plugin-sharp',\n        \/\/ Source files from your project directory\n        {\n            resolve: `gatsby-source-filesystem`,\n            options: {\n                name: `posts`,\n                path: `${__dirname}\/src\/posts\/`,\n            },\n        },\n        {\n            resolve: `gatsby-source-filesystem`,\n            options: {\n                name: `images`,\n                path: `${__dirname}\/src\/images\/`,\n            },\n        },\n    ],\n};<\/code><\/pre>\n<p>Es werden zwei <code>gatsby-source-filesystem<\/code> Konfigurationen erstellt, die auf zwei Ordner verweisen: <strong>posts<\/strong> und <strong>images. <\/strong>Posts speichert einige Markdown-Dateien (Blogposts), die mit <code>gatsby-transformer-remark<\/code> umgewandelt werden, und images speichert Bilder f\u00fcr den Blog und andere Bilder, die du optimieren m\u00f6chtest.<\/p>\n<p>Denke immer daran, deinen lokalen Entwicklungsserver neu zu starten, wenn du \u00c4nderungen an der Datei <strong>gatsby-config.js<\/strong> vornimmst.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Bilder, die im <strong>src-Ordner<\/strong> eines Gatsby-Projekts gespeichert werden, sind f\u00fcr dynamische Inhalte gedacht und werden von den Gatsby-Plugins optimiert, w\u00e4hrend Bilder im <strong>\/static-Ordner<\/strong> als statische Assets behandelt werden und in der Build-Ausgabe unver\u00e4ndert bleiben, so dass sie sich f\u00fcr Elemente wie Logos und Icons eignen.<\/p>\n<\/aside>\n\n<h2>Blogbeitr\u00e4ge erstellen<\/h2>\n<p>Nachdem wir nun unsere Plugins konfiguriert haben, erstellen wir einen Ordner <strong>posts<\/strong> im <strong>src-Verzeichnis<\/strong> und legen zwei Markdown-Dateien mit folgendem Inhalt an:<\/p>\n<p><strong>post-1.md:<\/strong><\/p>\n<pre><code class=\"language-markdown\">---\ntitle: \"Introduction to Gatsby\"\ndate: \"2023-10-01\"\nslug: \"introduction-to-gatsby\"\ndescription: \"Learn the basics of Gatsby and its features.\"\nfeatureImg: ..\/images\/featured\/image-1.jpeg\n---\n\nWelcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.<\/code><\/pre>\n<p>Und <strong>post-2.md<\/strong>:<\/p>\n<pre><code class=\"language-markdown\">---\ntitle: \"Optimizing Images in Gatsby\"\ndate: \"2023-10-05\"\nslug: \"optimizing-images-in-gatsby\"\ndescription: \"Explore how to optimize images in your Gatsby project.\"\nfeatureImg: ..\/images\/featured\/image-2.jpeg\n---\n\nImages play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.<\/code><\/pre>\n<p>Diese Markdown-Dateien enthalten Frontmatter mit Metadaten zu den Blogposts, darunter Titel, Datum, Slugs, Beschreibungen und Bildpfade.<\/p>\n<h2>Abfragen in Gatsby mit GraphQL<\/h2>\n<p>Gatsby nutzt <a href=\"https:\/\/kinsta.com\/de\/blog\/graphql-vs-rest\/\">GraphQL<\/a>, um Daten f\u00fcr deine Website abzufragen und abzurufen. GraphQL ist eine leistungsstarke Abfragesprache, mit der du genau die Daten abfragen kannst, die du brauchst. Das macht sie effizient und flexibel. Hier erf\u00e4hrst du, wie du Daten in Gatsby mit GraphQL abfragen kannst.<\/p>\n<p>Wenn du <code>gatsby develop<\/code> in deinem Terminal ausf\u00fchrst, wirst du feststellen, dass du neben dem Link <a href=\"https:\/\/www.gatsbyjs.com\/plugins\/gatsby-source-filesystem\/\" target=\"_blank\" rel=\"noopener noreferrer\">gatsby-source-filesystem<\/a>, der dein Projekt im Web \u00f6ffnet, auch die URL <a href=\"http:\/\/localhost:8000\/___graphql\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:8000\/___graphql<\/a> siehst. Diese URL erm\u00f6glicht den Zugriff auf den <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/querying-data\/running-queries-with-graphiql\/\" target=\"_blank\" rel=\"noopener noreferrer\">GraphiQL-Editor<\/a> f\u00fcr dein Gatsby-Projekt.<\/p>\n<p>Wenn du den Editor \u00f6ffnest, siehst du diese Oberfl\u00e4che:<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/graphiql-playground.png\" alt=\"Der Gatsby GraphiQL Playground\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Der Gatsby GraphiQL Playground<\/figcaption><\/figure>\n<p>Du kannst in diesem Editor so viele Informationen \u00fcber deine Website abfragen. Da du aber Markdown-Dateien erstellt und alle Konfigurationen in der Datei <strong>gatsby-config.js<\/strong> vorgenommen hast. Lass uns die Markdown-Dateien und ihren Inhalt abfragen, indem wir die folgende Abfrage im Editor ausf\u00fchren:<\/p>\n<pre><code class=\"language-json\">query BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}<\/code><\/pre>\n<p>Diese Abfrage holt die Daten aus allen Markdown-Dateien mit <code>allMarkdownRemark<\/code> ab. Sie holt die <code>title<\/code>, <code>slug<\/code> und <code>description<\/code> aus dem Frontmatter jeder Datei und auch deren <code>id<\/code>.<\/p>\n<p>Nachdem du deine Abfrage geschrieben hast, klicke auf die Schaltfl\u00e4che &#8222;Abspielen&#8220; (ein nach rechts zeigendes Dreieckssymbol), um die Abfrage auszuf\u00fchren. Die Ergebnisse werden auf der rechten Seite des Editors angezeigt.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/markdown-details-with-graphiql.png\" alt=\"Benutze den GraphiQL-Playground, um Markdown-Informationen zu erhalten\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Benutze den GraphiQL-Playground, um Markdown-Informationen zu erhalten<\/figcaption><\/figure>\n<p>Du kannst dann GraphQL verwenden, um die Markdown-Daten in deinen Komponenten oder Seiten abzufragen. Um diese Daten in der Seite <strong>blog\/index.js<\/strong> abzufragen, importiere zun\u00e4chst <code>graphql<\/code> von <code>gatsby<\/code>. F\u00fcge dann am Ende des JSX-Codes Folgendes hinzu:<\/p>\n<pre><code class=\"language-json\">export const query = graphql`\nquery BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}\n`;<\/code><\/pre>\n<p>Im obigen Code verwenden wir das Tag <code>graphql<\/code>, um eine GraphQL-Abfrage namens <code>query<\/code> zu erstellen. So sollte deine <strong>blog\/index.js-Datei<\/strong> aussehen:<\/p>\n<pre><code class=\"language-jsx\">import { graphql, Link } from 'gatsby';\nimport React from 'react';\nimport Layout from '..\/..\/components\/Layout';\nimport * as styles from '..\/..\/styles\/blog.module.css';\n\nconst blog = ({ data }) =&gt; {\n    const posts = data.allMarkdownRemark.nodes;\n    return (\n        &lt;Layout&gt;\n            &lt;div className={styles.blog_cont}&gt;\n                &lt;h2&gt;Blog&lt;\/h2&gt;\n                &lt;div className={styles.blog_grid}&gt;\n                    {posts.map((post) =&gt; (\n                        &lt;Link\n                            to={`\/blog\/${post.frontmatter.slug}`}\n                            className={styles.blog_card}\n                            key={post.id}\n                        &gt;\n                            &lt;h3&gt;{post.frontmatter.title}&lt;\/h3&gt;\n                            &lt;p&gt;{post.frontmatter.description}&lt;\/p&gt;\n                        &lt;\/Link&gt;\n                    ))}\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\nexport default blog;\n\nexport const query = graphql`\nquery BlogList {\n    allMarkdownRemark {\n        nodes {\n            frontmatter {\n                title\n                slug\n                description\n            }\n            id\n        }\n    }\n}\n`;<\/code><\/pre>\n<p>Im obigen Code greifst du auf das Ergebnis <code>query<\/code> \u00fcber den Prop <code>data<\/code> in deiner Komponente zu. Als n\u00e4chstes durchl\u00e4ufst du die Daten von <code>posts<\/code> mit der <code><a href=\"https:\/\/kinsta.com\/de\/blog\/typeerror-cannot-read-property-map-of-undefined\/\">map()<\/a><\/code> JavaScript-Methode durch und zeigst die Titel dann in einer Liste an.<\/p>\n<p>Um Fehler zu vermeiden, erstellst du eine <strong>blog.module.css-Datei<\/strong> im Ordner <strong>styles<\/strong> und f\u00fcgst den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-css\">.blog_cont h2 {\n    font-size: 40px;\n    margin-bottom: 20px;\n}\n\n.blog_grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 20px;\n}\n\n@media (max-width:700px) {\n    .blog_grid {\n        grid-template-columns: 1fr;\n    }\n}\n\n.blog_card {\n    background-color: #bfbfbf;\n    padding: 20px;\n    border-radius: 5px;\n    color: #000;\n    transition: all .5s ease-in-out;\n}\n\n.blog_card:hover {\n    background-color: #5333ed;\n    color: #fff;\n}\n\n.blog_card h3 {\n    margin-bottom: 15px;\n}\n\n.blog_card p {\n    margin-bottom: 15px;\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/blog-posts-graphql.png\" alt=\"Anzeige von Blogbeitr\u00e4gen, die \u00fcber GraphQL abgerufen wurden\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Anzeige von Blogbeitr\u00e4gen, die \u00fcber GraphQL abgerufen wurden<\/figcaption><\/figure>\n<h2>Vorlagen verstehen und dynamische Seiten in Gatsby mit GraphQL generieren<\/h2>\n<p>In Gatsby sind Vorlagen und dynamische Seiten wichtige Konzepte, mit denen du flexible und datengesteuerte Websites erstellen kannst. Mit Vorlagen kannst du die Struktur und das Layout von Seiten festlegen, w\u00e4hrend du mit GraphQL Daten abrufen kannst, um diese Vorlagen dynamisch zu f\u00fcllen.<\/p>\n<h3>Eine Vorlage f\u00fcr einen Blogbeitrag erstellen<\/h3>\n<p>Angenommen, du m\u00f6chtest einen Blog erstellen, in dem jeder Blogbeitrag eine einheitliche Struktur hat, einschlie\u00dflich Titel und Inhalt. Du kannst eine <code>BlogDetails<\/code> Vorlage erstellen, um dieses Layout zu definieren. Lege im Ordner <strong>src<\/strong> einen Ordner <strong>templates<\/strong> an und erstelle dann eine Datei <strong>blog-details.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/blog-details.module.css';\n\nconst BlogDetails = () =&gt; {\n\n    return (\n        &lt;Layout&gt;\n            &lt;div&gt;\n                &lt;div className={styles.blog_content}&gt;\n                    &lt;Img\n                        className={styles.blog_featured}\n                    \/&gt;\n                    &lt;h3&gt;Title&lt;\/h3&gt;\n                    &lt;div&gt;\n                        className={styles.html}\n                        dangerouslySetInnerHTML={}\n                    \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\n\nexport default BlogDetails;<\/code><\/pre>\n<p>In diesem Beispiel definiert die Vorlage <code>BlogDetails<\/code> die Struktur f\u00fcr einzelne Blogbeitr\u00e4ge. Als N\u00e4chstes verwenden wir GraphQL, um Daten f\u00fcr bestimmte Blogbeitr\u00e4ge abzurufen und sie als Requisiten an diese Vorlage zu \u00fcbergeben.<\/p>\n<h3>Dynamische Seiten generieren<\/h3>\n<p>Um dynamische Seiten zu erzeugen, erstellst du eine <strong>gatsby-node.js-Datei<\/strong> im Hauptverzeichnis deines Projekts. In dieser Datei kannst du festlegen, wie die Seiten erstellt werden.<\/p>\n<p>In deiner <strong>gatsby-node.js-Datei<\/strong> kannst du mit GraphQL die Daten abfragen, die du f\u00fcr dynamische Seiten verwenden willst. Wenn du zum Beispiel Markdown-Blogbeitr\u00e4ge hast, kannst du deren Slugs abfragen:<\/p>\n<pre><code class=\"language-jsx\">const path = require(`path`);\n\nexports.createPages = async ({ graphql, actions }) =&gt; {\n  const { data } = await graphql(`\n    query Articles {\n      allMarkdownRemark {\n        nodes {\n          frontmatter {\n            slug\n          }\n        }\n      }\n    }\n  `);\n\n  data.allMarkdownRemark.nodes.forEach((node) =&gt; {\n    actions.createPage({\n      path: '\/blog\/' + node.frontmatter.slug,\n      component: path.resolve('.\/src\/templates\/blog-details.js'),\n      context: { slug: node.frontmatter.slug },\n    });\n  });\n};<\/code><\/pre>\n<p>In diesem Beispiel fragen wir die Slugs aller Markdown-Beitr\u00e4ge ab und erstellen dynamische Seiten f\u00fcr jeden Beitrag, indem wir die Vorlage <code>BlogDetails<\/code> verwenden. Das Kontextobjekt wird verwendet, um Daten an die Vorlage zu \u00fcbergeben. Diese Daten (Slug) verwendet die Vorlage, um andere Daten abzurufen, die mit dem Slug \u00fcbereinstimmen.<\/p>\n<p>Verstehen wir zun\u00e4chst, wie die Bildoptimierung in Gatsby funktioniert, bevor wir eine GraphQL-Abfrage zur Vorlagenseite hinzuf\u00fcgen.<\/p>\n<h3>Bild-Optimierung in Gatsby<\/h3>\n<p>Zuvor hast du <code>gatsby-transformer-sharp<\/code> und <code>gatsby-plugin-sharp<\/code> zusammen mit <code>gatsby-source-filesystem<\/code> installiert und konfiguriert, um Bilder zu beschaffen.<\/p>\n<p>Mit diesen Plugins kannst du Bilder mit GraphQL abfragen und optimieren. Hier ist ein Beispiel daf\u00fcr, wie du mit <code>gatsby-plugin-sharp<\/code> ein optimiertes Bild abfragen und anzeigen kannst:<\/p>\n<pre><code class=\"language-json\">export const query = graphql`\n  query {\n    file(relativePath: { eq: \"example.jpg\" }) {\n      childImageSharp {\n        fluid {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`;<\/code><\/pre>\n<p>Im obigen Code fragst du ein Bild mit dem Namen <strong>example.jpg<\/strong> aus der <strong>Bildquelle<\/strong> ab und verwendest die Eigenschaft <code>fluid<\/code> des abgefragten Bildes, um es mit responsiver, optimierter Darstellung anzuzeigen.<\/p>\n<p>Du kannst dann <code>Img<\/code> aus <code>gatsby-image<\/code> importieren, um mit optimierten Bildern zu arbeiten.<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\n\nconst ImageExample = ({ data }) =&gt; {\n  const { fluid } = data.file.childImageSharp;\n\n  return (\n    &lt;div&gt;\n      &lt;Img fluid={fluid} alt=\"Example Image\" \/&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default ImageExample;<\/code><\/pre>\n<h3>Dynamische Seiten abfragen<\/h3>\n<p>Gatsby verwendet die angegebene Vorlage, um einzelne Seiten f\u00fcr jeden Blogbeitrag zu erstellen. F\u00fcgen wir nun eine GraphQL-Abfrage zur Vorlagenseite hinzu, um die Daten auf der Grundlage des Slugs abzurufen:<\/p>\n<pre><code class=\"language-jsx\">import { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\nimport React from 'react';\nimport Layout from '..\/components\/Layout';\nimport * as styles from '..\/styles\/blog-details.module.css';\n\nconst BlogDetails = ({ data }) =&gt; {\n    const { html } = data.markdownRemark;\n    const { title, featureImg } = data.markdownRemark.frontmatter;\n    return (\n        &lt;Layout&gt;\n            &lt;div&gt;\n                &lt;div className={styles.blog_content}&gt;\n                    &lt;Img\n                        fluid={featureImg.childImageSharp.fluid}\n                        className={styles.blog_featured}\n                    \/&gt;\n                    &lt;h3&gt;{title}&lt;\/h3&gt;\n                    &lt;div\n                        className={styles.html}\n                        dangerouslySetInnerHTML={{ __html: html }}\n                    \/&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/Layout&gt;\n    );\n};\n\nexport default BlogDetails;\n\nexport const query = graphql`\n    query ProjectDetails($slug: String) {\n        markdownRemark(frontmatter: { slug: { eq: $slug } }) {\n            html\n            frontmatter {\n                title\n                featureImg {\n                    childImageSharp {\n                        fluid {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n            }\n        }\n    }\n`;<\/code><\/pre>\n<p>Im obigen Code siehst du, dass wir nach dem optimierten Bild und nach dem Blogbeitrag suchen, der dem Slug entspricht.<\/p>\n<p>Du kannst den vollst\u00e4ndigen Quellcode f\u00fcr dieses <a href=\"https:\/\/github.com\/kinsta\/kinsta-gatsby-quickstart\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby-Projekt auf GitHub<\/a> einsehen.<\/p>\n<h2>Gatsby Static Sites mit Kinsta bereitstellen<\/h2>\n<p>Mit Kinsta kannst du <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">bis zu 100 statische Websites <strong>kostenlos<\/strong> hosten<\/a>. Dazu musst du deinen Code zu deinem bevorzugten Git-Provider (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> oder <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>) pushen und ihn dann auf Kinsta bereitstellen.<\/p>\n<p>Sobald dein Repo fertig ist, befolge diese Schritte, um deine statische Website bei Kinsta einzurichten:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta mit deinem Git-Anbieter.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Statische Sites<\/strong> und dann auf <strong>Site hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle das Repository und den Zweig aus, von dem aus du bereitstellen m\u00f6chtest.<\/li>\n<li>Vergeben Sie einen eindeutigen Namen f\u00fcr Ihre Site.<\/li>\n<li>MyKinsta wird die Build-Einstellungen f\u00fcr dieses Gatsby-Projekt automatisch erkennen. Die folgenden Einstellungen werden vorausgef\u00fcllt:\n<ul>\n<li><strong>Build-Befehl:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Node-Version:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Ver\u00f6ffentlichungs-Verzeichnis:<\/strong> <code>public<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Zum Schluss klickst du auf <strong>Website erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Und das war&#8217;s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erh\u00e4ltst einen Link, \u00fcber den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst sp\u00e4ter deine <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">eigene Domain<\/a> und dein <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">SSL-Zertifikat<\/a> hinzuf\u00fcgen, wenn du m\u00f6chtest.<\/p>\n<p>Alternativ zum Static Site Hosting kannst du deine statische Website auch mit dem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting<\/a> von Kinsta bereitstellen, das dir eine gr\u00f6\u00dfere Hosting-Flexibilit\u00e4t, eine breitere Palette von Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu geh\u00f6ren z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">umfassende Analysen<\/a>, die Echtzeit- und historische Daten umfassen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Dieser Leitfaden behandelt die Grundlagen der Datenbeschaffung, des Routings, des Stylings, der Bildoptimierung, der Plugins, der Bereitstellung und vieles mehr.<\/p>\n<p>Die Flexibilit\u00e4t, die Geschwindigkeit und das umfangreiche \u00d6kosystem von Gatsby machen es zu einer guten Wahl f\u00fcr die Erstellung statischer Websites. Ganz gleich, ob du einen pers\u00f6nlichen Blog, eine Portfolioseite oder eine Unternehmenswebsite erstellst, mit Gatsby bist du bestens ger\u00fcstet.<\/p>\n<p><em>Jetzt ist es an der Zeit, dein Wissen in die Tat umzusetzen und deine eigene Gatsby-Website zu erstellen. Hast du schon etwas mit Gatsby erstellt? Teile uns deine Projekte und Erfahrungen in den Kommentaren unten mit.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Statische Websites haben in den letzten Jahren dank ihrer Geschwindigkeit, Sicherheit und Einfachheit ein Comeback erlebt. Eines der f\u00fchrenden Tools f\u00fcr die Erstellung statischer Websites ist &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66626,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[982,951],"class_list":["post-66625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-statische-seiten-generatoren","topic-javascript-frameworks"],"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>Statische Websites mit Gatsby und Kinsta erstellen und bereitstellen - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.\" \/>\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\/gatsby\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby\" \/>\n<meta property=\"og:description\" content=\"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/gatsby\/\" \/>\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-10-30T12:34:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-31T14:31:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg\" \/>\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=\"20\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby\",\"datePublished\":\"2023-10-30T12:34:07+00:00\",\"dateModified\":\"2023-10-31T14:31:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/\"},\"wordCount\":3171,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/\",\"name\":\"Statische Websites mit Gatsby und Kinsta erstellen und bereitstellen - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg\",\"datePublished\":\"2023-10-30T12:34:07+00:00\",\"dateModified\":\"2023-10-31T14:31:07+00:00\",\"description\":\"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/gatsby\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/gatsby\/#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\":\"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby\"}]},{\"@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":"Statische Websites mit Gatsby und Kinsta erstellen und bereitstellen - Kinsta\u00ae","description":"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.","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\/gatsby\/","og_locale":"de_DE","og_type":"article","og_title":"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby","og_description":"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.","og_url":"https:\/\/kinsta.com\/de\/blog\/gatsby\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-10-30T12:34:07+00:00","article_modified_time":"2023-10-31T14:31:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"20\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby","datePublished":"2023-10-30T12:34:07+00:00","dateModified":"2023-10-31T14:31:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/"},"wordCount":3171,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/gatsby\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/","url":"https:\/\/kinsta.com\/de\/blog\/gatsby\/","name":"Statische Websites mit Gatsby und Kinsta erstellen und bereitstellen - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg","datePublished":"2023-10-30T12:34:07+00:00","dateModified":"2023-10-31T14:31:07+00:00","description":"Entdecke die Leistungsf\u00e4higkeit von Gatsby mit unserem umfassenden Leitfaden! Lerne, wie du blitzschnelle statische Websites erstellst, von der Einrichtung bis zur Bereitstellung.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/gatsby\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/10\/gatsby.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/gatsby\/#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":"Ein umfassender Leitfaden zur Erstellung statischer Websites mit Gatsby"}]},{"@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\/66625","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=66625"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66625\/revisions"}],"predecessor-version":[{"id":66638,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66625\/revisions\/66638"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66625\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/66626"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=66625"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=66625"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=66625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}