Dein Portfolio mit Manablox · Teil 1 von 7 der Serie

Teil 1: Manablox installieren und dein CMS anlegen

Installiere Node.js, pnpm und Docker, lege mit einem Befehl ein Manablox-Projekt an und richte dein Admin-Konto ein.

Einsteiger25 Min.

Quest-Ziele

Wissen, was ein CMS macht und was du in dieser Serie baust
Node.js, pnpm und Docker installieren
Ein Manablox-Projekt anlegen und starten
Dein Administrator-Konto im Admin anlegen

In dieser Serie baust du eine Portfolio-Website: eine Startseite, die dich vorstellt, eine Seite für jedes Projekt, auf das du stolz bist, eine Über-mich-Seite und einen Weg, dich zu kontaktieren. Du baust sie zweimal. Zuerst ohne eine einzige Zeile Code, mit einem Design aus dem CMS. Dann noch einmal mit deinem eigenen Frontend in Astro, in dem du jedes Detail selbst bestimmst. Im letzten Teil bringst du sie mit deiner eigenen Domain online.

Das Beispiel-Portfolio gehört Robin Pixel, einer erfundenen Person, die Websites entwickelt und Pixel-Art zeichnet. Setz überall, wo du Robin siehst, deinen eigenen Namen, deine Texte und deine Bilder ein.

Hier endet die Serie: dein eigenes Portfolio, mit den Inhalten in Manablox.

Was ist ein CMS?

Ein Content-Management-System (CMS) trennt die Inhalte einer Website, also Texte, Bilder und das Menü, von ihrem Code. Du bearbeitest die Inhalte in einer freundlichen Admin-Oberfläche im Browser, und die Website zeigt, was dort veröffentlicht ist. Eine Projektbeschreibung zu ändern heißt dann, sie in ein Formular zu tippen, statt eine HTML-Datei zu bearbeiten.

Manablox ist ein freies Open-Source-CMS, das auf Node.js läuft. Es kann deine Website selbst ausliefern, mit Designs, die du im Admin auswählst, oder die Inhalte über eine API an eine Website geben, die du selbst baust. Du probierst beides aus.

Was du brauchst

Einen Computer mit macOS, Linux oder Windows.
Einen Code-Editor. Visual Studio Code ist kostenlos und ein guter Start.
Ein Terminal. Unter macOS heißt es Terminal, unter Linux bringt es dein System mit.

So liest du die Terminal-Kästen

Ein Terminal ist ein Fenster, in das du Befehle tippst, statt zu klicken. In den Kästen dieser Serie ist eine Zeile, die mit $ beginnt, ein Befehl: Tipp ihn ohne das $ ein und drück Enter. Die Zeilen danach zeigen, was das Terminal antwortet. Deine Versionsnummern und Uhrzeiten weichen ein wenig ab, das ist in Ordnung. Befehle kopieren kopiert nur die Befehle, und Nochmal spielt den Kasten erneut ab.

Die Werkzeuge installieren

Du brauchst drei Programme:

Node.js führt JavaScript außerhalb des Browsers aus, und Manablox ist darin geschrieben. Installiere Version 24 (LTS) von nodejs.org.
Docker führt fertige Programme in Containern aus, sodass du sie nicht einzeln installieren musst. Installiere Docker Desktop und starte es.
pnpm lädt JavaScript-Pakete herunter. Es kommt nach Node.js, weil du es mit npm installierst, dem Paketmanager, der bei Node.js dabei ist.

Öffne nach der Installation von Node.js und Docker ein neues Terminal und prüfe, ob beide da sind:

$ node --versionv24.22.2$ pnpm --version12.16.1$ docker --versionDocker version 29.9.2, build a82e528

Dann installierst du pnpm:

$ npm install --global --allow-scripts=pnpm pnpmadded 2 packages in 1s$ pnpm --version12.16.1

Dein CMS anlegen

Manablox bringt ein Kommandozeilen-Werkzeug mit, das dir ein komplettes Projekt schreibt. pnpm dlx lädt es herunter und führt es einmal aus, du musst also nichts weiter installieren. Wechsle in den Ordner, in dem du deine Projekte aufbewahrst, und führe aus:

~/projects

$ pnpm dlx @manablox/cli create my-portfolio --database sqlite --website --yesmanablox: installing @manablox/plugin-website@0.52.0Writing my-portfolioWrote 13 files to my-portfolioInstalling dependencies with pnpmDependencies installedInitialised a git repositoryNext steps  cd my-portfolio  pnpm services:up             # valkey  pnpm migrate  pnpm dev  # open http://localhost:3000 and sign in as admin@example.com

Was die Optionen bedeuten:

my-portfolio ist der Ordner, in den das Projekt kommt.
--database sqlite hält die ganze Datenbank in einer Datei, data/manablox.db. Es gibt keinen Datenbank-Server einzurichten.
--website fügt die gestalteten Websites hinzu, die du im nächsten Teil verwendest.
--yes nimmt für jede Frage, die das Werkzeug sonst stellen würde, den Standardwert.

Öffne den Ordner in deinem Editor. Diese Dateien sind wichtig:

text

my-portfolio/
├── .env                       Geheimnisse und Einstellungen, gib diese Datei nie weiter
├── compose.yml                Valkey und Mailpit, die Helfer, die in Docker laufen
├── content-model.ts           Inhaltstypen als Code (wir nehmen stattdessen den Admin)
├── manablox.config.ts         das CMS und sein Admin
├── manablox.public.config.ts  die öffentliche API, aus der deine Website liest
├── manablox.site.config.ts    der Site-Prozess, der gestaltete Websites ausliefert
├── package.json               die Pakete und die pnpm-Befehle
└── README.md                  wofür jede Datei da ist

Das CMS starten

Drei Befehle bringen es zum Laufen. pnpm services:up startet zwei Helfer in Docker: Valkey, einen kleinen, schnellen Speicher, den Manablox für seinen Cache und seine Hintergrundaufgaben nutzt, und Mailpit, das jede E-Mail des CMS auffängt, sodass du sie unter localhost:8025 lesen kannst. pnpm migrate legt die Tabellen in der Datenbank an. pnpm dev startet das CMS und startet es neu, sobald du eine Datei änderst.

~/projects

$ cd my-portfolio$ pnpm services:up Network my-portfolio_default Created Volume my-portfolio_valkey-data Created Container my-portfolio-valkey-1 Started Container my-portfolio-mailpit-1 Started$ pnpm migratemanablox: migrations applied$ pnpm dev[06:52:30] INFO (2070): manablox initialised    fieldTypes: 15    contentTypes: 2    plugins: [      "@manablox/fields",      "website"    ][06:52:30] INFO (2070): manablox listening    url: "http://0.0.0.0:3000"    mode: "management"

Dein Konto anlegen

Öffne http://localhost:3000 in deinem Browser. localhost bedeutet dein eigener Computer, und 3000 ist der Port, die Tür, an der das CMS lauscht. Weil noch niemand ein Konto hat, begrüßt dich Manablox mit einem Einrichtungsassistenten.

Gib deinen Namen, deine E-Mail-Adresse und ein Passwort mit mindestens 12 Zeichen ein und klick auf Create account.

Der erste Schritt des Assistenten legt den Administrator an.

Dieses erste Konto ist der Superadmin: Es darf alles. Sobald es existiert, ist der Assistent verschwunden, und weitere Personen bekommen nur ein Konto, wenn du sie unter Settings einlädst.

Der Assistent geht direkt weiter zu deinem ersten Space. Dort beginnt der nächste Teil, du kannst hier also eine Pause machen: Dein CMS ist installiert und läuft.