---
title: "Tutorial — PageWeave Academy"
---

# PageWeave in 5 Minuten: Seiten, Versionen, Releases

Das mentale Modell, das du brauchst, bevor du den ersten Prompt schreibst.

> Eine Seite ist der Inhalt unter einer URL. Jede Änderung erzeugt eine Version. Eine Umgebung bestimmt, welche Version Besucher sehen. Ein Release friert einen Stand ein. Wer diese vier Begriffe trennt, baut mit Agenten deutlich ruhiger.

PageWeave fühlt sich beim ersten Blick wie ein Website-Builder an. Beim Bauen mit einem Agenten ist es eher ein **Versionssystem mit einer Veröffentlichungsschicht**. Wer das versteht, hört auf, gegen das System zu arbeiten.

Hier ist das mentale Modell in fünf Minuten.

## Die vier Begriffe

| Begriff | Bedeutung | Typische Frage |
| --- | --- | --- |
| Seite | Inhalt unter einer URL, z. B. `/ueber` | „Was steht hier?“ |
| Version | Gespeicherter Stand einer Seite | „Was hat sich geändert?“ |
| Umgebung | Ausgabe der Website für ein Publikum | „Wer sieht das?“ |
| Release | Eingefrorener Stand über viele Seiten | „Was war am Launch-Tag live?“ |

Die Reihenfolge ist wichtig: Eine Seite hat Versionen. Eine Umgebung zeigt Versionen. Ein Release friert Versionen ein.

## Seiten

Eine Seite ist nicht nur HTML. Sie hat:

- einen **Pfad** (`/`, `/tutorials`, `/tutorials/:slug`),
- einen **Titel**,
- optional eine **Sprache**,
- optional eine **Tabelle** für Vorlagen,
- eine **Indexierbarkeit**.

Eine Template-Seite wie `/tutorials/:slug` ist keine einzelne Seite. Sie ist eine Regel: „Für jede Zeile in der Tabelle `tutorials_de` rendere eine Seite unter dieser URL.“ Die Zeile wird im Template zu `row`.

## Versionen

Jede Änderung an einer Seite erzeugt eine neue Version. Nichts wird überschrieben. Du kannst eine alte Version ansehen und wiederherstellen.

Das ist im Alltag wichtig:

- Ein Agent kann einen Entwurf zerstören. Die Version davor bleibt.
- Du kannst einen Satz ändern, ohne den Rest anzufassen.
- Ein Release kann auf eine bestimmte Version zeigen.

> **Tipp:** Behandle Versionen wie Commits. Eine Änderung, ein klarer Grund. „Update“ ist keine Beschreibung.

## Umgebungen

Eine Website hat mindestens zwei Umgebungen:

- **live** – die öffentliche Website.
- **dev** – die Testumgebung mit eigener URL, Live-Reload und optionalem Feedback-Widget.

Auf `dev` siehst du Entwürfe, die auf `live` noch nicht erscheinen. Das ist der Ort, an dem du mit einem Agenten arbeitest.

Wichtig: Eine Änderung auf `dev` ist nicht automatisch auf `live`. Veröffentlichen ist ein eigener Schritt.

## Releases

Ein Release ist ein unveränderlicher Schnappschuss. Es hält fest, welche Seiten, Snippets, Komponenten und welches Theme zu einem Zeitpunkt galten.

Du brauchst Releases nicht für jede Textkorrektur. Du brauchst sie für:

- den Launch,
- eine Kampagne,
- einen größeren Umbau,
- einen Stand, zu dem du zurückkehren willst.

Ein Release kann an eine Umgebung angehängt werden. Wenn etwas schiefgeht, hängst du das vorherige Release wieder an – statt zwanzig Änderungen rückwärts zu reparieren.

## Komponenten, Snippets, Tabellen

Drei Bausteine, die immer wieder auftauchen:

**Komponenten** sind Header, Footer und `<head>`-Ergänzungen. Sie gelten für viele Seiten. Ein Header ist keine Section, die du auf jeder Seite neu baust.

**Snippets** sind Textdateien unter `/snippets/...`: CSS, JavaScript, JSON, SVG. Du referenzierst sie in Seiten oder im `<head>`.

**Tabellen** sind strukturierte Daten: Tutorials, Kurse, Team-Mitglieder, Öffnungszeiten. Veröffentlichte Zeilen sind öffentlich lesbar. Keine internen Notizen, keine Passwörter, keine Entwürfe in Tabellenfeldern, die niemand sehen soll.

> **Achtung:** Tabellen sind kein privater Speicher. Wenn eine Zeile veröffentlicht ist, kann sie über die Tabellen-URL gelesen werden. Interne Notizen gehören in dein Repository, nicht in eine Tabellenspalte.

## Der Ablauf beim Bauen mit einem Agenten

1. **Dev-Umgebung öffnen.** Dort passiert die Arbeit.
2. **Seite oder Template anlegen.** Der Agent nutzt dieselben Werkzeuge wie du.
3. **Vorschau prüfen.** Bei 375, 768 und 1440 px.
4. **Veröffentlichen.** Die Seite wird live.
5. **Release erstellen**, wenn der Stand wichtig ist.

Der Agent sieht dieselben Versionen und Umgebungen. Er kann eine Seite ändern, aber er kann nicht „heimlich“ live gehen, ohne dass du es merkst – vorausgesetzt, du prüfst die Vorschau.

## Was du dir merken musst

- Eine Seite ist Inhalt. Eine Version ist ein Stand. Eine Umgebung ist Publikum. Ein Release ist ein Schnappschuss.
- `dev` ist dein Arbeitsort. `live` ist dein Ergebnis.
- Veröffentlichen ist ein Schritt, kein Nebeneffekt.
- Tabellen sind öffentlich. Behandle sie so.
- Komponenten sind für Wiederholung. Kopiere keinen Header.

## Weiterlesen

- [Deine erste Website mit einem KI-Agenten](/tutorials/erste-website-mit-agent)
- [Responsive QA: 375, 768, 1440](/tutorials/responsive-qa)
- [Figma zu PageWeave: Vom Screendesign zur Website](/tutorials/figma-zu-pageweave)