Dokumentation

Erste Schritte – deine Website in 10 Minuten

Diese Anleitung setzt keinerlei Vorkenntnisse voraus. Folge einfach den Schritten der Reihe nach.

Schritt 1: Konto anlegen (2 Min.)

1. Öffne sitepulscms.com/signup und registriere dich mit E-Mail oder Google.
2. Wähle deine Wunsch-Subdomain (z. B. meine-firma). Deine Website ist danach sofort unter meine-firma.mysitepuls.com erreichbar – mit Beispiel-Inhalt.
3. Du landest automatisch im Admin-Bereich (meine-firma.mysitepuls.com/admin). Diesen Link kannst du dir als Lesezeichen speichern.

Schritt 2: Design festlegen (3 Min.)

1. Klicke links im Menü auf AI Studio.
2. Entweder: beschreibe deine Website in 1–2 Sätzen („Friseursalon in Graz, warm, mit Preisliste und Terminbuchung") und klicke Theme generieren.
3. Oder: Tab Design importieren – Figma-Link, PDF oder Screenshots deines Wunschdesigns hochladen (Details: Design-Import).
4. Du siehst den Fortschritt live in 5 Schritten. Nach 2–5 Minuten liegt das Theme unter Themes als Entwurf bereit.
5. Dort auf Ansehen klicken (Vorschau mit echten Beispiel-Inhalten) und dann Live schalten. Die Frage „auch Inhalte übernehmen?" mit OK bestätigen – dann ist auch deine Startseite direkt gefüllt.

Schritt 3: Inhalte anpassen (5 Min.)

1. Menü Seiten → Startseite → der Builder öffnet sich.
2. Text ändern: Abschnitt in der Vorschau anklicken → rechts erscheinen alle Felder → einfach tippen, die Vorschau aktualisiert sofort.
3. Bild tauschen: Bild-Feld rechts anklicken → aus der Mediathek wählen oder neu hochladen.
4. Abschnitt hinzufügen: zwischen zwei Abschnitten auf das + klicken und einen Block auswählen.
5. Oben Speichern und dann Veröffentlichen klicken. Öffne deine Seite unter meine-firma.mysitepuls.com – live! 🎉

Design-Import (Figma, PDF, Screenshots)

Der Design-Import baut ein vorhandenes Design als echte, bearbeitbare Website nach. Er läuft in 5 sichtbaren Schritten: Layout analysieren → Blöcke strukturieren → Stil & Farben ermitteln → Design umsetzen → Selbstkontrolle gegen die Vorlage.

Variante A: Figma (empfohlen – exaktester Nachbau)

1. Einmalig: In Figma unter Settings → Security → Personal access tokens ein Token erstellen (Leserechte genügen) und im AI Studio im Import-Tab speichern.
2. In Figma deinen Frame auswählen → Strg+L (kopiert den Link) – oder Rechtsklick → „Copy/Paste as" → „Copy link to selection".
3. Link im AI Studio einfügen → Importieren. Farben, Schriften, Abstände und Texte werden exakt aus der Figma-Datei übernommen, echte Bilder landen automatisch in deiner Mediathek.

Variante B: PDF oder Screenshots

1. Design als PDF exportieren oder Screenshots machen (mehrere möglich, z. B. pro Abschnitt – bis zu 6 Dateien).
2. Im Import-Tab in die Upload-Fläche ziehen. Bilder werden automatisch passend verkleinert – auch sehr hohe Screenshots sind okay.
3. Aus Design generieren klicken und dem Fortschritt zusehen.

Ergebnis in beiden Fällen: ein Theme mit echten Blöcken – jeder Text und jedes Bild bleibt im Builder editierbar, wiederholte Elemente (Karten, Logos, Preise) sind echte Listen zum Ergänzen/Entfernen. Feinschliff danach per Theme-Agent: Block in der Theme-Vorschau anklicken und z. B. schreiben „Mach die Buttons eckig".

Themes & Kampagnen (z. B. Black Friday)

Ein Theme ist ein kompletter Website-Zustand: Styling, Blöcke, Inhalte, Bilder und Navigation. Damit bereitest du Aktionen vor, ohne die Live-Seite anzufassen:

1. Themes → bei deinem Live-Theme auf Duplizieren klicken.
2. Die Kopie über das Stift-Symbol umbenennen, z. B. „Black Friday 2026".
3. Optional Inhalt von Website klicken – zieht den aktuellen Stand deiner Startseite in das Theme (frischer Snapshot).
4. Ansehen → in der Vorschau per Klick auf Blöcke + Theme-Agent alles für die Aktion anpassen (Banner, Preise, Farben …). Die Live-Seite bleibt unberührt.
5. Am Aktionstag: Live schalten → Frage mit OK bestätigen („komplett übernehmen") – Design und Inhalte wechseln mit einem Klick.
6. Nach der Aktion beim vorherigen Theme wieder Live schalten – alles ist zurück.

Der Builder

Drei Bereiche, ein Prinzip: links die Struktur deiner Seite (Header, Abschnitte, Footer – inklusive verschachtelter Elemente), in der Mitte die Live-Vorschau im Browser-Rahmen, rechts die Konfiguration des ausgewählten Elements.

• Verschieben: Abschnitte mit gedrückter Maustaste ziehen – im Baum oder direkt in der Vorschau.
• Einfügen: Plus-Punkte erscheinen beim Hover zwischen Abschnitten (Baum und Vorschau).
• Drill-in: Listeneinträge (z. B. einzelne Features) rechts anklicken → Detailansicht, zurück mit ←.
• Sprachen: oben umschalten; leere Sprachen übernehmen den Inhalt automatisch als Kopie.
• Header & Footer sind global: einmal ändern, gilt auf allen Seiten.

Blöcke & Templates

Ein Block besteht aus Feldern (was Redakteure ausfüllen) und einem HTML-Template (wie es aussieht). Eigene Blöcke erstellst du unter Blöcke → Neuer Block – mit Live-Vorschau beim Bearbeiten.

<section class="sp-section">
  <div class="sp-container">
    <h2 class="sp-h2">{{titel}}</h2>
    {{#if untertitel}}<p class="sp-muted">{{untertitel}}</p>{{/if}}
    {{#each punkte}}<li>{{text}}</li>{{/each}}
  </div>
</section>

Templates (Menüpunkt Templates) sind vordefinierte Block-Zusammenstellungen für neue Seiten.

Sprachen & URLs

Inhalte, Slugs und Navigations-Beschriftungen werden pro Sprache gepflegt. Das URL-Muster ist /{sprache}/{slug}; die Standardsprache kann optional ohne Präfix ausgeliefert werden.

Beim Veröffentlichen werden Sprachen ohne Inhalt automatisch aus der Standardsprache befüllt – die Seite ist immer in allen Sprachen live.

Ordner

Seiten lassen sich in Ordner mit eigenem (übersetzbarem) Slug organisieren. Ein Ordner „Rechtliches" (rechtliches, EN: legal) mit der Seite „Datenschutz" ergibt automatisch:

/de/rechtliches/datenschutz
/en/legal/privacy

Apps entwickeln

Eine sitepuls-App ist ein npm-Paket mit einem "sitepuls"-Feld in der package.json. Nach npm install wird sie automatisch erkannt – keine Kommandos, kein Build-Schritt.

{
  "name": "sitepuls-plugin-meine-app",
  "version": "1.0.0",
  "type": "module",
  "sitepuls": {
    "displayName": "Meine App",
    "icon": "zap",
    "description": "Was die App kann.",
    "server": "server.js",
    "blocks": [{ "slug": "…", "name": "…", "fields": […], "template": "…" }]
  }
}

Server-Controller

Apps können eigene API-Endpoints registrieren – z. B. für Formulare. Die Datei aus "server" exportiert eine Funktion und bekommt alles Nötige übergeben. Wichtig: db ist automatisch tenant-aware – jede Website hat ihre eigenen Daten.

// server.js
export default function register({ router, db, uid, now }) {
  router.post('/meine-app/aktion', (req, res) => {
    db.prepare('CREATE TABLE IF NOT EXISTS app_meine_daten (…)').run();
    // …
    res.json({ ok: true });
  });
}

Der Endpoint ist dann unter /api/apps/meine-app/aktion erreichbar. Für geschützte Admin-Endpoints steht requireAuth bereit. Beispiel in echt: die Newsletter-App (sitepuls-plugin-newsletter) speichert Anmeldungen pro Website.

Eigene Admin-Oberfläche (wie Shopify-Apps)

Apps können im Manifest einen "admin"-Abschnitt deklarieren – sitepuls rendert daraus eine native Backend-Seite mit Statistik-Karten und Datentabellen (inkl. CSV-Export und Zeilen-Aktionen). Kein eigenes Frontend nötig.

"admin": {
  "label": "Newsletter",
  "views": [
    { "type": "stats", "source": "/newsletter/stats",
      "items": [{ "key": "subscribers", "label": "Abonnenten", "icon": "users" }] },
    { "type": "table", "title": "Abonnenten",
      "source": "/newsletter/subscribers",
      "columns": [
        { "key": "email", "label": "E-Mail" },
        { "key": "created_at", "label": "Angemeldet am", "format": "datetime" }
      ],
      "export": true,
      "rowActions": [{ "icon": "trash", "label": "Austragen",
        "method": "DELETE", "path": "/newsletter/subscribers/:id",
        "confirm": "Wirklich austragen?" }] }
  ]
}

source und path zeigen auf die Endpoints deines Server-Controllers. Die App erscheint im App Store mit einem „Öffnen"-Button.

Eigene Events

Apps können eigene Event-Typen deklarieren und feuern – sie erscheinen automatisch in der Auswahl von Webhooks und Automationen:

// package.json → "sitepuls"
"events": ["newsletter.subscribed"]

// server.js – emitEvent wird übergeben
export default function register({ router, db, emitEvent }) {
  router.post('/newsletter/subscribe', (req, res) => {
    // …speichern…
    emitEvent('newsletter.subscribed', { email });
    res.json({ ok: true });
  });
}

CLI installieren

Die sitepuls CLI ist ein Node-Kommandozeilentool (Node 20+ erforderlich). Installiere sie global direkt von deiner Plattform:

# Global installieren (Node 20+)
npm install -g https://sitepulscms.com/downloads/sitepuls-cli.tgz

# Prüfen
sitepuls
# → zeigt alle verfügbaren Befehle

⬇ sitepuls-cli.tgz herunterladen — alternativ lokal installieren: npm install -g ./sitepuls-cli.tgz

App-CLI: Apps veröffentlichen

Mit der sitepuls CLI (Installation) entwickelst und veröffentlichst du Apps auf die Plattform. Veröffentlichte Apps bekommen eine eigene App-Seite unter {app-slug}.apps.mysitepuls.com (mit deinem Logo) und erscheinen automatisch im App Store aller Websites.

Ops-Key (für login): Den findest du auf deinem Server in /etc/sitepuls.env als SITEPULS_OPS_KEY. Er berechtigt zum Veröffentlichen von Apps auf die gesamte Plattform.

# Einmalig anmelden (Ops-Key deiner Plattform)
sitepuls login --url https://sitepulscms.com --key <OPS_KEY>

# Neue App aus Vorlage – mit Manifest, Server-Controller und public/logo.svg
sitepuls init meine-app
cd meine-app

# Paketieren & veröffentlichen (npm pack unter der Haube)
sitepuls publish
✓ Veröffentlicht: Meine App v1.0.0
#   App-Seite:  https://meine-app.apps.mysitepuls.com
#   Erscheint sofort im App Store aller Kunden

sitepuls list          # Übersicht
sitepuls unpublish meine-app

• Logo: public/logo.svg (oder PNG) – wird im App Store und auf der App-Seite angezeigt; Pfad im Manifest unter "logo".
• Sofort aktiv: Nach dem Push werden Blöcke und Server-Controller bei allen laufenden Websites registriert – ohne Neustart.

Theme-CLI: Themes lokal entwickeln

Themes sind Ordner aus Styling und eigenen Blöcken – Blöcke müssen also nicht aus Apps kommen, sondern können direkt im Theme definiert werden:

mein-theme/
  theme.json        # Name, Farben, Fonts (Google-Fonts-Import)
  theme.css         # komplettes Theme-Stylesheet
  blocks/
    speisekarte.json  # Felder + Demo-Werte des Blocks
    speisekarte.html  # Template (eigene Datei fürs Syntax-Highlighting)

Die CLI zuerst installieren. Die Anmeldung läuft über den Browser – kein Token kopieren, kein Ops-Key:

sitepuls theme init mein-theme
cd mein-theme

# Anmelden wie bei Shopify: Code erscheint im Terminal, der Browser öffnet
# sich – dort einloggen, Website auswählen, fertig. Die CLI ist verbunden.
sitepuls theme connect

# Lokale Vorschau: rendert deine ECHTEN Live-Seiten mit dem lokalen Theme,
# inkl. Auto-Reload bei jeder Änderung. /__demo zeigt die Theme-Blöcke.
sitepuls theme dev

# Als Entwurf in die Theme-Bibliothek hochladen.
# Ist das Theme gerade live, gehen Änderungen SOFORT auf die Website.
sitepuls theme push

# Bestehendes Theme (auch AI-generierte) als Dateien exportieren
sitepuls theme pull <theme-id>

• Ohne CLI: Ein Theme-Ordner lässt sich auch als ZIP direkt im Admin hochladen (Themes → „Theme hochladen").
• Theme-Blöcke erscheinen im Builder unter der Kategorie „Theme"; Core-Blöcke sind vor Überschreiben geschützt.
• Umbenennen, duplizieren, Vorschau mit Demo-Inhalten und Live schalten – alles in der Theme-Bibliothek (Admin → Themes).

AI Theme Creator (Addon)

Mit dem Addon beschreibst du dein Wunschdesign in einem Satz – sitepuls generiert Farbwelt und maßgeschneiderte Blöcke, ohne dass du eine Zeile Code schreibst. Zu finden unter AI Studio im Admin. Generierte Blöcke landen in der Kategorie „AI" und sind sofort im Builder nutzbar.

Headless Content-API

Alle Inhalte per REST – für eigene Frontends (Next.js, Astro, Apps …). Token unter Einstellungen → API-Tokens erstellen.

# Alle veröffentlichten Seiten
curl https://deine-site.mysitepuls.com/api/v1/pages \
  -H "Authorization: Bearer sp_…"

# Eine Seite mit Block-Baum (pro Sprache)
curl "https://deine-site.mysitepuls.com/api/v1/pages/home?lang=de" \
  -H "Authorization: Bearer sp_…"

Antwort: { title, slug, seo, blocks: [{ block: "hero", values: {…} }, …] } – du renderst die Blöcke in deinem Frontend mit eigenen Komponenten.

Visual-Editor-Bridge

Damit Redakteure auch mit Headless-Frontend den visuellen Builder nutzen können, gibt es die Bridge: Der Builder lädt dein Frontend als Vorschau und schickt ihm ungespeicherte Änderungen live per postMessage.

1. Bridge einbinden

<script src="https://deine-site.mysitepuls.com/bridge.js"></script>

2. Auf Updates reagieren

window.sitepuls.on(function (data) {
  // data.blocks = aktueller Draft-Blockbaum, data.lang, data.page
  renderPage(data.blocks);
});

3. Preview-URL hinterlegen

Im Admin unter Einstellungen → Headless / Visual Editor die URL deines Frontends eintragen. Im Builder erscheint dann der Schalter „Frontend" – die Vorschau zeigt deine echte App, live aktualisiert bei jeder Eingabe.

Webhooks & Events

sitepuls feuert Events wie page.published, page.updated, user.created, plugin.installed. Unter Webhooks abonnierst du sie für externe Systeme (mit Zustellprotokoll und optionalem Secret-Header), unter Automationen baust du Wenn-Dann-Abläufe direkt in sitepuls.

Eigene Domain

Unter Verwaltung → Domain: Domain eintragen → sitepuls zeigt dir die exakten DNS-Einträge (TXT-Verifizierung + A/CNAME) mit Kopier-Buttons → „DNS prüfen" → bei grünem Check „Fertigstellen". Das Zertifikat wird automatisch ausgestellt.