Von Philipps Tastatur in deinen Browser.

Hier steht offen, womit seitenschwung.com gebaut ist, wie eine Änderung online geht und wo die Seite wohnt. Die Fachbegriffe stehen jeweils klein darunter, falls du sie nachschlagen willst.

Der Weg einer Änderung

  1. Philipp

    Schreiben

    Jede Änderung landet als nachvollziehbarer Schritt im Archiv. Am laufenden Server wird nichts von Hand gebastelt.

    Git, GitHub

  2. automatisch

    Prüfen

    Ein Testroboter startet die Seite, klickt sie auf Desktop und Handy durch und misst nach.

    GitHub Actions, Playwright, axe, Lighthouse

  3. automatisch

    Verpacken

    Genau die geprüfte Fassung wird als fertiges Paket abgelegt. Online geht später nur dieses Paket.

    Docker, nginx, GitHub Container Registry

  4. automatisch

    Ausliefern

    Durch einen verschlüsselten Tunnel geht das Paket an unseren Server. Der Server braucht dafür keinen offenen Zugang.

    Tailscale, Coolify

  5. für dich

    Online

    Die Seite läuft in einem Rechenzentrum in Nürnberg und kommt verschlüsselt bei dir an.

    Hetzner, Let’s Encrypt, HTTP/3

Und wenn es online doch hakt?

Vor jeder Auslieferung merkt sich die Pipeline, welche Version gerade läuft. Antwortet die neue danach nicht sauber, holt sie die alte automatisch zurück.

  1. Fassung A läuft.Die Pipeline notiert sich ihre Version.
  2. Fassung B antwortet nicht.Der Gesundheitscheck nach dem Start schlägt fehl.
  3. Fassung A ist zurück.Automatisch, ohne dass jemand eingreifen muss.

Woraus die Seite selbst besteht.

Bausteine
HTML, CSS und etwas JavaScript. Kein Framework, kein Baukasten, keine Plugins.
Schriften
Zodiak und Rethink Sans liegen auf unserem eigenen Server, zusammen 60 KB. Dein Browser fragt dafür nicht bei Google an.
Bilder
Echte Screenshots der Kundenseiten, als WebP verkleinert.
Bewegung
Die Blätter im Einstieg zeichnet ein Canvas, Bild für Bild. Wer im System weniger Bewegung eingestellt hat, sieht sie ruhig.
Tracking
Keins. Keine Cookies, keine Analyse-Werkzeuge, darum auch kein Cookie-Banner.
Verbindung
Verschlüsselt mit einem Zertifikat von Let’s Encrypt, auch über HTTP/3.
Server
Hetzner, Rechenzentrum Nürnberg. Die Seite liegt in Deutschland.
Schutz
CrowdSec erkennt auffällige Zugriffe und sperrt sie. Server-Logfiles werden nach 14 Tagen gelöscht.

Für andere Projekte: das passende Werkzeug.

Diese Seite braucht kein Framework. Andere Projekte schon. Das liegt bei uns im Werkzeugkasten, und wir wählen nach der Aufgabe, nicht umgekehrt.

  • HTML, CSS, JavaScript

    Für Visitenkarten, Portfolios und Seiten, die vor allem schnell laden sollen. So ist auch diese Seite gebaut.

  • Astro

    Für Seiten mit vielen Unterseiten und Texten, die trotzdem schlank und schnell bleiben sollen.

  • Vue

    Für Seiten mit interaktiven Teilen wie Filtern, Konfiguratoren oder Buchungsstrecken.

  • Nuxt

    Für Vue-Projekte, die auf dem Server vorbereitet werden und gut auffindbar sein sollen.

  • React

    Für Oberflächen mit viel Bewegung im Inhalt, etwa Dashboards oder Kundenportale.

  • Next.js

    Für React-Projekte, die schnell laden und von Suchmaschinen gefunden werden sollen.

  • Angular

    Für größere Anwendungen mit Anmeldung, vielen Formularen und Ansichten, etwa für Hochschulen und Unternehmen.

  • SvelteKit

    Für kleine, sehr schnelle Anwendungen mit wenig Ballast.

  • TypeScript

    Für größere Codebasen: Viele Fehler fallen schon beim Schreiben auf, nicht erst bei deinen Besuchern.

  • Tailwind CSS

    Für Gestaltungssysteme, die über viele Seiten hinweg einheitlich bleiben sollen.

Fragen zur Technik? Philipp erklärt’s gern.

info@seitenschwung.com