Twintig minuten, van een lege map naar een pagina die je zelf hebt gepubliceerd en op de publieke site kunt zien. Voorkennis van Vinum is niet nodig. Elk commando hieronder is van begin tot eind uitgevoerd voordat dit geschreven werd.

Wat je nodig hebt

Node, en verder niets. Vinum vraagt om React Router v7 of v8 met SSR, Tailwind v4 en een runtime met Web Crypto — en een nieuwe React Router-app heeft die drie al, dus er is vooraf niets te regelen.

1. Maak een app

npx create-react-router@latest my-sitecd my-site

Neem de standaardkeuzes over. Je krijgt React Router 8, React 19, Tailwind 4 en Vite 8 — precies de ondergrens die Vinum vraagt.

2. Installeer Vinum

npx vinumcms init

Dit is de enige stap die meer is dan een pakketinstallatie, en hij drukt af wat hij heeft aangeraakt:

+  Packages              Installed @vinumcms/core, adapters, server, react, admin.+  app/vinum.server.ts   Store, media and auth wiring.+  app/entry.server.tsx  From React Router's default, plus the import.~  app/routes.ts         Spread vinumRoutes() after your own routes.~  vite.config.ts        Added ssr.noExternal and optimizeDeps.include.~  app/app.css           Added 3 line(s).~  tsconfig.json         Added allowImportingTsExtensions.+  .env                  wrote .env with a generated secret and password.

Drie daarvan zijn build-instellingen, en zij zijn de reden dat dit een commando is en geen alinea met instructies. Vinum levert TypeScript zonder buildstap, dus je bundler moet het compileren in plaats van het te externaliseren, Tailwind moet het scannen, en TypeScript moet zijn imports toestaan. Elk daarvan faalt stil als het ontbreekt — de app draait en er is ongemerkt iets mis.

`init` overschrijft nooit een bestand dat jij hebt geschreven, en een tweede keer draaien doet niets.

3. Controleer wat stil kapotgaat

npx vinumcms doctor

✓  Vite SSR config   vite.config.ts sets ssr.noExternal to cover @vinumcms/.✓  Dev pre-bundling  vite.config.ts pre-bundles @vinumcms for dev.✓  Tailwind sources  app/app.css scans @vinumcms/react and @vinumcms/admin.✓  tsconfig          tsconfig.json sets allowImportingTsExtensions.✓  Registration      app/vinum.server.ts is imported by app/entry.server.tsx.✓  Store             app/vinum.server.ts uses a store that survives a restart.✓  Session secret    SESSION_SECRET is set in .env. Nothing to fix.

Draai dit zodra de admin zich vreemd gedraagt. Het controleert de instellingen waarvan het ontbreken een verwarrend symptoom oplevert op een heel andere plek.

4. Start hem en log in

npm run dev

Open /admin. Je e-mailadres en wachtwoord staan in `.env`, aangemaakt tijdens de installatie — het wachtwoord is willekeurig en het e-mailadres is een placeholder, dus pas `ADMIN_EMAIL` aan voordat je dit ergens neerzet.

5. Publiceer een pagina

Ga in de admin naar Pages → New page. Geef hem een titel en de slug `hello`, en voeg daarna een blok of twee toe: ga met de muis in de tussenruimte staan waar je er een wilt en klik op de +.

Typ direct op de pagina — het canvas is de echte pagina, geen voorbeeld ervan. Zet Status op Published in de pagina-instellingen en druk daarna op Publish changes.

Ga nu naar /hello. Dat is jouw pagina, geserveerd uit je eigen opslag, op je eigen machine.

Wat je zojuist hebt gebouwd

Een admin op `/admin`, pagina's op `/<slug>`, concepten en versies, ingeplande publicaties, media, formulieren, redirects, een sitemap en zoeken — binnen de app die je al had. Vinum heeft routes aan je routeboom toegevoegd; het heeft de app niet overgenomen.

Je content staat in `data/store.json`. Hij is van jou, hij staat op jouw schijf, en `npx vinumcms export` schrijft de hele site naar één bestand wanneer je maar wilt. Doe dat nu liever dan later: een vluchtweg die je niet hebt gecontroleerd, is er geen.

Waar je hierna heen gaat

Stel een thema in — achttien `--vinum-*`-variabelen bepalen hoe elk blok en de hele admin eruitzien. Schrijf daarna een eigen blok: een schema en een renderer, in jouw repo, via dezelfde API die de kernblokken gebruiken.