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