npx cms-create-site my-site Was möchten Sie heute bauen?
HerausfindenWas Vertex ist
Eine Content-Website ist eine Konfigurationsdatei. Alles Übrige ist Sache des Frameworks.
Vertex CMS ist ein Vue-3-Framework auf Basis von vite-ssg. Sie schreiben JSON, das beschreibt, was auf jeder Seite steht; zurück kommt eine vorgerenderte statische Website, bei der Routing, Metadaten, Theming und Bilder bereits erledigt sind. Es gibt keinen Anwendungscode zu schreiben und keinen Server zu betreiben.
Seiten sind Daten, nicht Code
Eine Seite ist eine Liste von Komponenten und der Inhalt, den diese Komponenten brauchen. Einen Abschnitt hinzufügen heißt eine Zeile hinzufügen. Niemand muss eine .vue-Datei öffnen, um eine Überschrift zu ändern, und Inhaltsänderungen können den Build nicht kaputtmachen.
Design ist ein Token-Manifest
Ein Theme ist ein einziges JavaScript-Objekt aus Design-Tokens — Palette, Typografie, Flächen, Fokusringe, Elevation. Das Framework kompiliert es zu CSS-Custom-Properties: eine ganze Website neu einzukleiden ist eine Datei, kein Stylesheet-Audit.
Statische Ausgabe, echtes SEO
Jede Route wird in ihr eigenes HTML vorgerendert — mit kanonischen URLs, hreflang-Alternativen, JSON-LD, Open-Graph-Tags, einer Sitemap und einer robots.txt, die aus Ihren Entwurfseinstellungen abgeleitet wird. Legen Sie den Ordner überall ab, wo Dateien ausgeliefert werden.
Schnellstart
Von null zur deploybaren Website in vier Befehlen.
Vertex kommt als einzelnes npm-Paket plus Vite-Plugin. Der Generator schreibt eine lauffähige Website, die Sie sofort bauen können; ab da bearbeiten Sie JSON.
Website generieren
Legt das Website-Verzeichnis, ein Start-Theme und eine Startseite an, die bereits baut.
Terminal npx cms-create-site my-site cd my-site npm installEine Seite beschreiben
Flache Schlüssel in Punktnotation mit Array-Indizes. Das Framework entfaltet sie zu dem verschachtelten Objekt, das Ihre Komponenten beim Rendern lesen.
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }Vorschau ansehen
Vite-Entwicklungsserver mit Hot Reload. Inhaltsänderungen laden sofort neu; Bild- und Theme-Änderungen ebenso.
Terminal npm run devStatische Website bauen
Rendert jede Route in ihre eigene HTML-Datei unter dist/ vor, erzeugt responsive Bildvarianten und schreibt sitemap.xml, robots.txt, manifest.json und eine 404-Seite.
Terminal npm run build:ssg
Das ist die gesamte Schleife. Für das vollständige Inhaltsmodell, die Theming-Tokens und die Deploy-Ziele lesen Sie die Dokumentation →
Was enthalten ist
Die Bausteine, die jede Content-Website braucht — schon fertig.
Das sind keine Plugins, die Sie erst suchen müssen. Sie stecken im Framework, sind standardmäßig aktiv und werden aus demselben JSON konfiguriert wie alles andere.
Vorgerendertes Routing
Routen leiten sich aus Ihren Seitendateien ab. Jede wird zur Bauzeit in ihr eigenes HTML gerendert — kein SPA-Rewrite, keine Startseiten-Hülle für echte Inhalts-URLs.
Mehrsprachige Inhalte
Verzeichnisse pro Sprache, die einander spiegeln. Die Basissprache lädt zuerst, und jede Sprache überschreibt nur die Schlüssel, die sie definiert — eine Teilübersetzung ist also eine gültige Übersetzung.
Responsive Bilder
Legen Sie ein Original in site/assets/img/. Der Build erzeugt AVIF, WebP und JPEG in sechs Breiten, cacht sie außerhalb Ihres Repositorys und liefert sie über ein srcset in <picture> aus.
SEO-Metadaten
Kanonische URLs, hreflang-Alternativen, Open-Graph- und Twitter-Cards, JSON-LD, automatisch abgeleitete Breadcrumbs, sitemap.xml, robots.txt und ein Web-App-Manifest — alles generiert, nichts von Hand gepflegt.
Entwurfssperre
Sperren Sie eine Seite, ein Pfadpräfix oder die ganze Website hinter einem Passwort. Gesperrte Seiten werden mit noindex ausgeliefert, bleiben aus der Sitemap heraus und rendern keinen Inhalt, bis sie entsperrt werden.
Themes und Erweiterungen
Themes sind Token-Manifeste. Erweiterungen sind validierte Komponentenbündel. Beide können in Ihrem Repository liegen oder auf npm veröffentlicht und zwischen Websites geteilt werden.
Komponenten in drei Ebenen
Website-lokale Komponenten überschreiben Erweiterungskomponenten, diese überschreiben den mitgelieferten Satz. Das Spezifischste gewinnt, und quellqualifizierte Namen lösen Kollisionen auf.
Ein echter 404
Das Framework rendert /404.html mit dem Rahmen Ihrer eigenen Website vor. Nicht zugeordnete URLs erhalten so eine gebrandete Seite mit noindex statt eines leeren Antwortkörpers.
Loslegen
Also — was möchten Sie heute bauen?
Vertex CMS steht unter MIT-Lizenz und ist auf npm veröffentlicht. Generieren Sie eine Website, lesen Sie die Dokumentation, oder lesen Sie den Quellcode.
npx cms-create-site my-site