Erstellen von Webseiten mit Gatsby

Einführung in Gatsby

• Was ist Gatsby?

• Der JAMstack-Ansatz

• Vorteile von Headless CMS

• Das Nutzenversprechen von Gatsby

• Überblick über das Gatsby-Ökosystem

Erste Schritte mit Gatsby

• Installation von Gatsby und Konfiguration

• Erstellen eines Projekts mit Gatsby CLI

• Nutzung von Startern zur schnellen Entwicklung

Erstellen statischer Seiten

• Seiten in Gatsby erstellen

• Arbeiten mit statischen Assets

• Komponenten mit React erstellen und einfügen

Layouts und Styling

• Hinzufügen globaler CSS-Stile zu Ihrem Projekt

• Verwendung von CSS-Modulen für Komponenten-Styling

• Nutzung von CSS-in-JS-Bibliotheken

• Verknüpfung zwischen verschiedenen Seiten

• Einführung in Layout-Komponenten

Gatsby Architektur

• Datenquellen, Knoten und GraphQL in Gatsby

• Quelle-Plugins und Transformations-Plugins nutzen

• Verständnis des Erstellungsprozesses in Gatsby

Datenabfragen mit GraphQL

• Grundlagen von GraphQL

• Erstellen von GraphQL-Abfragen für Seiten

• Rendering der Daten in Komponenten

• Fehlerbehandlung und Verzögerungsmanagement

• Statische vs. Seiten-Abfragen in GraphQL

• Nutzung von <StaticQuery> für Komponentenabfragen

• Anwendung von useStaticQuery in React-Komponenten

Abfragen weiterer Datenquellen

• Datenabfragen aus dem Dateisystem

• Verständnis des Nodes-Namespace und des Speichermodells

• Bilder mit GraphQL abfragen

• Verbindung zu einem Headless CMS herstellen

Arbeiten mit Bildern

• Umsetzung von responsivem Design für Bilder

• Optimierung der Ladezeiten und Bandbreiten für Bilder

• Abfragen und Transformation von Bilddaten mit GraphQL

• Rendering von optimierten Bildern

Arbeiten mit Markdown

• Erstellen eines Blogs mit Markdown

• Umwandlung von Markdown in HTML

• Einführung in MDX für erweiterte Markup-Möglichkeiten

• Anwendung von MDX in Gatsby-Projekten

Programmgesteuertes Erstellen von Seiten

• Überblick über die Bootstrap-Phase von Gatsby

• Verständnis der gatsby-node API und deren Verwendung

• Erstellen von „Slugs“ für dynamische Seiten

• Automatisches Generieren von Seiten basierend auf Daten

Paginierung von Listen

• Implementierung der Paginierung in GraphQL

• Abfragen einer Liste mit GraphQL

• Rendering von paginierten Listen auf der Webseite

Umstellung auf die Produktionsumgebung

• Erstellen eines Produktions-Builds mit Gatsby

• Ausliefern und Hosting des Builds

• Hosting auf Plattformen wie Netlify

Unterstützung für Progressive Web Apps (PWA) verbessern

• Grundlagen von Progressive Web Apps (PWAs)

• Ausführen von Lighthouse-Audits zur Analyse der App

• Hinzufügen eines Web App Manifests für PWA-Features

• Implementierung von Offline-Unterstützung mit einem Service Worker