Erstellen von Webseiten mit Gatsby

Ziele

In dieser 2-tägigen Schulung "Erstellen von Webseiten mit Gatsby" lernen Sie einen neuen Ansatz für die Bereitstellung webbasierter Lösungen kennen, der sich von einem monolithischen CMS hin zu einem Content Mesh mit einer entkoppelten Infrastrukturebene für Websites bewegt.

Der Kurs beginnt mit einer Einführung in Gatsby, einschließlich Installation, Projekterstellung mit Gatsby CLI, Erstellung statischer Seiten sowie Gestaltung von Layouts und Styling. Sie erhalten Einblicke in die Architektur von Gatsby, das Abfragen von Daten mit GraphQL und die Arbeit mit Bildern und Markdown. Abschließend werden die Bereitstellung in der Produktion und die Verbesserung der Unterstützung für Progressive Web Apps (PWA) behandelt.

Zielgruppe

• Entwickler

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Erfahrung in der JavaScript-Entwicklung
• 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 <staticquery></staticquery> 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

Open Badge - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erlangen Sie nicht nur Fachkenntnisse und Fähigkeiten, sondern bekommen zusätzlich zu Ihrem Teilnahmezertifikat ein Open Badge als digitalen Nachweis Ihrer Kompetenz.

Sie können diesen in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com Konto abrufen. Ihre verdienten Badges lassen sich problemlos in sozialen Netzwerken integrieren und weitergeben.

Mehr zu den Vorteilen von Badges

Kurz vor Durchführung