Aufbau unserer Engineering-Website mit Astro 5
Ein Blick hinter die Kulissen, wie wir die Website von Godfrey Engineering mit Astro 5, Content Collections und Cloudflare Pages entwickelt haben.
Warum Astro?
Bei der Entwicklung der Marketing-Website von Godfrey Engineering haben wir mehrere Frameworks bewertet. Astro stach hervor durch seinen inhaltsorientierten Ansatz, die JavaScript-frei-als-Standard-Philosophie und die erstklassige Unterstützung für Content Collections mit typensicheren Schemas.
Content Collections
Astros Content Collections ermöglichen es uns, strenge Schemas für unsere Blog-Posts und Case Studies mit Zod zu definieren. Jedes Feld wird zur Build-Zeit validiert – wenn ein Frontmatter-Feld fehlt oder fehlerhaft ist, schlägt der Build mit einer klaren Fehlermeldung fehl. Keine stillen Fehler mehr durch Tippfehler in YAML.
const blogSchema = z.object({
title: z.string().min(1).max(100),
description: z.string().min(10).max(300),
publishDate: z.coerce.date(),
// ... weitere Felder
});Mehrsprachige Unterstützung
Bei 7 unterstützten Gebietsschemas organisieren wir Inhalte nach Gebietsschema-Verzeichnis. Jeder Post hat einen translationKey, der ihn mit seinen Entsprechungen in anderen Sprachen verlinkt. Der Sprachumschalter im Header findet den entsprechenden Post automatisch.
Was kommt als Nächstes
In kommenden Beiträgen gehen wir in die Tiefe unseres GSAP-Animationssystems, die Three.js-Integration für den Hero-Bereich und wie wir Kontaktformular-Übermittlungen mit Cloudflare Workers und Resend handhaben.
Bleiben Sie dran.