Dein Portfolio mit Manablox · Teil 4 von 7 der Serie
Teil 4: Dein eigenes Frontend mit Astro
Lies deine Inhalte über die öffentliche API, leg eine Astro-Website an, die sie zeigt, und stell den Space auf dein eigenes Frontend um.
Quest-Ziele
- Verstehen, was ein Headless-CMS und eine API sind
- Ein Projekt als JSON aus der öffentlichen API lesen
- Ein Astro-Frontend mit der Manablox-CLI anlegen
- Dich in einem Astro-Projekt zurechtfinden
- Inhalte mit einer Live-Vorschau deiner eigenen Website bearbeiten
Die gestaltete Website ist schnell, aber ihr Aussehen ist auf das beschränkt, was die Designs anbieten. Mit einem eigenen Frontend schreibst du HTML und CSS selbst, und jedes Detail gehört dir. Es ist außerdem der beste Weg, Webentwicklung zu lernen, deshalb baust du in den nächsten drei Teilen eins, genau für die Inhalte, die du angelegt hast.
Ein CMS, das seine Inhalte an andere Programme weitergibt, statt selbst eine Website zu zeigen, heißt headless: Es hat keinen Kopf, also keine Website obendrauf. Es gibt die Inhalte über eine API heraus, eine Adresse, bei der Programme Daten abfragen und die in JSON antwortet, einem Textformat für Daten.
Die öffentliche API
Manablox hat einen zweiten Prozess nur für Websites, die öffentliche API. Sie liest nur, sie zeigt nur Veröffentlichtes, und sie braucht keine Anmeldung. Öffne ein drittes Terminal und starte sie:
# ein drittes Terminal, in my-portfolio$ pnpm dev:public[06:53:55] INFO (2251): manablox public api listening url: "http://0.0.0.0:3100" mode: "public"[07:01:47] INFO (2251): public api serves the only space machineName: "portfolio"
Öffne jetzt localhost:3100/v1/permalink/work/pixel-weather in deinem Browser. Du bekommst das Projekt, das unter /work/pixel-weather liegt, als JSON:
{
"id": "2069af37-83bf-40de-b348-adc2696d350f",
"type": "project",
"title": "Pixel Weather",
"slug": "pixel-weather",
"permalink": "work/pixel-weather",
"locale": "en",
"fields": {
"client": "Personal project",
"year": 2026,
"role": "Design, pixel art and code",
"cover": "29d8b48b-b908-49b5-9572-d477c8a05115",
"summary": "A tiny weather app that shows the forecast as pixel art landscapes.",
"gallery": [
"fec64640-9082-4a1f-b9d2-5b5c9ccf58c6",
"29d8b48b-b908-49b5-9572-d477c8a05115"
],
"body": { "type": "doc", "content": [] }
},
"tags": []
}Alles, was du im Admin eingetippt hast, steht unter fields. Titelbild und Galerie sind nur IDs, lange Codes, die ein Bild benennen. Eine Website bittet die API, sie zu expandieren, und bekommt dann stattdessen das ganze Bild mit Adresse, Größe und Alt-Text.
Das Astro-Projekt anlegen
Astro ist ein Framework für Websites. Seine Komponenten sehen fast aus wie normales HTML, und es rendert jede Seite auf dem Server, sodass Besucher und Suchmaschinen fertiges HTML bekommen. Die Manablox-CLI schreibt ein ganzes Astro-Projekt für deinen Space. Führ sie neben my-portfolio aus, nicht darin:
$ cd ..$ pnpm dlx @manablox/cli frontend my-site --framework astro --model delivery --yesReading the content model from http://localhost:3100Found 2 content types and 8 block typesWriting Astro into my-siteWrote 42 files to my-siteComponents page content, Page project content, Project call-to-action block, Call to action contact block, Contact form gallery block, Gallery hero block, Hero media-text block, Image and text project-grid block, Project grid quote block, Quote text block, TextInstalling dependencies with pnpmDependencies installedInitialised a git repository
--framework astro wählt Astro. --model delivery liest deine Inhaltstypen aus der öffentlichen API und schreibt für jeden Typ eine Komponente, sodass die neue Website von Anfang an Projekte, Heros und Projektraster kennt. Starte sie:
$ cd my-site$ pnpm dev astro v7.4.4 ready in 154 ms┃ Local http://localhost:3005/07:07:10 watching for file changes...
Öffne localhost:3005. Alle deine Inhalte sind da: das Menü, der Hero, die Projekte und die Bilder. Sie haben nur noch kein Design.
Was im Projekt steckt
Öffne my-site in deinem Editor. Das sind die wichtigen Teile:
my-site/
├── .env wo das CMS ist: MANABLOX_URL=http://localhost:3100
├── astro.config.mjs Astro rendert jede Seite auf dem Server, mit Node
└── src/
├── pages/
│ ├── [...slug].astro jede Adresse: lädt das Dokument und wählt eine Komponente
│ └── preview.astro die Leinwand für den Visual-Knopf im Admin
├── layouts/Site.astro das HTML um jede Seite
├── components/
│ ├── Blocks.astro rendert eine Liste von Blöcken, jeden mit seiner Komponente
│ ├── blocks/ eine Komponente pro Blocktyp: HeroBlock.astro, …
│ └── content/ eine pro Inhaltstyp: PageContent.astro, ProjectContent.astro
└── lib/
├── manablox.ts der Client, der mit der öffentlichen API spricht
├── fields.ts Helfer, die Feldwerte in etwas Anzeigbares verwandeln
└── preview/ dieselben Komponenten noch einmal, für die Live-VorschauWenn du /work/pixel-weather öffnest, antwortet [...slug].astro, denn die Klammern mit den drei Punkten passen auf jede Adresse. Die Datei fragt die öffentliche API nach dem Dokument unter dieser Adresse und gibt es an die Komponente seines Typs weiter, ProjectContent.astro. Eine Seite geht an PageContent.astro, die ihre Blöcke rendert, jeden mit seiner eigenen Komponente.
So beginnt die Hero-Komponente, wie die CLI sie geschrieben hat:
---
import { fieldAttribute } from '@manablox/live-preview';
import { assetUrl, isImage } from '@manablox/public-sdk';
import { assets, link, text } from '../../lib/fields';
interface Props {
block: Record<string, unknown>;
path: (string | number)[];
}
const { block, path } = Astro.props;
const headline = text(block.headline);
const subline = text(block.subline);
const image = assets(block.image);
const button = link(block.button);
---
<section class="block block-hero" {...fieldAttribute(path)}>
{headline && <h2 {...fieldAttribute([...path, 'headline'])}>{headline}</h2>}
{subline && <p {...fieldAttribute([...path, 'subline'])}>{subline}</p>}Eine Astro-Komponente hat zwei Teile. Der Teil zwischen den beiden ----Zeilen ist TypeScript, das auf dem Server läuft: Er nimmt den Block aus Astro.props und liest seine Felder mit den Helfern aus fields.ts. Darunter steht das HTML. Geschweifte Klammern setzen einen Wert ein, und {headline && …} lässt die Überschrift weg, wenn das Feld leer ist. Die fieldAttribute-Teile sagen der Live-Vorschau, welches Feld ein Element zeigt.
Den Space auf dein Frontend umstellen
Der Space sagt noch, dass Manablox seine Website zeichnet. Erzähl ihm von deinem Frontend: Öffne im Admin Design, scroll nach unten zu Website mode und klick auf Use my own frontend instead.
Der Site-Prozess zeigt diesen Space nicht mehr, du kannst pnpm dev:site also mit Strg+C beenden. Öffne dann Settings, setz die Website address auf http://localhost:3005 und klick auf Save changes.
Eine Live-Vorschau deiner eigenen Website
Öffne im Admin die Seite Home. Neben History steht der Knopf Visual, und er öffnet jetzt deine eigene Website.
Er lädt /preview deiner Astro-Website in einen Rahmen und schickt ihr die Seite bei jedem Tastendruck, noch bevor du speicherst. Tipp in die Unterzeile und sieh zu, wie sie sich links ändert.
Du hast jetzt ein Headless-CMS und ein Frontend, das daraus liest. Im nächsten Teil machst du aus der schlichten Seite ein richtiges Portfolio, mit Layout, großem Hero und Projektkarten.