Website gemaakt met Claude online zetten: stap voor stap

Een website gemaakt met Claude zet je op je eigen domein door de bestanden uit Claude te halen en bij een hostingpartij neer te zetten. Het begint met een vraag: heb je een pagina uit de Claude-app, of een project uit Claude Code? De eerste is één bestand of een zip, de tweede een map met een build. Beide kun je op je eigen domein zetten via hosting voor Claude-websites, ze vragen alleen een iets andere aanpak.

Welke Claude heb je gebruikt?

De Claude-app. Je vraagt in de chat om een pagina, en die verschijnt als artifact naast het gesprek. Met Claude Design maak je daarnaast ontwerpen op een canvas. Wat eruit komt is één pagina of een set pagina’s, geen programma met een server.

Claude Code. Dit is de variant voor in je terminal of editor. Claude werkt dan in een map op je computer, kan commando’s draaien en bouwt een volledig project. Wat je krijgt hangt af van wat je vraagt. Er is geen vaste stack.

Heb je geen idee welke je gebruikte? Staat de pagina alleen in de chat, dan is het de app. Heb je een map met bestanden op je computer waar Claude in heeft gewerkt, dan is het Claude Code.

Een pagina of design uit de Claude-app

Een artifact kun je op twee manieren delen. Met de optie om te publiceren krijg je een publieke link die door Claude wordt gehost. Handig om iets te laten zien, maar het is een adres van Claude en niet van jou. Je eigen domein koppel je er niet aan. Voor jouw domein heb je de code zelf nodig.

Zo haal je hem eruit:

• Een artifact. Open het paneel met de pagina en zoek de knoppen om de code te bekijken, te kopiëren of te downloaden. Kopieer je de code, zet hem dan in een nieuw bestand met de naam index.html.
• Een Claude Design-project. Rechtsboven zit de knop Export. Daaronder staan onder meer “Download as .zip” en “Export as standalone HTML”. De standalone variant is één bestand met alles erin, de zip bevat de losse bestanden.

Open het bestand daarna door erop te dubbelklikken. Ziet het er in je browser net zo uit als in Claude, dan werkt het.

Eén ding om te weten: artifacts mogen scripts en lettertypen alleen laden van een aantal bekende adressen, zoals cdnjs, jsDelivr, unpkg en Google Fonts. Daardoor werkt zo’n bestand meestal op gewone hosting zonder aanpassing. Onderdelen die de Claude-omgeving zelf gebruiken, zoals een ingebouwde aanroep naar Claude, gaan niet mee naar een andere plek. Een formulier dat je bezoekers laat versturen heeft ook iets nodig, zie contactformulier op je AI-website.

Een project uit Claude Code

Bij Claude Code bepaal jij de uitkomst met je opdracht. Vraag daarom expliciet om een statische site. Een bruikbare opdracht:

Maak er een statische website van die ik op gewone hosting kan zetten.
Geen server, geen database. Zorg dat npm run build een map dist maakt
met een index.html in de hoofdmap.

Gebruikt Claude Next.js, vraag dan om een statische export met output: 'export'. De uitvoer komt dan in de map out. Bij Vite en Astro heet de map meestal dist.

Draai daarna in de projectmap:

npm install
npm run build

De inhoud van de uitvoermap is je website. Upload dus niet de hele projectmap met node_modules, src en package.json, maar alleen wat uit de build komt. Over hoe zo’n project er precies uitziet en wat je controleert, lees je meer in React of Vite website hosten zonder Node-server.

Vraagt Claude om een Node-server, een database of server-side rendering? Dan is dit geen losse set bestanden meer. Zo’n project past bij een aanbod op maat: stuur ons een appje met wat je hebt gebouwd, dan kijken we samen wat er nodig is.

Checklist voor je uploadt

Loop deze punten langs. Het kost vijf minuten en voorkomt een site die er lokaal goed uitziet en online niet.

1. index.html in de hoofdmap. De startpagina moet direct in de map staan die je uploadt, niet in een submap zoals dist/dist of mijn-site/.
2. Relatieve paden of een kloppende basis. Verwijst een afbeelding naar /assets/foto.jpg, dan werkt dat op een eigen domein. In een submap niet. Bij Vite staat de instelling base standaard op /, wat past bij een domein.
3. Geen geheimen in de bestanden. Zoek in je code naar sleutels, wachtwoorden en tokens. Wat in een build met het voorvoegsel VITE_ staat, kan iedereen in de browser lezen. Een API-sleutel hoort daar niet.
4. Alle bestanden aanwezig. Afbeeldingen, lettertypen en stylesheets staan naast index.html of in een submap die meegaat.
5. Meerdere pagina’s in React. Heeft je site routes zoals /over-ons die in de browser worden afgehandeld, dan moet de server onbekende adressen naar index.html sturen. Dat geldt voor elke host. Bij ons is het een instelling die we op verzoek voor je aanzetten, een appje is genoeg.

Online zetten op je eigen domein

Nu heb je een map die klaar is. Er zijn twee manieren.

Zelf uploaden. Je gebruikt SFTP met een gratis programma als FileZilla of Cyberduck. De inloggegevens staan in je portal (Mijn account) onder Bestanden. Sleep de inhoud van je map naar de hoofdmap van je site. Daarna staat je site online.

Wij doen het. Stuur ons de zip of een GitHub-link, dan zetten wij hem online als onderdeel van de gratis verhuizing. Meer over zip en GitHub staat in AI-website exporteren als zip of GitHub.

Daarna koppel je je domein. Je krijgt van ons twee nameservers, die je eenmalig bij je registrar invult. Het stappenplan staat in domeinnaam koppelen aan je AI-website. Staat er al een andere site op dat domein, dan blijft die online totdat jij de nameservers wijzigt.

De site staat achter Cloudflare, SSL is inbegrepen en er is elke dag een back-up die je in je portal onder Back-up en herstel kunt terugzetten. Het Website-plan kost € 9 per maand, of € 90 per jaar. Je bestelt het via het bestelformulier.

Wil je dat Claude later zelf bestanden aanpast of toevoegt? Dat kan met je eigen Claude via MCP, zonder dat je steeds opnieuw hoeft te uploaden. Het overzicht van alle routes vind je in website van AI online zetten.