So funktionieren Domains mit Headless Cmssy

Cmssy ist ein Headless CMS mit visuellem Editor. Deine Inhalte leben im Cmssy-Admin und werden über die Delivery-API ausgeliefert, während deine eigentliche Website eine Next.js-App (App Router) ist, die du mit @cmssy/react und @cmssy/next baust und selbst deployst (zum Beispiel auf Vercel). Cmssy hostet deine Seite nicht.

Weil dir das Deployment gehört, zeigt deine Custom Domain auf deinen Host, nicht auf Cmssy. Du fügst die Domain dort hinzu, wo deine Seite deployt ist, konfigurierst DNS bei deinem Registrar, und dein Host stellt das SSL-Zertifikat aus. Auf der Cmssy-Seite setzt du die Preview URL des Workspace, damit der Editor deine deployte Seite fürs visuelle Bearbeiten einbettet.

Warum eine Custom Domain nutzen

Eine eigene Domain für deine Headless-Seite bringt mehrere wichtige Vorteile:

• Professionalität — Eine Custom Domain wie yourcompany.com wirkt deutlich professioneller als eine Standard-Deployment-URL. Sie zeigt Besuchern, dass du deine Online-Präsenz ernst nimmst.
• Branding — Deine Domain ist Teil deiner Markenidentität. Eine einprägsame Domain stärkt die Markenbekanntheit bei jedem Besuch und jedem geteilten Link.
• SEO-Vorteile — Suchmaschinen bevorzugen etablierte eigene Domains. Mit der Zeit baut deine Domain Autorität auf und verbessert dein Ranking in den Suchergebnissen.
• Passende E-Mail-Adressen — Mit einer eigenen Domain kannst du passende E-Mail-Adressen nutzen (z. B. hello@yourcompany.com) für ein konsistentes und vertrauenswürdiges Markenerlebnis.

Voraussetzungen

Bevor du loslegst, stelle sicher, dass du Folgendes hast:

• Eine deployte Cmssy-Seite — Eine Next.js-App, die über @cmssy/react und @cmssy/next mit deinem Workspace verbunden ist. Sieh dir die Installationsanleitung und den Quickstart an, falls du noch nicht deployt hast.
• Einen Hosting-Account — Dort, wo du deine Seite deployt hast (z. B. Vercel). Custom Domains und SSL werden dort verwaltet.
• Eine bei einem beliebigen Registrar registrierte Domain — Du kannst Cloudflare Registrar (Preise zum Selbstkostenpreis), Namecheap, Porkbun oder jeden anderen Domain-Registrar nutzen.

Schritt 1: Deploye deine Headless-Seite

Bevor du eine Domain anhängst, stelle sicher, dass deine Seite gebaut und deployt ist:

1. Baue deine Next.js-App mit Cmssy-Blöcken über @cmssy/react und @cmssy/next.
2. Deploye sie auf deinen Host (zum Beispiel per Push in ein Git-Repo, das mit Vercel verbunden ist).
3. Bestätige, dass das Deployment unter seiner Standard-URL live ist (z. B. your-site.vercel.app).

Auf diese deployte App wird deine Custom Domain zeigen.

Schritt 2: Füge deine Domain bei deinem Host hinzu

Im Dashboard deines Hosting-Anbieters (Vercel als Beispiel):

1. Öffne dein Projekt und gehe zu Settings → Domains.
2. Klicke auf Add und gib deinen Domainnamen ein, zum Beispiel: example.com.
3. Füge bei Bedarf auch die www-Variante hinzu: www.example.com.

Dein Host zeigt dir dann die exakten DNS-Einträge, die du im nächsten Schritt konfigurieren musst.

Schritt 3: Konfiguriere die DNS-Einträge

Gehe zum DNS-Verwaltungspanel deines Domain-Registrars und füge die Einträge hinzu, die dir dein Host genannt hat. Für Vercel sehen sie typischerweise so aus:

Der CNAME-Eintrag für www richtet deine www-Subdomain auf deinen Host. Der A-Eintrag für die Root-Domain (@) richtet die Apex-Domain auf die IP deines Hosts. Nutze immer die exakten Werte aus dem Dashboard deines Hosts — sie können sich zwischen Anbietern und im Laufe der Zeit unterscheiden.

Schritt 4: Verifiziere die Domain

Nach dem Hinzufügen der DNS-Einträge:

1. Kehre zum Domains-Bereich im Dashboard deines Hosts zurück.
2. Dein Host prüft die Einträge automatisch und markiert die Domain als gültig, sobald sie auflösen.

Die DNS-Propagierung kann bis zu 48 Stunden dauern, ist aber in den meisten Fällen innerhalb von 15–30 Minuten abgeschlossen. Wenn die Domain als ungültig angezeigt wird, warte etwas länger und prüfe erneut.

Schritt 5: SSL-Zertifikat

Sobald deine Domain auflöst, richtet dein Host SSL automatisch ein — Cmssy ist an diesem Schritt nicht beteiligt:

• Automatische SSL-Bereitstellung — Hosts wie Vercel stellen ein Zertifikat für deine Domain aus (z. B. über Let's Encrypt).
• HTTPS standardmäßig aktiviert — Der gesamte Traffic wird automatisch auf HTTPS umgeleitet.
• Keine manuelle Konfiguration nötig — Die Zertifikatserneuerung übernimmt dein Host.

Deine Seite ist innerhalb weniger Minuten nach der Domain-Auflösung über https://yourdomain.com erreichbar.

Schritt 6: Setze die Cmssy Preview URL

Damit der visuelle Editor die richtige Seite einbettet, richte Cmssy auf deine Live-Domain:

1. Melde dich im Cmssy-Admin-Dashboard an.
2. Gehe zu Settings → Headless.
3. Setze die Preview URL auf deine deployte Seite (z. B. https://yourdomain.com).

Jetzt lädt der Cmssy-Editor deine deployte Seite fürs visuelle Bearbeiten im Kontext, während die Inhalte weiterhin über die Delivery-API ausgeliefert werden.

Gängige DNS-Anbieter

Hier sind kurze Anleitungen für beliebte Domain-Registrare. Nutze in jedem Fall die exakten Eintragswerte deines Hosts.

GoDaddy

1. Gehe zu Meine Produkte → wähle deine Domain → DNS.
2. Klicke auf Eintrag hinzufügen und gib die CNAME- und A-Einträge deines Hosts ein.
3. Speichere die Änderungen.

Namecheap

1. Gehe zu Domain List → klicke auf Manage neben deiner Domain.
2. Wähle den Tab Advanced DNS.
3. Füge die CNAME- und A-Einträge hinzu.
4. Speichere alle Änderungen.

Cloudflare

1. Wähle deine Domain im Cloudflare-Dashboard.
2. Gehe zu DNS → Records.
3. Füge den CNAME-Eintrag im Modus DNS only hinzu (graues Wolken-Symbol — nicht proxied).
4. Füge den A-Eintrag hinzu.

Porkbun

1. Gehe zu Account → Domain Management → wähle deine Domain.
2. Öffne den Editor DNS Records.
3. Füge die CNAME- und A-Einträge hinzu.
4. Speichern.

Fehlerbehebung

Domain löst nicht auf

• Prüfe die DNS-Propagierung — Nutze Tools wie dig oder nslookup im Terminal oder Online-Tools wie whatsmydns.net, um zu bestätigen, dass deine Einträge propagiert wurden.
• Gleiche die Werte mit deinem Host ab — Prüfe die CNAME-/A-Werte noch einmal gegen das, was das Domains-Panel deines Hosts anzeigt.
• Warte länger — Die Propagierung kann in seltenen Fällen bis zu 48 Stunden dauern. Hab Geduld.

SSL-Probleme

• Konflikt mit CDN-Proxy — Wenn du Cloudflare im Proxy-Modus nutzt, kann das mit der SSL-Bereitstellung deines Hosts kollidieren. Wechsle in den DNS-only-Modus, damit dein Host das Zertifikat ausstellen kann.

WWW vs. Root-Domain

• Sowohl www.example.com als auch example.com sollten bei deinem Host konfiguriert sein. Füge sowohl den CNAME (für www) als auch den A-Eintrag (für die Root-Domain) hinzu, damit Besucher deine Seite erreichen, egal welche URL sie verwenden.

Der Editor zeigt die falsche Seite

• Wenn der Cmssy-Editor eine alte oder Standard-URL einbettet, aktualisiere die Preview URL unter Settings → Headless auf deine Live-Domain.

Best Practices

• Konfiguriere immer www und Root — So können Besucher deine Seite über beide URL-Varianten erreichen.
• Richte E-Mail separat ein — E-Mail auf eigener Domain (z. B. via Google Workspace oder Zoho) braucht separate MX-Einträge und kollidiert nicht mit den DNS-Einträgen, die deine Seite auf deinen Host richten.
• Nutze den DNS-only-Modus bei Cloudflare — Der Proxy-Modus von Cloudflare kann die SSL-Zertifikate deines Hosts stören. Nutze die graue Wolke (DNS only) für Einträge, die auf deinen Host zeigen.
• Halte die Preview URL synchron — Wann immer sich deine Produktionsdomain ändert, aktualisiere die Preview URL unter Settings → Headless, damit der Editor weiterhin die richtige Seite einbettet.