Astro ist ein modernes Frontend-Framework, das es Entwicklern ermöglicht, schnell und effizient statische Websites zu erstellen. Mit Astro können Entwickler die Leistung moderner JavaScript-Frameworks wie React, Vue.js und Svelte nutzen, um dynamische Benutzeroberflächen zu erstellen und gleichzeitig statische HTML-, CSS- und JavaScript-Dateien während des Build-Prozesses zu erzeugen.

In Verbindung mit WordPress als Headless Content Management System (CMS) ermöglicht Astro die nahtlose Integration von Backend-APIs und Frontend-Code und damit die effiziente Entwicklung von statischen Websites mit dynamischen Inhalten. Dieser Ansatz bietet mehrere Vorteile.

Statische Websites, die mit Astro und einem WordPress-Backend erstellt werden, bieten eine hervorragende Leistung. Sie können direkt von einem Content Delivery Network (CDN) ausgeliefert werden. Dadurch entfällt die serverseitige Verarbeitung, was zu schnelleren Ladezeiten und einem reibungsloseren Nutzererlebnis führt.

Diese Anleitung führt dich durch den Prozess der Einrichtung einer statischen Website mit Astro, die auf dem Kinsta Statische-Seiten-Hosting Dienst gehostet wird, und WordPress als Backend.

Die Rolle von WordPress als Headless CMS

Ein Headless CMS wie WordPress trennt die Ebenen der Inhaltsverwaltung und der Bereitstellung. Es ermöglicht dem Backend, die Inhalte zu pflegen, während ein anderes System wie Astro das Frontend verwaltet.

WordPress dient als Inhaltsspeicher und liefert Daten an das Frontend, das die Inhalte über eine API für die Nutzer/innen anzeigt. Diese Architektur erhöht die Flexibilität, indem sie es dir ermöglicht, Inhalte für verschiedene Ausgaben wiederzuverwenden und WordPress-Nutzern ein vertrautes Content-Management-Erlebnis zu bieten.

Die Entkopplung des Frontends vom Backend bietet außerdem mehr Flexibilität bei der Gestaltung des Frontends und der Migration von Inhalten. Außerdem macht die Zugänglichkeit über APIs die Inhalte zukunftssicher.

Richte deine Entwicklungsumgebung ein

Es gibt drei Schritte, die du befolgen musst, um deine Umgebung einzurichten:

  1. Installiere Astro.
  2. Richte eine WordPress-Website ein.
  3. Erstelle eine WordPress Staging-Umgebung.

Voraussetzungen

Um diesem Tutorial folgen zu können, musst du folgende Voraussetzungen erfüllen:

Astro installieren

  1. Erstelle für dein Projekt ein neues Verzeichnis und navigiere dorthin.
  2. Erstelle ein neues Projekt, indem du den folgenden Befehl in deinem Terminal ausführst: 
    npm create astro@latest

    Dieser Schritt erzeugt Konfigurationsaufforderungen. Richte sie so ein, wie du es möchtest.

    Terminalfenster mit Anweisungen zur Konfiguration deines neuen Astro-Projekts. Die Aufforderungen lauten:- Wo sollen wir dein neues Projekt erstellen?- Wie möchtest du dein neues Projekt starten?- Hast du vor, TypeScript zu schreiben?- Wie streng soll TypeScript sein?- Abhängigkeiten installieren?- Ein neues Git-Repository initialisieren?
    Anweisungen für die Konfiguration deines neuen Astro-Projekts

  3. Wenn das Projekt erfolgreich erstellt wurde, starte npm run dev, um den lokalen Entwicklungsserver auf http://localhost:4321/ zu starten.

    Die Willkommensseite der Astro-Website mit Links zur Dokumentation, zu Integrationen, Themen und zur Community.
    Astro wurde erfolgreich installiert

Einrichten einer WordPress-Website auf Kinsta

Kinsta ist ein High-End-WordPress-Hosting-Anbieter, der für seine intuitive Benutzeroberfläche und seine leistungsstarke Infrastruktur bekannt ist. Folge diesen Schritten, um eine WordPress-Website auf Kinsta einzurichten.

  1. Klicke in deinem MyKinsta-Dashboard auf WordPress Websites und dann auf Website erstellen.
  2. Wähle die Option WordPress installieren und klicke auf Weiter.
  3. Gib einen Website-Namen an, wähle einen Rechenzentrumsstandort und klicke auf Weiter.
  4. Gib alle anderen Informationen ein und klicke auf Weiter.
  5. Sobald deine Seite erstellt ist, solltest du die Meldung „Deine Seite wurde erstellt!“ sehen

Eine WordPress-Staging-Umgebung erstellen

Jede WordPress-Installation bei Kinsta hat die Möglichkeit, eine kostenlose Staging-Umgebung einzurichten, die von der eigentlichen Produktionsseite getrennt ist. Diese eignet sich hervorragend zum Testen neuer WordPress-Versionen, Plugins, Codes und für allgemeine Entwicklungsarbeiten.

Die Schritte zum Erstellen einer WordPress-Staging-Umgebung auf Kinsta sind wie folgt.

  1. Klicke in der Menüleiste auf Live und dann auf Neue Umgebung erstellen.

    Website-Informationsseite mit dem Standort des Rechenzentrums und dem Website-Namen.
    WordPress-Staging-Umgebung

  2. Wähle Standardumgebung und klicke auf Weiter.
  3. Klicke auf Vorhandene Umgebung klonen, gib einen Umgebungsnamen ein, wähle Live als zu klonende Umgebung und klicke auf Weiter.
  4. Nach der Bereitstellung findest du die WordPress-Staging-Umgebung im Live-Menü.

    Site Information page showing the Live menu with Live, Staging, and Create New Environment items
    Erfolgreiche Erstellung einer Staging-Umgebung.

WordPress mit Astro integrieren

Es gibt zwei Hauptmethoden für die Integration von WordPress mit Astro: eine REST-API und GraphQL. Dieser Leitfaden verwendet den GraphQL-Ansatz.

Um WordPress mit Astro zu integrieren, musst du:

  • WPGraphQL installieren.
  • Astro mit WordPress verbinden.

WPGraphQL installieren

Installiere zunächst das WPGraphQL-Plugin auf deiner WordPress-Website, bevor du Astro über GraphQL mit ihr verbindest.

  1. Wähle auf dem MyKinsta-Dashboard deine WordPress-Website aus.
  2. Klicke in der Menüleiste auf Staging und dann auf Open WP Admin in der oberen rechten Ecke.

    Website-Informationsseite mit dem Staging-Menü und den Schaltflächen Push-Umgebung, WP Admin öffnen und Website besuchen
    Website-Informationsseite

  3. Gib die Anmeldedaten ein, die du bei der Erstellung deiner WordPress-Website verwendet hast.
  4. Klicke auf das Menü Plugins in der linken Navigationsleiste.
  5. Klicke auf Neues Plugin hinzufügen, um das WPGraphQL-Plugin hinzuzufügen.
  6. Suche nach „WPGraphQL“, klicke auf Neu installieren, um das WPGraphQL-Plugin zu installieren, und dann auf Aktivieren.

    Die Seite "Plugins hinzufügen" zeigt das WPGraphQL-Plugin und andere mit einer Schaltfläche "Neu installieren" daneben an.
    Installation des WPGraphQL-Plugins

  7. Um zu testen, ob das installierte WPGraphQL-Plugin wie erwartet funktioniert, öffne das GraphQL-Menü in der Navigationsleiste und klicke auf GraphiQL IDE.
  8. Verwende den folgenden Code in der GraphiQL IDE und klicke oben links auf Ausführen , um die GraphQL-Abfrage auszuführen: 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    Diese GraphQL-Abfrage ruft effizient die slugs, excerpts und titles der Beiträge von der WordPress-Website ab.

    GraphQL-Seite mit dem GraphQL-Abfragecode und einem Ausführen-Button oben
    Ausführen der GraphQL-Abfrage

    Auf der linken Seite der GraphiQL-IDE siehst du die Liste der Beiträge, die durch das Ausführen der GraphQL-Abfrage zurückgegeben werden. Dein WordPress GraphQL-Endpunkt ist unter https://your_wordpress_staging_url/graphql erreichbar.

Astro mit WordPress verbinden

Um Astro mit WordPress zu verbinden, befolge diese Anweisungen:

  1. Erstelle im src-Ordner deines Astro-Projekts einen Ordner namens graphql.
  2. Erstelle eine wordPressQuery.ts-Datei im Ordner graphql.
  3. Verwende den folgenden Code in deiner wordPressQuery.ts-Datei. Ersetze https://your_wordpress_staging_url/graphql durch deine WordPress-Staging-URL. 
    interface gqlParams {
    query: String;
    variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
    const res = await fetch('https://your_wordpress_staging_url/graphql', {
        method: "post",
        headers: {
            "Content-Type": "application/json",

        },

        body: JSON.stringify({
            query,
            variables,
        }),
    });

    if (!res.ok) {
        console.error(res);
        return {};
    }

    const { data } = await res.json();
    return data;
}

    Dieser Code definiert eine Schnittstelle gqlParams und eine asynchrone Funktion wpquery, die GraphQL-Abfragen an die WordPress-Website ermöglicht.

Entwickle deine Website mit Astro und WordPress

  1. Um eine neue statische Seite in Astro zu erstellen, erstelle eine Datei namens blog.astro im Verzeichnis src/pages.
  2. Füge den folgenden Code in die neu erstellte Datei ein: 
    ---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";

const data = await wpquery({
	query: `
 	 {
		posts{
			nodes{
				slug
				excerpt
				title
			}
 		 }
	 }  
 	`,
});
---

<Layout title="Astro-WordPress Blog Posts">
	<main>
		<h1><span class="text-gradient">Blog Posts</span></h1>

		{
			data.posts.nodes.map((post: any) => (
				<>
					<h2 set:html={post.title} />
					<p set:html={post.excerpt} />
				</>
			))
		}
	</main>
</Layout>
<style>
	main {
		margin: auto;
		padding: 1rem;
		width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 20px;
		line-height: 1.6;
	}

	h1 {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-bottom: 1em;
	}
</style>

    Dieser Code zeigt, wie die Funktion wpquery verwendet wird, um Daten mit GraphQL von der WordPress-Website zu holen und sie auf der Astro-Website darzustellen.

  3. Verwende npm run dev, um den lokalen Entwicklungsserver zu starten und die neuesten WordPress-Blogbeiträge auf deiner Astro-Seite unter http://localhost:4321/blog zu sehen.

    Astro-Projektseite, die WordPress-Beiträge anzeigt
    Das Astro-Projekt zeigt die WordPress-Beiträge an

Um das dynamische Routing für einzelne Blog-Posts zu handhaben, musst du eine Kombination aus den dynamischen Routen von Astro und den Abfragevariablen von WordPress GraphQL verwenden. Wenn du die Post-ID oder den Slug als Abfragevariable übergibst, kannst du den Seiteninhalt für jeden Blogpost dynamisch generieren. Das ermöglicht ein personalisiertes Nutzererlebnis auf deiner Website.

Stelle deine statische Website auf Kinsta bereit

Pushe deine Codes zu deinem bevorzugten Git-Anbieter(Bitbucket, GitHub oder GitLab). Befolge dann die folgenden Schritte, um deine statische Website auf Kinsta einzurichten:

  1. Klicke im MyKinsta-Dashboard auf Statische Seiten und dann auf Seite hinzufügen.
  2. Autorisiere Kinsta mit deinem Git-Anbieter.
  3. Wähle ein GitHub-Repository und einen Standard-Zweig. Gib einen Anzeigenamen für deine statische Site an und aktiviere das Kontrollkästchen Automatische Bereitstellung bei der Übergabe. Damit werden alle neuen Änderungen am Repository automatisch bereitgestellt. Klicke auf Weiter.
  4. Im Abschnitt Build-Einstellungen füllt Kinsta automatisch alle Felder aus. Lass alles so wie es ist und klicke auf Website erstellen.
  5. Rufe deine Astro-Site auf, indem du die URL aufrufst, die als Domain auf der Übersichtsseite deiner bereitgestellten Site erscheint. Du kannst auf Blogbeiträge über https://your_kinsta_site_url/blog zugreifen.

Zusammenfassung

Es gibt noch mehr Möglichkeiten, die du mit Astro und WordPress nutzen kannst. Die WordPress-API kann genutzt werden, um auf verschiedene Daten deiner Website zuzugreifen und einzigartige Anwendungsfälle mit Astro zu schaffen.

Mit dem gemanagten WordPress-Hosting von Kinsta erhältst du Zugang zu einer robusten Infrastruktur, einem weltweiten CDN, Edge-Caching, mehreren Rechenzentren und Funktionen auf Unternehmensniveau. Dies gewährleistet eine schnelle und sichere Umgebung für deine WordPress-Website.

Wenn du Frontend-Frameworks wie Astro mit Headless WordPress verwendest, kannst du außerdem die statischen Dateien kostenlos auf dem Statische-Seiten-Hosting von Kinsta hosten. Das bedeutet, dass du nur für das WordPress-Hosting bezahlst und so die Effizienz und Kosteneffizienz maximierst.

Was hältst du von Headless WordPress und Astro? Hast du ihr Potenzial für die Erstellung einzigartiger Lösungen erkundet? Teile deine Erfahrungen im Kommentarbereich unten.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).