Ich habe versucht, meine handcodierte Website mit Astro neu zu erstellen - hier ist, was funktioniert hat und was nicht

Nach einer kreativen Pause überarbeite ich meine Website mit Astro, einem vielversprechenden Web-Framework. Dabei entstehen absurde Spiele und nostalgische Musik, die meine Inhalte neu erlebbar machen.

Ich betreibe eine kleine Website auf Neocities, genannt Whistling Nose Games, Music, and Multimedia. letzten Jahr pausierte ich und lernte Webdesign, CSS und JavaScript neu. Dabei entstanden absurde Spiele und Musik mit einem nostalgischen Flair. Eine Überarbeitung steht an. Mein Freund, ein talentierter Designer, empfahl mir Astro für das Redesign. Es hat sich als vielversprechend erwiesen.

Astro ist ein web-framework für statische websites

Hinter den kulissen

Astro, als "Framework für content-basierte Websites" beworben, ist ein JavaScript-Web-Framework. Es unterstützt Nutzer beim Aufbau statischer, contentreicher Seiten, indem es interaktive Elemente vom Inhalt trennt.

Alles, was Sie erstellen—Komponenten, Layouts, Markdown—wird serverseitig in HTML und CSS kompiliert. Ihr Browser führt keinen Code aus. Beeindruckend, was in Echtzeit passiert. Dank eines dateibasierten Routing-Systems generiert es URLs anhand Ihres Dateilayouts und erledigt viel im Hintergrund.

Es punktet mit Funktionen und führt Sie durch den Prozess der Website-Erstellung. Integrationen für KI sind ebenfalls möglich (die Claude CLI-Integration klingt spannend), aber ich habe sie in diesem Projekt nicht getestet.

Nehmen Sie an einem der Astro-Kurse teil, bevor Sie starten. Die Kurse halfen enorm während des Aufbaus meiner Seite.

Testbau für die website-upgrades

Ein einseiten-test zur neuausrichtung

Die Überarbeitung meiner persönlichen Website hat wenig Priorität. Der Besucherzähler funktioniert nicht. Die Startseite wirkt spärlich im Verhältnis zu den vielfältigen Inhalten, die sie bietet.

Zusätzlich habe ich ein virtuelles Museumsprojekt für meine Frau als Jubiläumsgeschenk erstellt und möchte es bis Ende des Monats auf die Seite stellen. Das Projekt ist fertig, als "geheimer Link" hinzugefügt, doch es ist klar, dass mehr Feinschliff nötig ist. Ein Besucher meldete zudem einen Fehler im Code.

Astro soll (hoffentlich) bei der Lösung helfen.

Eine meiner Ideen war, einen humorvollen Listenartikel zu erstellen, den keiner ernst nimmt. Daher ist es mein Ziel, diese spezielle Seite mit Astro zu realisieren und...

Ich teste die Inhalte, bevor ich sie zu Neocities hinzufüge.

Installation in der befehlszeile

Oder nutzen sie die online-version der software

Um Astro auf Linux zu installieren, brauchen Sie Node.js. Prüfen Sie mit node -v und npm -v, ob es installiert ist. Falls nicht, verwenden Sie sudo apt install npm unter Linux Mint Cinnamon. Laden Sie die passende Node.js-Version mit curl herunter.

Installation und das Hinzufügen von Modulen geschieht im Terminal. Nach der Installation legt Astro ein Projektverzeichnis an.

Fügen Sie Abhängigkeiten und Frameworks hinzu, die für Ihr Projekt sinnvoll sind. Ich habe npx astro add alpinjs genutzt, um Alpine.js einzufügen. Ich schätze dieses Framework sehr und setzte es für den Besucherzähler auf meiner Seite ein.

Alternativ gibt es auch eine Browserversion von Astro.

Designplanung vor der nutzung von astro

Vorbereitung für optimale nutzung der app

Der Seiteninhalt ist vorhanden, jetzt kommt das Design. Ich plane, einen Downvote-Button hinzuzufügen; Upvote gibt es nicht – das wäre zu vorhersehbar. Die Ästhetik orientiert sich an den späten 80ern, mit TV-Störungen und weniger gesättigten Farben.

Ich will gedämpfte graue Ränder, einen sanften Sepia-Hintergrund und dezente TV-Störungen. Der Text soll in einem ausgewaschenen Grün gefasst sein. Die Überschriften? Schieferblau oder magenta, passend zum Gesamtthema. Der Fetttext (oder strong in CSS) wird amberfarben sein. Ich plane auch interessante Experimente mit den Überschriften.

Mit Astro kann ich all diese Ideen umsetzen.

Schneller start

Die gesamte webseite in der hälfte der gewohnten zeit erstellt

Astro erzeugt beim Installieren vier Ordner im src-Verzeichnis:

1. Assets
2. Komponenten
3. Layouts
4. Seiten

Der Assets-Ordner enthält Bilder und Schriften. Komponenten sind für wiederverwendbare Elemente wie Buttons oder Navigation gedacht. Layouts und Seiten beinhalten CSS und den eigentlichen Inhalt Ihrer Webseite.

Ich habe meine ursprüngliche Liste im Januar verfasst, sie dann in Markdown umgewandelt und bearbeitet. Die Datei habe ich mit Micro im Terminal als MD-Datei abgespeichert. Astro betrachtet den Dateinamen, nicht den Typ, somit ist kein HTML nötig.

Ich kreierte meine CSS-Elemente im Layouts-Ordner und entwickelte eine einfache JavaScript-Schaltfläche, die sich in ein ASCII-Skelett verwandelt, das ich im ASCII Art Archiv entdeckte. Comicbilder der Charaktere wurden in Graustufen angepasst, um zum Gesamtbild zu passen. Sie landen im Seiten-Ordner, um die Koexistenz mit der Markdown-Datei zu erleichtern; später verschiebe ich sie nach Assets, wenn die Seite finalisiert ist.

Die Bearbeitung ist intuitiv. Änderungen können in Echtzeit betrachtet werden, während Sie die Anpassungen vornehmen.

Ich habe Micro geöffnet, um meine Datei in einem Fenster zu bearbeiten, während ich die Seite im anderen Fenster betrachtet habe. So konnte ich Änderungen effektiv verfolgen und Zeit beim Troubleshooting sparen.

Um Ihren Code zu überprüfen, führen Sie `npm run dev` aus. Nach dem Ausführen wird Ihr Inhalt zusammengestellt, und Sie öffnen eine localhost-Instanz im Browser. Dort sehen Sie die neue Seite und können schnell auf Probleme reagieren. Bei Anpassungen einfach zu den `src`-Dateien zurückkehren, Änderungen in Micro vornehmen und die Browseraktualisierung beobachten.

Die Entwicklung meiner Seite erforderte Zeit, Mühe und präzise Anpassungen. Schließlich hatte ich ein Ergebnis, das bereit für die Veröffentlichung ist.

Einige dinge funktionieren gut in astro, während andere etwas feinschliff benötigen

Es gibt immer raum für verbesserung

Astro überzeugt durch Integration und die Zusammenarbeit der Dokumente zu einer kohärenten Webseite. Auf der anderen Seite kann das Erstellen einer einfachen Seite mit Bildern, Text, CSS und etwas JavaScript händisch unkomplizierter sein.

Astro fühlt sich an wie eine Desktop-First-App. Während ich keine Probleme hatte, es unter Linux Mint zum Laufen zu bringen, gab es Schwierigkeiten mit der Online-Version auf Android. Ein kleiner Haken für mobile Nutzer.

Es ist praktisch, sich nicht mit einem Dokument voller Code herumschlagen zu müssen, während Astro die Arbeit erledigt.

Markdown in voll funktionsfähiges HTML

Ich schreibe gerne in Markdown. Das spart deutlich Zeit im Vergleich zum Hand-Codieren von HTML. Diese Methode ermöglicht schnellere Website-Erstellung, wenn man erst einmal verstehen, wie sie funktioniert.

Astro für anfänger

Astro ist vermutlich nicht für Anfänger gedacht. Mit grundlegenden Kenntnissen in HTML, Markdown und CSS (mein JavaScript ist etwas eingerostet) konnte ich den Hintergrund gut nachvollziehen. Dennoch empfehle ich, einige Tutorials, auch die offiziellen von Astro, zu durchlaufen und Zeit mit der Software zu investieren.

Mein erlebnis mit astro

Die Arbeit mit Astro an meiner aktualisierten Seite hat Spaß gemacht. Es wird Zeit brauchen, um mich damit vertrauter zu fühlen, aber ich kann mir vorstellen, es künftig öfter zu nutzen.

Vielleicht motiviert es mich, meine Website öfter zu aktualisieren oder neue Seiten hinzuzufügen. Das Redesign des Besucherzählers habe ich bisher nicht in Angriff genommen, aber irgendwann ist es soweit.

Zukunft mit astro

Ich habe die Zeit mit Astro genossen und bin gespannt, was ich noch alles damit realisieren kann.

Bist du neugierig auf weitere Artikel wie Ich habe versucht, meine handcodierte Website mit Astro neu zu erstellen - hier ist, was funktioniert hat und was nicht? Entdecke spannende Inhalte in der Kategorie Windows.