Rebuild justpm.de

Wie ich meine Website neu aufgesetzt habe

In diesem Blogpost beschreibe ich, wie ich meine Website neu aufgesetzt habe, welche Ansprüche ich hatte und welche Technologien ich genutzt habe, um diese umzusetzen. Mein Ziel war es, kostenloses Hosting, Content Management, einfache Deployments sowie eine On-Demand-Bildgenerierung zu realisieren.

---

Anforderungen

• Kostenloses Hosting
  Um Kosten zu sparen, sollte meine Website kostenlos gehostet werden. Daher habe ich mich für die Verwendung von Static Site Generation entschieden.
• Content Management
  Ich wollte meine Inhalte flexibel und einfach verwalten können.
• Einfache Deployments
  Die Deployments sollten möglichst unkompliziert und schnell erfolgen.
• On-Demand-Bildgenerierung
  Bilder sollten auf Abruf generiert und lokal gespeichert werden, um Performance zu optimieren.

---

Genutzte Technologien

Astro.js

Astro.js ist ein modernes Framework, das speziell für die Erstellung von statischen Webseiten entwickelt wurde. Es kombiniert die Vorteile von Static Site Generation mit der Flexibilität, Frameworks wie React, Vue oder Svelte zu integrieren.

• Warum Astro.js?
  • Es generiert Webseiten als statische Dateien, was perfekt zu meinem Anspruch des kostenlosen Hostings passt.
  • Die Performance der generierten Seiten ist hervorragend.
  • Es ermöglicht eine einfache Integration von Komponenten.
  • Meine Nutzung von Astro.js:
    Ich nutze Astro.js, um meine Seite statisch zu generieren. Die dynamischen Inhalte werden während des Builds über REST-API-Calls von meinem CMS abgeholt.

CMS: Strapi

Strapi ist ein Open-Source-Headless-CMS, das sich leicht anpassen und selbst hosten lässt.

• Warum Strapi?
  • Es bietet eine REST- und GraphQL-Schnittstelle, die ich zur Abholung meines Contents nutze.
  • Die Content-Modelle sind flexibel und unterstützen dynamische Komponenten.
• Setup:
  • Selbstgehostet auf meinem V-Server mit regelmäßigen Backups.
  • Content-Modelle: Seiten, Posts, Navigation und dynamische Komponenten wie Grids und Spalten.
  • Unterstützung für Übersetzungen und Seiteneinstellungen (SEO-Präfix, Favicon).
  • Markdown als Basis für Content.

Deployments: Google Firebase

Google Firebase bietet kostenloses Hosting für statische Webseiten.

• Warum Firebase?
  • Einfache CLI-Befehle für schnelle Deployments.
  • Unterstützung von experimentellen Adaptern in Astro.js.

On-Demand-Bildgenerierung

Ich habe einen eigenen Service geschrieben, um Bilder dynamisch zu generieren und lokal zu speichern.

• Funktionalität:
  • Bilder werden über die REST-Schnittstelle von Strapi abgeholt.
  • Mit Sharp werden die Bilder prozessiert und lokal abgelegt.
• Vorteile:
  • Kein Bedarf an einem externen CDN (kann bei Bedarf vorgeschaltet werden).

---

Zusätzliche Feature

• Optionale filebasierte Caching-Strategie zur Reduzierung von API-Requests.

---

Zusätzliche Technologien

CSS: Tailwind

Tailwind CSS ist ein Utility-First-CSS-Framework, das es ermöglicht, schnell und effizient individuelle Designs zu erstellen.

• Warum Tailwind?
  • Reduziert den Bedarf an benutzerdefinierten CSS-Klassen.
  • Ermöglicht konsistente und responsive Designs mit minimalem Aufwand.

Alpine.js

Alpine.js ist ein leichtgewichtiges Framework für clientseitiges JavaScript.

• Warum Alpine.js?
  • Es ist perfekt für kleinere, interaktive Funktionen geeignet.
  • Keine überflüssige Komplexität wie bei größeren Frameworks (z. B. React oder Vue).
• Einsatz:
  • Für kleinere, dynamische Elemente wie Dropdowns oder Modale Fenster.

---

Fazit

Mit dieser Kombination aus Technologien konnte ich eine Website aufsetzen, die nicht nur meinen Anforderungen entspricht, sondern auch flexibel, performant und kosteneffizient ist. Astro.js und Strapi bilden dabei die Grundlage, während Tailwind CSS und Alpine.js für Design und Interaktivität sorgen. Die On-Demand-Bildgenerierung hebt die Performance noch weiter hervor, ohne dass zusätzliche Kosten für ein CDN anfallen.