Englisch

2022-12-29

Warum wir von Wordpress auf Astro umgestiegen sind und wie du das auch kannst

Wenn du die Einschränkungen und die Unflexibilität von Wordpress oder anderen CMS Frameworks satt hast, ist es vielleicht an der Zeit, zu Astro zu wechseln. Als modernes Web-Framework, das auf Einfachheit und Leistung ausgelegt ist, bietet Astro eine flexiblere und anpassungsfähigere Entwicklungserfahrung und gibt dir die Freiheit, genau die Website zu erstellen, die du willst, ohne von den Einschränkungen eines CMS eingeschränkt zu werden.

In diesem Blog-Beitrag führen wir dich durch die Schritte für den Umstieg und zeigen dir, wie toll und einfach es ist, mit Astro zu entwickeln.

Astro-Components

Eines der Dinge, die Astro zu einem so großartigen Web-Framework machen, sind Astro-Components. Mit Astro-Components kannst du ganz einfach dynamische und flexible Komponenten für deine Website erstellen.

Einer der Hauptvorteile der Astro-Components ist, dass sie mit benutzerdefinierten Parametern leicht wiederverwendet werden können. Du könntest zum Beispiel eine Komponente für einen Blogbeitrag haben, die den Titel, den Auszug und das Datum eines Blogbeitrags anzeigt. Mit Astro-Components kannst du diese Komponente ganz einfach für mehrere Blogbeiträge wiederverwenden, indem du für jeden Beitrag andere Parameter angibst. So kannst du bei der Erstellung deiner Website viel Zeit und Mühe sparen.

So ist Beispielsweise unsere Blogpost Seite (blog.astro) aufgebaut:

---
import BlogPostRow from "../components/BlogPostRow.astro";
import PicobaLayout from "../layouts/PicobaLayout.astro";
import "../styles/pages/blog.scss";
const allPosts = await Astro.glob("./blogs/*.md");
---

<PicobaLayout title="Blog | Picoba Solutions">
   {
     allPosts
       .filter((x) => x.frontmatter.visible)
       .sort((a, b) => {
         const aDate = new Date(a.frontmatter.pubDate).getTime();
         const bDate = new Date(b.frontmatter.pubDate).getTime();
         return bDate - aDate;
       })
       .map((post) => (
         <>
           <BlogPostRow
             title={post.frontmatter.title}
             short={post.frontmatter.description}
             date={post.frontmatter.pubDate.slice(0, 10)}
             name={post.frontmatter.author}
             url={post.url}
             avatarurl={post.frontmatter.avatarimage.url}
             imagepreview={post.frontmatter.imagepreview.url}
           />
         </>
       ))
   }
</PicobaLayout>

Ähnlich sind bei uns die Projektansichten und die Teams Seite aufgebaut. Eventuell ist dir im Beispielcode aufgefallen, dass unsere Blogposts aus .md Dateien generiert werden. Mit Astro hast du also die Möglichkeit .md Dateien automatisch zu .html konvertieren zu lassen.

Beispiel MD-Datei:

---
layout: ../../layouts/PostLayout.astro
title: Warum wir von Wordpress auf Astro umgestiegen sind und wie du das auch kannst
author: Vincenzo Gibilmanno
description: ""
imagepreview: 
  url: "/images/blog/fulllightastro.svg"
  alt: "Astro"
avatarimage: 
  url: "/images/avatars/vg.jpg"
  alt: "Vincenzo Gibilmanno"
pubDate: 2022-12-29
visible: true
---

Mein Markdown

Community

Astro bietet nicht nur flexible Komponenten, sondern auch eine große und aktive Community von Entwicklern. Das bedeutet, dass du eine Fülle von Ressourcen findest, darunter Tutorials, Dokumentationen und Support, die dir helfen, das Beste aus Astro herauszuholen. Egal, ob du gerade erst mit Astro anfängst oder ein erfahrener Entwickler bist, es gibt immer jemanden, der dir helfen kann.

Zusammenfassend lässt sich sagen, dass Astro-Components eine wichtige Funktion sind, mit der du dynamische und flexible Websites erstellen kannst. Mit der Möglichkeit, Komponenten mit benutzerdefinierten Parametern wiederzuverwenden, und der Unterstützung durch eine große Gemeinschaft von Entwicklern ist Astro eine gute Wahl für jeden, der eine Website erstellen möchte.

Wie kannst du also deine Wordpress-Website auf Astro umstellen?

Hier sind die Schritte, die du befolgen musst:

1. Exportiere deinen Wordpress-Inhalt: Das ist ganz einfach durch das Plugin Simply Static möglich. https://wordpress.org/plugins/simply-static/. Durch dieses Plugin wird die komplette Wordpress Instanz zu statischem html konvertiert. Du erhältst dadurch also ein Zip, welches html, javascript und css Dateien enthält.
2. Richte deine Astro-Entwicklungsumgebung ein: Als Nächstes musst du deine Astro-Entwicklungsumgebung einrichten. Dazu installierst du das Astro-Framework auf deinem Computer und richtest einen lokalen Entwicklungsserver ein. Eine ausführliche Anleitung zur Einrichtung von Astro findest du auf der offiziellen Astro-Dokumentations-Website.
3. Erstelle ein neues Astro-Projekt: Sobald du deine Entwicklungsumgebung eingerichtet hast, kannst du ein neues Astro-Projekt erstellen, indem du den Befehl astro new in deinem Terminal ausführst. Dadurch wird ein neues Verzeichnis mit allen notwendigen Dateien und Verzeichnissen für dein Astro-Projekt erstellt.
4. Importiere deine Wordpress-Inhalte: Hierfür musst du die .html Dateien in dein Astro Projekt im Ordner pages kopieren. Bestenfalls konvertierst du deine .html zu .astro Dateien. Erst damit lassen sich die Astro Funktionen nutzen.
5. Gestalte deine Astro-Components: Jetzt, wo deine Inhalte importiert sind, kannst du deine Astro-Components entwerfen. Weitere Informationen über Astro-Components und deren Verwendung findest du in der Astro-Dokumentation.
6. Teste und richte deine Website ein: Sobald du deine Komponenten eingerichtet hast, kannst du deine Website testen, indem du den Befehl astro serve ausführst und die angegebene URL in deinem Terminal aufrufst. Wenn alles gut aussieht, kannst du deine Website mit dem Befehl astro deploy bereitstellen oder durch astro build zu statischem html, javascript und css bauen lassen.

Projekt-Hierarchie:

Fazit

Die Umstellung deiner Website von Wordpress auf Astro ist ein unkomplizierter Prozess, der in nur wenigen Schritten erledigt werden kann. Natürlich funktioniert das ganze nur dann so schnell, wenn du nicht zu abhängig von Plugins auf Wordpress bist. Und wenn du erst einmal auf Astro umgestiegen bist, kannst du die vielen Vorteile wie die Einfachheit und die Leistung des Frameworks nutzen.

Als jemand, der den Wechsel selbst vollzogen hat, können wir dir aus erster Hand sagen, dass es eine fantastische Entscheidung war. Wir sind mit unserer Entscheidung, unsere Website picoba.de von Wordpress auf Astro umzustellen, sehr zufrieden. Wenn du mit dem Gedanken spielst, umzusteigen, empfehlen wir dir, Astro auszuprobieren. Wir denken, du wirst genauso wie wir feststellen, dass Astro eine fantastische Wahl für Entwickler ist.