{"id":69539,"date":"2024-03-20T09:40:10","date_gmt":"2024-03-20T08:40:10","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69539&preview=true&preview_id=69539"},"modified":"2024-03-22T10:17:54","modified_gmt":"2024-03-22T09:17:54","slug":"wordpress-astro","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-astro\/","title":{"rendered":"Erstelle eine statische Website mit WordPress und Astro"},"content":{"rendered":"

Astro ist ein modernes Frontend-Framework, das es Entwicklern erm\u00f6glicht, schnell und effizient statische Websites<\/a> zu erstellen. Mit Astro<\/a> k\u00f6nnen Entwickler die Leistung moderner JavaScript-Frameworks wie React<\/a>, Vue.js<\/a> und Svelte<\/a> nutzen, um dynamische Benutzeroberfl\u00e4chen zu erstellen und gleichzeitig statische HTML-, CSS- und JavaScript-Dateien w\u00e4hrend des Build-Prozesses zu erzeugen.<\/p>\n

In Verbindung mit WordPress<\/a> als Headless Content Management System<\/a> (CMS) erm\u00f6glicht 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.<\/p>\n

Statische Websites, die mit Astro und einem WordPress-Backend erstellt werden, bieten eine hervorragende Leistung. Sie k\u00f6nnen direkt von einem Content Delivery Network<\/a> (CDN) ausgeliefert werden. Dadurch entf\u00e4llt die serverseitige Verarbeitung, was zu schnelleren Ladezeiten und einem reibungsloseren Nutzererlebnis f\u00fchrt.<\/p>\n

Diese Anleitung f\u00fchrt dich durch den Prozess der Einrichtung einer statischen Website mit Astro, die auf dem Kinsta Statische-Seiten-Hosting<\/a> Dienst gehostet wird, und WordPress als Backend.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Die Rolle von WordPress als Headless CMS<\/h2>\n

Ein Headless CMS<\/a> wie WordPress trennt die Ebenen der Inhaltsverwaltung und der Bereitstellung. Es erm\u00f6glicht dem Backend, die Inhalte zu pflegen, w\u00e4hrend ein anderes System wie Astro das Frontend verwaltet.<\/p>\n

WordPress dient als Inhaltsspeicher und liefert Daten an das Frontend, das die Inhalte \u00fcber eine API f\u00fcr die Nutzer\/innen anzeigt. Diese Architektur erh\u00f6ht die Flexibilit\u00e4t, indem sie es dir erm\u00f6glicht, Inhalte f\u00fcr verschiedene Ausgaben wiederzuverwenden und WordPress-Nutzern ein vertrautes Content-Management-Erlebnis zu bieten.<\/p>\n

Die Entkopplung des Frontends vom Backend bietet au\u00dferdem mehr Flexibilit\u00e4t bei der Gestaltung des Frontends und der Migration von Inhalten. Au\u00dferdem macht die Zug\u00e4nglichkeit \u00fcber APIs die Inhalte zukunftssicher.<\/p>\n

Richte deine Entwicklungsumgebung ein<\/h2>\n

Es gibt drei Schritte, die du befolgen musst, um deine Umgebung einzurichten:<\/p>\n

    \n
  1. Installiere Astro.<\/li>\n
  2. Richte eine WordPress-Website ein.<\/li>\n
  3. Erstelle eine WordPress Staging-Umgebung.<\/li>\n<\/ol>\n

    Voraussetzungen<\/h3>\n

    Um diesem Tutorial folgen zu k\u00f6nnen, musst du folgende Voraussetzungen erf\u00fcllen:<\/p>\n