Erstellen von Webseiten mit Gatsby

Ziele

Der Kurs "Erstellen von Webseiten mit Gatsby" wurde entwickelt, um einen neuen Ansatz für die Bereitstellung webbasierter Lösungen zu demonstrieren, weg von einem monolithischen CMS hin zu einem Content Mesh mit einer Infrastrukturebene, um Websites zu entkoppeln.

Der Kurs startet mit einer Einführung in Gatsby, einschließlich der Installation, der Erstellung eines Projekts mit Gatsby CLI, der Erstellung statischer Seiten sowie der Gestaltung von Layouts und Styling. Anschließend werden die Architektur von Gatsby, die Abfrage von Daten mit GraphQL und die Arbeit mit Images und Markdowns beschrieben. Der Kurs schließt mit der Untersuchung, wie man zur Produktion übergeht und wie man die Unterstützung für Progressive Web Apps (PWA) verbessert.

Zielgruppe

Entwickler und Entwicklerteams, die Gatsby in ihr Toolkit aufnehmen möchten.

Voraussetzungen

Die Teilnehmer müssen Erfahrung in der JavaScript-Entwicklung haben. Erfahrung mit React ist hilfreich, aber nicht erforderlich.

Agenda

Einführung in Gatsby

• Der JAM-Stack
• Headless CMSes
• Gatsbys Nutzenversprechen
• Das Gatsby-Ökosystem

Erste Schritte

• Installation von Gatsby
• Erstellen eines Projekt mit Gatsby CLI
• Benutzung eines Starters

Statische Seiten erstellen

• Erstellen Sie eine Seite
• Verwendung von statischen Assets
• Erstellen von Komponenten mit React

Layouts und Styling

• Hinzufügen globaler CSS-Stile
• Verwendung von CSS-Modulen
• Verwendung einer CSS in JS-Bibliothek
• Verknüpfung zwischen Seiten mit
• Hinzufügen einer Layout-Komponente

Gatsby Architektur

• Datenquellen, Knotenpunkte und GraphQL
• Quellen-Plugins und Transformator-Plugins
• Verstehen des Erstellungsprozesses von Gatsby

Abfragen von Daten mit GraphQL

• Verstehen von GraphQL
• GraphQL-Abfragen von Seiten erstellen
• Rendering der empfangenen Daten
• Behandlung von Fehlern und Verzögerungen
• Statische Abfragen vs. Seitenabfragen
• Abfragen von Komponenten mit durchführen
• Verwendung des useStaticQuery-Befehls

Weitere Datenquellen abfragen

• Abfrage von Daten aus dem Dateisystem
• Verstehen des Nodes Namespace und des Speichermodells
• Abfrage von Bilddaten
• Verbindung mit einem Headless CMS

Arbeiten mit Images

• Responsive Design für Images
• Bandbreite und Ladezeit
• Abfrage von Images mit GraphQL
• Image-Transformationen
• Rendering von Images

Arbeiten mit Markdown

• Erstellen eines Blogs
• Umwandlung von Markdown in HTML
• Einführung in MDX
• Anwendung von MDX

Programmgesteuertes Erstellen von Seiten

• Gatsbys Bootstrap-Phase
• Verstehen von gatsby-node und Gatsby's APIs
• Erstellen von "Slugs" für generierte Seiten
• Generieren der Seiten

Paginierung über Listen

• Paginierung in GraphQL
• Abfrage einer Liste
• Rendering einer paginierten Liste

Umstellung auf Production

• Erstellen eines Production-Builds
• Ausliefern des Production-Builds
• Hosting der Site
• Verteilen auf Netlify

Verbesserung der Unterstützung für Progressive Web Apps (PWA):

• PWAs
• Ausführen eines Lighthouse-Audits
• Hinzufügen eines Manifests
• Hinzufügen von Offline-Unterstützung mit einem Service Worker