Statische Websites haben in den letzten Jahren dank ihrer Geschwindigkeit, Sicherheit und Einfachheit ein Comeback erlebt. Eines der führenden Tools für die Erstellung statischer Websites ist heute Gatsby, ein blitzschneller Static Site Generator (SSG).

Egal, ob du ein Webentwickler bist, der einen persönlichen Blog, eine Portfolioseite oder eine Unternehmenswebsite erstellen möchte, Gatsby kann dir helfen, deine Ziele zu erreichen. Dieser umfassende Leitfaden führt dich durch den Prozess der Erstellung statischer Websites mit Gatsby. Er deckt alles ab, von den Grundlagen bis hin zu fortgeschrittenen Themen.

Eine Demoseite, die zeigt, was du nach dem Lesen dieses Leitfadens erstellen kannst
Eine Demoseite, die zeigt, was du nach dem Lesen dieses Leitfadens erstellen kannst

Statische Seiten verstehen

Statische Websites sind Webseiten mit vorgerenderten HTML-, CSS- und JavaScript-Dateien. Im Gegensatz zu dynamischen Websites müssen sie nicht bei jeder Anfrage serverseitig verarbeitet werden. Stattdessen wird der gesamte Inhalt im Voraus generiert und direkt an den Browser des Nutzers übermittelt. Dieser Ansatz bietet mehrere Vorteile:

  1. Geschwindigkeit: Statische Websites werden schnell geladen, da es keine serverseitige Verarbeitung gibt.
  2. Sicherheit: Da kein serverseitiger Code ausgeführt wird, sind statische Websites weniger anfällig für Sicherheitsbedrohungen.
  3. Skalierbarkeit: Statische Websites lassen sich leicht zwischenspeichern und über Content Delivery Networks (CDNs) verbreiten.
  4. Einfachheit: Sie sind einfacher zu entwickeln, einzurichten und zu pflegen.

Nachdem du nun weißt, was statische Websites sind und welche Vorteile sie haben, wollen wir uns Gatsby genauer ansehen.

Was ist Gatsby?

Gatsby ist ein Open-Source-Framework, das auf der React JavaScript-Bibliothek basiert und die Erstellung statischer Websites vereinfacht. Es kombiniert die Leistungsfähigkeit von React-Komponenten mit GraphQL für die Datenverwaltung und ist damit eine hervorragende Wahl für Entwickler aller Ebenen. Hier sind die Gründe, warum Gatsby so besonders ist:

  1. Rasend schnell: Gatsby optimiert deine Website mithilfe von Techniken wie Code-Splitting und Lazy Loading auf Geschwindigkeit, sodass die Seite fast sofort geladen wird.
  2. Flexible Datenbeschaffung: Gatsby kann Daten aus verschiedenen Quellen beziehen, darunter Markdown-Dateien, APIs und Datenbanken.
  3. Reichhaltiges Plugin-Ökosystem: Das umfangreiche Plugin-Ökosystem von Gatsby ermöglicht es dir, seine Funktionen mühelos zu erweitern.
  4. SEO und Leistung: Gatsby generiert automatisch optimiertes HTML für bessere SEO und Performance.

Erste Schritte mit Gatsby

Um diesem Leitfaden zu folgen, solltest du Folgendes mitbringen

  • Grundlegendes Verständnis von HTML, CSS und JavaScript
  • Grundlegende Kenntnisse über React
  • Node.js und npm (Node Package Manager) oder yarn auf deinem Computer installiert haben

Um mit Gatsby loszulegen und ein Projekt zu erstellen, kannst du eines der vielen Beispiele in der Gatsby Starter Library verwenden oder ein Projekt von Grund auf neu erstellen.

Für diese Anleitung verwenden wir den offiziellen Hello World Starter für GatsbyJS, da wir damit ein einfaches Projekt ohne Plugins oder zusätzliche Dateien erstellen können.

  1. Installiere zunächst die Gatsby CLI auf deinem Computer, indem du den folgenden Befehl ausführst:
npm install -g gatsby-cli

Führe gatsby --version aus, um zu überprüfen, ob die Installation erfolgreich war.

  1. Als Nächstes navigierst du in den Ordner, in dem du dein Projekt erstellen möchtest, und führst den folgenden Befehl aus:
npx gatsby new <project-name> https://github.com/gatsbyjs/gatsby-starter-hello-world

Ändere <project-name> in den gewünschten Namen für dein Projekt.

  1. Sobald dies erfolgreich war, navigiere in den Projektordner und starte den Entwicklungsserver:
cd <project-name>
gatsby develop

Der lokale Entwicklungsserver wird unter http://localhost:8000 gestartet , von wo aus du auf deine Gatsby-Site zugreifen kannst.

Das Gatsby Hello World Theme
Das Gatsby Hello World Theme

Die Dateistruktur von Gatsby verstehen

Wenn du dein Projekt in einem Code-Editor öffnest, wirst du die folgende Struktur sehen:

/
|-- /public
|-- /src
    |-- /pages
        |-- index.js
|-- /static
|-- gatsby-config.js
  • /public: Dieses Verzeichnis enthält die Ausgabe deines Gatsby-Build-Prozesses. Hier befinden sich die erzeugten HTML-, CSS-, JavaScript- und anderen Dateien.
  • /src: Dies ist das Herzstück deines Gatsby-Projekts, mit dem du die meiste Zeit verbringen wirst. Es enthält verschiedene Unterverzeichnisse und Dateien:
    • /pages: Hier werden alle Seiten deines Projekts gespeichert. Jede JavaScript-Datei hier entspricht einer Route auf deiner Website.
  • /static: Dieses Verzeichnis wird für statische Dateien verwendet, die du in deine Website einbinden möchtest, z. B. Bilder, Schriftarten oder herunterladbare Dateien. Diese Dateien werden so bereitgestellt, wie sie sind, und werden von Gatsby nicht verarbeitet.
  • gatsby-config.js: In dieser Konfigurationsdatei legst du verschiedene Einstellungen für deine Gatsby-Website fest. Hier kannst du Plugins, Website-Metadaten und andere Konfigurationen festlegen.

Seiten und Komponenten erstellen

In Gatsby ist das Erstellen von Webseiten ein unkomplizierter Prozess. Jede JavaScript-Datei, die du im Ordner /src/pages erstellst, wird dank der automatischen Seitengenerierung von Gatsby automatisch zu einer Seite mit der entsprechenden Route.

Du kannst so viele Seiten erstellen, wie du für deine Website brauchst, indem du weitere JavaScript-Dateien zum Ordner /src/pages hinzufügst. Du kannst zum Beispiel eine about.js-Datei für eine „Über“-Seite erstellen.

Du kannst zwar einzelne JavaScript-Dateien für jede Seite direkt im Ordner /src/pages erstellen, aber es ist auch möglich, deine Seiten weiter zu organisieren. Du kannst Unterordner erstellen, um zusammengehörige Seiten zu gruppieren. Du könntest z. B. einen Blog-Ordner erstellen, um alle Blog-Seiten zu organisieren.

Für dieses Projekt wird die Seitenstruktur folgendermaßen aussehen:

|-- /src
    |-- /pages
        |-- about.js
        |-- index.js
        |-- /blog
            |-- index.js

Verwendung von JSX für Seiten

Da Gatsby auf React aufbaut, sind seine Seiten und Komponenten in JSX (JavaScript XML) geschrieben. JSX ist eine Syntaxerweiterung für JavaScript, mit der du die Struktur und das Layout deiner Benutzeroberflächen auf eine sehr lesbare und ausdrucksstarke Weise definieren kannst.

So kannst du zum Beispiel den Inhalt deiner Startseite (index.js) wie folgt erstellen:

import React from 'react';

export default function Home() {
  return (
    <>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
      </div>
    </>
  );
}

Verlinkung von Seiten in Gatsby

Um einen Link zu einer anderen Seite zu erstellen, kannst du die Komponente Link wie folgt verwenden:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
    return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <Link> to="/about">About Us</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </>
    );
}

Im obigen Beispiel haben wir die Komponente Link aus gatsby importiert und sie verwendet, um Links zur Seite „Über uns“ und zu einem Blog zu erstellen. Die Seite „Über uns“ hat zum Beispiel die Route /about. Wenn die Nutzer auf den Link „Über uns“ klicken, werden sie auf die Seite /about weitergeleitet.

Um Links zu externen Websites zu erstellen, kannst du normale Anker-Tags (<a>) mit dem Attribut href verwenden:

import React from 'react';

export default function Home() {
  return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <div>
                    <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                    <p>Fast, Secure, Reliable Hosting Solution.</p>
                    <a href="https://kinsta.com/docs/static-site-hosting/" target="_blank" rel="noreferrer">
                        <div>Read more</div>
                    </a>
                </div>
            </div>
        </>
    );
}

In diesem Fall öffnet der Link die externe Website dank der Attribute target="_blank" und rel="noreferrer" in einem neuen Browser-Tab.

Komponenten in Gatsby erstellen

Die komponentenbasierte Architektur von Gatsby ermöglicht es dir, wiederverwendbare Bausteine für deine Webseiten zu erstellen. Anstatt Code auf mehreren Seiten zu duplizieren, kannst du gemeinsame Elemente in Komponenten kapseln und so deine Codebasis übersichtlicher, wartbarer und effizienter machen.

Angenommen, der Code deiner Startseite besteht aus dem Navigationsbereich, dem Hauptinhalt und einer Fußzeile:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return (
    <>
      <div className="nav-links">
        <Link> to="/">Home</Link>
        <Link> to="/about">About</Link>
        <Link> to="/blog">Blog</Link>
      </div>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <div className="footer">
        <p>
          Hosted with ❤️ by Kinsta's{' '}
          <a> href="https://kinsta.com/static-site-hosting">
            Static Site Hosting
          </a>
          .
        </p>
      </div>
    </>
  );
}

Stell dir vor, du müsstest den Code für die Navigationsleiste und die Fußzeile für jede Seite deiner Website duplizieren. An dieser Stelle kommt die Stärke von Komponenten ins Spiel. Du kannst wiederverwendbare Komponenten für die Navigationsleiste, die Fußzeile und jeden anderen Teil des Codes erstellen, der auf mehreren Seiten und Komponenten wiederholt werden soll.

Um mit Komponenten in Gatsby zu arbeiten, erstellst du einen Komponentenordner im src-Ordner, in dem alle Komponenten gespeichert werden. Als nächstes erstellst du deine Komponenten, z. B. Navbar.js und Footer.js. In der Datei Navbar.js trennst du den Code folgendermaßen:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <div className="nav-links">
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Und auch deine Footer.js:

import React from 'react';
const Footer = () => {
    return (
        <div className="footer">
            <p>
                Hosted with ❤️ by Kinsta's{' '}
                <a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
                .
            </p>
        </div>
    );
};

export default Footer;

Als Nächstes importierst du deine Komponentendateien in deine Seiten oder Komponenten und verwendest sie auf diese Weise:

import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Home() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <Footer />
    </>
  );
}

Layout-Komponente erstellen

Eine gängige Praxis in der Webentwicklung ist die Erstellung einer Layoutkomponente, die die Gesamtstruktur deiner Website festlegt. Die Layoutkomponente enthält in der Regel Elemente, die auf jeder Seite erscheinen, wie Kopf- und Fußzeilen, Navigationsmenüs und Seitenleisten.

Erstelle eine neue Datei namens Layout.js in deinem Ordner /src/components. Als Nächstes definierst du die Layout-Struktur. In diesem Leitfaden wird die Layout-Struktur nur die Navigationsleiste und die Fußzeile enthalten:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout = ({ children }) => {
    return (
        <div className="layout">
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

In dieser Layoutkomponente verwenden wir die Komponenten, um den Seiteninhalt zu umhüllen (als children bereitgestellt). Um die Layoutkomponente in deinen Seiten zu verwenden, importiere sie und umhülle deinen Seiteninhalt damit. Zum Beispiel in deiner index.js Seite:

import React from 'react';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

Mit einer Layoutkomponente sorgst du für eine einheitliche Struktur und ein einheitliches Erscheinungsbild auf all deinen Seiten und hältst gleichzeitig deinen Code übersichtlich und wartbar. Das ist eine leistungsstarke Methode, um die gemeinsamen Elemente deiner Website effizient zu verwalten.

Gestalten von Seiten und Komponenten in Gatsby

Das Styling deiner Gatsby-Site ist flexibel und erlaubt dir, verschiedene Ansätze zu verwenden, darunter einfaches CSS, CSS-in-JS oder CSS-Präprozessoren wie Sass. Hier erfährst du, wie du ein normales und ein Modul-Styling für Seiten erstellen kannst.

CSS-Styling

In Gatsby kannst du ganz einfach eine CSS-Datei erstellen und sie mit einer beliebigen Komponente oder Seite verknüpfen, die dann perfekt funktioniert. Du kannst zum Beispiel einen Styles-Ordner im src-Ordner anlegen und dann eine global.css-Datei mit deinem CSS-Code erstellen.

Hier sind zum Beispiel einige grundlegende globale Styles für die zuvor erstellten Komponenten:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ddd;
    font-family: 'Poppins',
        sans-serif;
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    height: 200px;
    align-items: center;
}

nav .logo-img {
    width: 100px;
}

nav .nav-links a {
    padding: 0 20px;
    font-size: 18px;
}

@media (max-width:700px) {
    body {
        width: 100%;
        padding: 0 20px;
    }

    nav .nav-links a {
        padding: 0 18px;
    }
}

.footer {
    width: 100%;
    text-align: center;
    margin: 100px 0 20px;
}

Im obigen Code importierst du die Schriftart Poppins von Google Fonts und definierst dann grundlegende Stile, die auf alle deine Komponenten angewendet werden.

Als Nächstes importierst du die CSS-Datei in die Komponenten, die du stylen möchtest. Für dieses Projekt kannst du sie aber auch in deine Layout-Komponente einfügen, damit sie global gilt:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../styles/global.css';

const Layout = ({ children }) => {
    return (
        <div>
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Modul-CSS-Styling

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 <Seitenname>.module.css und fügst der Datei den jeweiligen Stil hinzu.

Erstelle zum Beispiel home.module.css für die Startseite und füge den folgenden Code hinzu:

.home_hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

.home_hero h1 {
    font-size: 60px;
    width: 70%;
}

.home_hero p {
    color: #6E7076;
    font-size: 20px;
}

.btn {
    background-color: #5333ed;
    padding: 20px 30px;
    margin-top: 40px;
    border-radius: 5px;
    color: #fff;
}

@media (max-width:700px) {
    .home_hero h1 {
        font-size: 40px;
    }

    .home_hero p {
        font-size: 16px;
    }
}

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:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/home.module.css';

export default function Home() {
  return (
    <Layout>
      <div className={styles.home_hero}>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div className={styles.btn}>Read more</div>
        </a>
      </div>
    </Layout>
  );
}


Statische Dateien in Gatsby verwenden

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 /static im Stammverzeichnis deines Projekts hinzugefügt.

Wenn du zum Beispiel das Bild kinsta-logo.png zum Verzeichnis /static hinzufügst, kannst du es in deiner Komponente wie folgt anzeigen:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <Link> to="/">
                <img src="/kinsta-logo.png" alt="Kinsta Logo" className="logo-img" />
            </Link>
            <div className="nav-links">
                <Link> to="/">Home</Link>
                <Link> to="/about">About</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Gatsby löst diese relativen Pfade automatisch in die richtige URL auf, wenn deine Website erstellt wird. Später in diesem Leitfaden erfährst du, wie du Bilder in Gatsby optimieren kannst.

Plugins und Integrationen

Gatsby verfügt über ein reichhaltiges Ökosystem an Plugins, mit denen du seine Funktionen erweitern kannst. Du findest Plugins für SEO, Analytics, Bildoptimierung, Markdown-Umwandlung und vieles mehr. Die Installation und Konfiguration von Plugins ist ganz einfach und kann die Möglichkeiten deiner Website erheblich erweitern.

In diesem Leitfaden verwenden wir vier Plugins:

  1. gatsby-transformer-remark: Mit diesem Plugin kannst du Markdown-Dateien in HTML-Inhalte umwandeln und so ganz einfach Blogbeiträge, Dokumentationen oder andere textbasierte Inhalte erstellen und verwalten.
  2. gatsby-transformer-sharp und gatsby-plugin-sharp: Diese Plugins arbeiten zusammen, um Bilder in deinem Gatsby-Projekt zu optimieren und zu manipulieren.
  3. gatsby-source-filesystem: Mit diesem Plugin kannst du Dateien aus deinem Projektverzeichnis quellen lassen und sie für die Abfrage mit GraphQL verfügbar machen.

Um diese Plugins in deinem Gatsby-Projekt zu verwenden, führe den folgenden Befehl im Hauptverzeichnis deines Projekts aus, um sie zu installieren:

npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

Anschließend konfigurierst du sie in deiner gatsby-config.js-Datei. Hier ist ein Beispiel, wie du die Plugins einrichtest:

module.exports = {
    plugins: [
        // ...other plugins
        // Transform Markdown files into HTML
        'gatsby-transformer-remark',
        // Optimize and manipulate images
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        // Source files from your project directory
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/src/posts/`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
    ],
};

Es werden zwei gatsby-source-filesystem Konfigurationen erstellt, die auf zwei Ordner verweisen: posts und images. Posts speichert einige Markdown-Dateien (Blogposts), die mit gatsby-transformer-remark umgewandelt werden, und images speichert Bilder für den Blog und andere Bilder, die du optimieren möchtest.

Denke immer daran, deinen lokalen Entwicklungsserver neu zu starten, wenn du Änderungen an der Datei gatsby-config.js vornimmst.

Blogbeiträge erstellen

Nachdem wir nun unsere Plugins konfiguriert haben, erstellen wir einen Ordner posts im src-Verzeichnis und legen zwei Markdown-Dateien mit folgendem Inhalt an:

post-1.md:

---
title: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its features."
featureImg: ../images/featured/image-1.jpeg
---

Welcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.

Und post-2.md:

---
title: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Explore how to optimize images in your Gatsby project."
featureImg: ../images/featured/image-2.jpeg
---

Images play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.

Diese Markdown-Dateien enthalten Frontmatter mit Metadaten zu den Blogposts, darunter Titel, Datum, Slugs, Beschreibungen und Bildpfade.

Abfragen in Gatsby mit GraphQL

Gatsby nutzt GraphQL, um Daten für 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ährst du, wie du Daten in Gatsby mit GraphQL abfragen kannst.

Wenn du gatsby develop in deinem Terminal ausführst, wirst du feststellen, dass du neben dem Link gatsby-source-filesystem, der dein Projekt im Web öffnet, auch die URL http://localhost:8000/___graphql siehst. Diese URL ermöglicht den Zugriff auf den GraphiQL-Editor für dein Gatsby-Projekt.

Wenn du den Editor öffnest, siehst du diese Oberfläche:

Der Gatsby GraphiQL Playground
Der Gatsby GraphiQL Playground

Du kannst in diesem Editor so viele Informationen über deine Website abfragen. Da du aber Markdown-Dateien erstellt und alle Konfigurationen in der Datei gatsby-config.js vorgenommen hast. Lass uns die Markdown-Dateien und ihren Inhalt abfragen, indem wir die folgende Abfrage im Editor ausführen:

query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}

Diese Abfrage holt die Daten aus allen Markdown-Dateien mit allMarkdownRemark ab. Sie holt die title, slug und description aus dem Frontmatter jeder Datei und auch deren id.

Nachdem du deine Abfrage geschrieben hast, klicke auf die Schaltfläche „Abspielen“ (ein nach rechts zeigendes Dreieckssymbol), um die Abfrage auszuführen. Die Ergebnisse werden auf der rechten Seite des Editors angezeigt.

Benutze den GraphiQL-Playground, um Markdown-Informationen zu erhalten
Benutze den GraphiQL-Playground, um Markdown-Informationen zu erhalten

Du kannst dann GraphQL verwenden, um die Markdown-Daten in deinen Komponenten oder Seiten abzufragen. Um diese Daten in der Seite blog/index.js abzufragen, importiere zunächst graphql von gatsby. Füge dann am Ende des JSX-Codes Folgendes hinzu:

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

Im obigen Code verwenden wir das Tag graphql, um eine GraphQL-Abfrage namens query zu erstellen. So sollte deine blog/index.js-Datei aussehen:

import { graphql, Link } from 'gatsby';
import React from 'react';
import Layout from '../../components/Layout';
import * as styles from '../../styles/blog.module.css';

const blog = ({ data }) => {
    const posts = data.allMarkdownRemark.nodes;
    return (
        <Layout>
            <div className={styles.blog_cont}>
                <h2>Blog</h2>
                <div className={styles.blog_grid}>
                    {posts.map((post) => (
                        <Link
                            to={`/blog/${post.frontmatter.slug}`}
                            className={styles.blog_card}
                            key={post.id}
                        >
                            <h3>{post.frontmatter.title}</h3>
                            <p>{post.frontmatter.description}</p>
                        </Link>
                    ))}
                </div>
            </div>
        </Layout>
    );
};
export default blog;

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

Im obigen Code greifst du auf das Ergebnis query über den Prop data in deiner Komponente zu. Als nächstes durchläufst du die Daten von posts mit der map() JavaScript-Methode durch und zeigst die Titel dann in einer Liste an.

Um Fehler zu vermeiden, erstellst du eine blog.module.css-Datei im Ordner styles und fügst den folgenden Code hinzu:

.blog_cont h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.blog_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width:700px) {
    .blog_grid {
        grid-template-columns: 1fr;
    }
}

.blog_card {
    background-color: #bfbfbf;
    padding: 20px;
    border-radius: 5px;
    color: #000;
    transition: all .5s ease-in-out;
}

.blog_card:hover {
    background-color: #5333ed;
    color: #fff;
}

.blog_card h3 {
    margin-bottom: 15px;
}

.blog_card p {
    margin-bottom: 15px;
}
Anzeige von Blogbeiträgen, die über GraphQL abgerufen wurden
Anzeige von Blogbeiträgen, die über GraphQL abgerufen wurden

Vorlagen verstehen und dynamische Seiten in Gatsby mit GraphQL generieren

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ährend du mit GraphQL Daten abrufen kannst, um diese Vorlagen dynamisch zu füllen.

Eine Vorlage für einen Blogbeitrag erstellen

Angenommen, du möchtest einen Blog erstellen, in dem jeder Blogbeitrag eine einheitliche Struktur hat, einschließlich Titel und Inhalt. Du kannst eine BlogDetails Vorlage erstellen, um dieses Layout zu definieren. Lege im Ordner src einen Ordner templates an und erstelle dann eine Datei blog-details.js:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = () => {

    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        className={styles.blog_featured}
                    />
                    <h3>Title</h3>
                    <div>
                        className={styles.html}
                        dangerouslySetInnerHTML={}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

In diesem Beispiel definiert die Vorlage BlogDetails die Struktur für einzelne Blogbeiträge. Als Nächstes verwenden wir GraphQL, um Daten für bestimmte Blogbeiträge abzurufen und sie als Requisiten an diese Vorlage zu übergeben.

Dynamische Seiten generieren

Um dynamische Seiten zu erzeugen, erstellst du eine gatsby-node.js-Datei im Hauptverzeichnis deines Projekts. In dieser Datei kannst du festlegen, wie die Seiten erstellt werden.

In deiner gatsby-node.js-Datei kannst du mit GraphQL die Daten abfragen, die du für dynamische Seiten verwenden willst. Wenn du zum Beispiel Markdown-Blogbeiträge hast, kannst du deren Slugs abfragen:

const path = require(`path`);

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query Articles {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  data.allMarkdownRemark.nodes.forEach((node) => {
    actions.createPage({
      path: '/blog/' + node.frontmatter.slug,
      component: path.resolve('./src/templates/blog-details.js'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

In diesem Beispiel fragen wir die Slugs aller Markdown-Beiträge ab und erstellen dynamische Seiten für jeden Beitrag, indem wir die Vorlage BlogDetails verwenden. Das Kontextobjekt wird verwendet, um Daten an die Vorlage zu übergeben. Diese Daten (Slug) verwendet die Vorlage, um andere Daten abzurufen, die mit dem Slug übereinstimmen.

Verstehen wir zunächst, wie die Bildoptimierung in Gatsby funktioniert, bevor wir eine GraphQL-Abfrage zur Vorlagenseite hinzufügen.

Bild-Optimierung in Gatsby

Zuvor hast du gatsby-transformer-sharp und gatsby-plugin-sharp zusammen mit gatsby-source-filesystem installiert und konfiguriert, um Bilder zu beschaffen.

Mit diesen Plugins kannst du Bilder mit GraphQL abfragen und optimieren. Hier ist ein Beispiel dafür, wie du mit gatsby-plugin-sharp ein optimiertes Bild abfragen und anzeigen kannst:

export const query = graphql`
  query {
    file(relativePath: { eq: "example.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

Im obigen Code fragst du ein Bild mit dem Namen example.jpg aus der Bildquelle ab und verwendest die Eigenschaft fluid des abgefragten Bildes, um es mit responsiver, optimierter Darstellung anzuzeigen.

Du kannst dann Img aus gatsby-image importieren, um mit optimierten Bildern zu arbeiten.

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';

const ImageExample = ({ data }) => {
  const { fluid } = data.file.childImageSharp;

  return (
    <div>
      <Img fluid={fluid} alt="Example Image" />
    </div>
  );
};

export default ImageExample;

Dynamische Seiten abfragen

Gatsby verwendet die angegebene Vorlage, um einzelne Seiten für jeden Blogbeitrag zu erstellen. Fügen wir nun eine GraphQL-Abfrage zur Vorlagenseite hinzu, um die Daten auf der Grundlage des Slugs abzurufen:

import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = ({ data }) => {
    const { html } = data.markdownRemark;
    const { title, featureImg } = data.markdownRemark.frontmatter;
    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        fluid={featureImg.childImageSharp.fluid}
                        className={styles.blog_featured}
                    />
                    <h3>{title}</h3>
                    <div
                        className={styles.html}
                        dangerouslySetInnerHTML={{ __html: html }}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

export const query = graphql`
    query ProjectDetails($slug: String) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                featureImg {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
`;

Im obigen Code siehst du, dass wir nach dem optimierten Bild und nach dem Blogbeitrag suchen, der dem Slug entspricht.

Du kannst den vollständigen Quellcode für dieses Gatsby-Projekt auf GitHub einsehen.

Gatsby Static Sites mit Kinsta bereitstellen

Mit Kinsta kannst du bis zu 100 statische Websites kostenlos hosten. Dazu musst du deinen Code zu deinem bevorzugten Git-Provider (Bitbucket, GitHub oder GitLab) pushen und ihn dann auf Kinsta bereitstellen.

Sobald dein Repo fertig ist, befolge diese Schritte, um deine statische Website bei Kinsta einzurichten:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta mit deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Statische Sites und dann auf Site hinzufügen.
  4. Wähle das Repository und den Zweig aus, von dem aus du bereitstellen möchtest.
  5. Vergeben Sie einen eindeutigen Namen für Ihre Site.
  6. MyKinsta wird die Build-Einstellungen für dieses Gatsby-Projekt automatisch erkennen. Die folgenden Einstellungen werden vorausgefüllt:
    • Build-Befehl: npm run build
    • Node-Version: 18.16.0
    • Veröffentlichungs-Verzeichnis: public
  1. Zum Schluss klickst du auf Website erstellen.

Und das war’s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erhältst einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst später deine eigene Domain und dein SSL-Zertifikat hinzufügen, wenn du möchtest.

Alternativ zum Static Site Hosting kannst du deine statische Website auch mit dem Anwendungs-Hosting von Kinsta bereitstellen, das dir eine größere Hosting-Flexibilität, eine breitere Palette von Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu gehören z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und umfassende Analysen, die Echtzeit- und historische Daten umfassen.

Zusammenfassung

Dieser Leitfaden behandelt die Grundlagen der Datenbeschaffung, des Routings, des Stylings, der Bildoptimierung, der Plugins, der Bereitstellung und vieles mehr.

Die Flexibilität, die Geschwindigkeit und das umfangreiche Ökosystem von Gatsby machen es zu einer guten Wahl für die Erstellung statischer Websites. Ganz gleich, ob du einen persönlichen Blog, eine Portfolioseite oder eine Unternehmenswebsite erstellst, mit Gatsby bist du bestens gerüstet.

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.

Joel Olawanle Kinsta

Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.