Website maken met Claude en online zetten op je eigen domein

Claude schrijft vandaag in een paar minuten een volledige website: een onepager voor je zaak, een portfolio, een landingspagina voor een nieuw product. Het resultaat ziet er klaar uit. Toch staat het dan nog niet online. Een artifact in de chat of een ontwerp in Claude Design zie jij in je Claude-account; het is geen adres als www.jouwzaak.be dat elke bezoeker kan openen.

Deze gids zet de vier manieren op een rij waarop je met Claude een website maakt, en toont daarna hoe je ze online brengt, meestal met één stap: VibeDeploy één keer koppelen als connector. Vanaf dan zet Claude de site zelf online, helpt bij het koppelen van je eigen domein en past de site later aan. De hosting draait in België, je betaalt in euro en je krijgt een factuur met btw van een Belgisch bedrijf.

Vier manieren om een website te maken met Claude

1. In de chat, als artifact

De snelste route. Vraag in claude.ai bijvoorbeeld: "Maak een website voor een fietsenmaker in Leuven, met openingsuren, prijzen en een contactformulier." Claude bouwt de pagina als artifact naast het gesprek, en bijsturen doe je in gewone taal: andere kleuren, een extra sectie, kortere teksten. Artifacts zitten volgens Anthropic in elk abonnement, van Free tot Enterprise, zolang Cloud code execution and file creation aanstaat onder Settings > Capabilities.

Noemt Claude een pad als /home/workdir/artifacts/index.html, zoek dat dan niet op je computer. Dat bestand staat in de code-sandbox van Claude, een tijdelijke omgeving op de servers van Anthropic. We leggen wat dat pad betekent apart uit, in het Engels.

2. Met Claude Design

Claude Design is een sjabloon voor visuals, mockups, prototypes, onepagers en landingspagina's. Je start het vanuit elk gesprek, vanuit het tabblad Artifacts of in Claude Code met /design, en volgens Anthropic zit het in alle abonnementen. Is je ontwerp klaar, klik dan rechtsboven op Export. Voor een website zijn twee opties interessant: Download as .zip en Export as standalone HTML. Hetzelfde menu stuurt een ontwerp ook rechtstreeks naar partners als Lovable, Netlify, Vercel en Wix.

Gebruik je nog de losse site claude.ai/design? Die sluit op 14 december 2026. Meer over exporteren en publiceren staat in onze Engelstalige gids over Claude Design.

3. Met Claude Code

Anthropic omschrijft Claude Code als een agentic coding tool die je codebase leest, bestanden aanpast en commando's uitvoert, in je terminal, je editor, de desktop-app of de browser. Het is de route voor een echt project: meerdere pagina's, een framework als React met Vite en een buildstap die een map als dist/ oplevert. Voor de meeste varianten heb je een betaald Claude-abonnement (Pro, Max, Team of Enterprise) of een Anthropic Console-account nodig; Claude Free bevat geen Claude Code.

4. Met Cowork

In Cowork voert Claude taken in meerdere stappen uit, met toegang tot een map op je computer: teksten verzamelen, foto's ordenen, de site in die map bouwen. Daarvoor heb je de desktop-app van Claude nodig, die open moet blijven zolang Claude met je lokale bestanden werkt. Cowork zit in de betaalde abonnementen: Pro, Max, Team en Enterprise. Anthropic voegt Cowork en de gewone chat geleidelijk samen tot één gesprek, te beginnen bij Pro en Max.

Wat Claude zelf niet regelt

Elk van die vier routes eindigt met bestanden of een gedeelde link, niet met een website op je eigen domein. Twee punten uit de helppagina's van Anthropic maken dat duidelijk:

• Wie een gedeeld artifact opent, heeft een Claude-account nodig, ook met de link. De enige uitzondering is een ouder artifact, gemaakt vóór 16 september 2026, dat vanuit een chat werd gepubliceerd. Nieuwe artifacts en Claude Design-ontwerpen vallen daar niet onder.
• Een eigen domein komt in die helppagina's niet voor. Een gepubliceerd chat-artifact kun je insluiten op websites die je zelf opgeeft, maar Claude zet je pagina niet op jouwzaak.be.

Voor klanten, leveranciers en Google heb je dus hosting nodig: een server die je bestanden altijd aanbiedt, op een adres dat van jou is.

De hostingstap: VibeDeploy één keer koppelen

Een eigen connector (custom connector) is hoe Claude een externe MCP-server via zijn URL koppelt: een dienst die Claude extra tools geeft. VibeDeploy draait zo'n server op https://mcp.vibedeploy.be/mcp, met meer dan 40 tools om sites te publiceren, aan te passen, domeinen te koppelen en formulieren aan te zetten. We gebruiken hieronder de Engelse namen van de knoppen, zoals Claude ze toont.

1. Open in Claude op het web of in de desktop-app Customize > Connectors. Sneller: open het vooraf ingevulde venster, dan staan naam en adres er al in.
2. Klik op + Add en dan op Add custom connector. Vul als naam VibeDeploy in en als URL https://mcp.vibedeploy.be/mcp, en klik op Continue.
3. Kies bij Authentication voor Sign in now en bij OAuth client voor Register automatically. Die tweede keuze is belangrijk: VibeDeploy registreert AI-apps via Dynamic Client Registration en ondersteunt de aanbevolen optie Use Claude's published identity niet. Laat Request headers leeg, want er is geen API-sleutel nodig. Toont je venster naam, URL en Advanced settings op één scherm, laat Advanced settings dan leeg.
4. Klik op Add. Er opent een venster van VibeDeploy waarin je je aanmeldt of meteen een account aanmaakt; met Google, GitHub of Microsoft gaat dat het snelst. VibeDeploy vraagt dan "Allow access to your VibeDeploy account?" en toont wat Claude wel en niet mag. Met een nieuw account vink je eerst de voorwaarden aan. Klik daarna op Allow.
5. Kijk in een gesprek via het +-menu en Connectors of VibeDeploy aanstaat. Je zet elke connector per gesprek aan of uit.

Een connector die je zo toevoegt, werkt ook in de desktop-app, in de mobiele apps en in Cowork. De verbinding loopt via de cloud van Anthropic, niet via je eigen computer.

Claude Free. Volgens het helpcentrum van Claude kun je op Free één eigen connector toevoegen, dus VibeDeploy kan die ene zijn. Is je plek al bezet, verwijder dan eerst de andere connector onder Customize > Connectors.

Team en Enterprise. Hier voegt een Owner de connector toe voor de hele organisatie, via Organization settings > Connectors, dan Add en Custom. Leden vinden VibeDeploy daarna onder Customize > Connectors met het label Custom en klikken op Connect om zich met hun eigen VibeDeploy-account aan te melden.

Claude Code. In de terminal voeg je de server toe met één commando:

claude mcp add --transport http --scope user vibedeploy https://mcp.vibedeploy.be/mcp

Typ daarna /mcp in een sessie en meld je aan in de browser. Ben je in Claude Code aangemeld met je claude.ai-account, dan zijn connectors die je op claude.ai toevoegde volgens Anthropic automatisch beschikbaar, en kun je dit commando overslaan.

Alle details per Claude-variant, met probleemoplossing en beveiliging, staan in de volledige connectorgids (Engels) en op de pagina over de VibeDeploy MCP-server.

Je site online zetten

Open het gesprek met je site, of laat Claude er een maken, en zeg:

Zet deze site online op VibeDeploy als mijn-fietsenzaak

Claude vraagt je toestemming voordat het een VibeDeploy-tool gebruikt, tenzij je eerder Always allow koos. Daarna zet Claude de site online met deploy_site en antwoordt met het adres, https://mijn-fietsenzaak.vibedeploy.be, meteen via HTTPS. Een sitenaam telt 3 tot 63 tekens: kleine letters, cijfers en koppeltekens, maar geen koppelteken aan het begin of het einde.

Per route verschilt vooral wat je vraagt:

• Chat: "Zet deze site online als ..." volstaat.
• Claude Design: download de .zip, maak een account aan en sleep het bestand in het dashboard onder Bestanden uploaden. Daarna kan Claude de live site via de connector verder aanpassen.
• Claude Code: "Zet dit project online op VibeDeploy als mijn-fietsenzaak." Heeft het project een buildstap, vraag Claude Code dan eerst te bouwen en de outputmap te publiceren.
• Cowork: "Publiceer de site in deze map op VibeDeploy als mijn-fietsenzaak."

Liever helemaal zonder Claude? Kies in het dashboard Bestanden uploaden en sleep een ZIP, een map of één HTML-bestand in het venster; na ongeveer een halve minuut staat de site online. Een project dat nog gebouwd moet worden, zoals een package.json zonder buildmap, wordt geweigerd: draai dan eerst npm install en npm run build en upload de map dist/ of build/.

Je eigen domein koppelen

Zodra de site live staat, zeg je:

Koppel www.jouwzaak.be aan mijn-fietsenzaak

Claude antwoordt met een TXT-record dat bewijst dat het domein van jou is: de naam is _vibedeploy.www.jouwzaak.be, de waarde begint met vibedeploy-verify=. Zet dat record bij je registrar, de partij waar je het domein kocht, samen met het record dat bezoekers naar VibeDeploy stuurt:

• voor www of een ander subdomein: een CNAME naar proxy.vibedeploy.be;
• voor het hoofddomein (jouwzaak.be): een ALIAS- of ANAME-record naar proxy.vibedeploy.be, of een A-record met het IP-adres uit het dashboard als je provider geen ALIAS kent.

Wacht een paar minuten en zeg: "Verifieer het domein." Claude controleert het TXT-record met verify_custom_domain. Klopt alles, dan toont je domein je site en regelt VibeDeploy het SSL-certificaat automatisch. Lukt het niet meteen, dan is de DNS-wijziging meestal nog niet overal doorgekomen; dat kan tot 24 uur duren. Beheer je je DNS bij Cloudflare, zet de records dan op DNS only (grijze wolk), zodat bezoekers rechtstreeks bij proxy.vibedeploy.be uitkomen; de verificatie in het dashboard controleert dat ook.

Zelf doen kan ook. In het dashboard vind je dezelfde stappen onder Web-adressen: typ je domein bij Gebruik je eigen domein, kies de site, klik op Koppelen!, zet de records en klik op Verifiëren.

In de proefperiode kun je al één domein koppelen dat je bezit. Een nieuw domein kopen via VibeDeploy kan vanaf een betaald plan.

Na de lancering: aanpassen, formulieren en versies

De connector hoort bij je Claude-account, niet bij één gesprek. Weken later zeg je in een nieuw gesprek "Zet de openingsuren op mijn-fietsenzaak op 9 tot 18 uur", en Claude leest de live bestanden, past ze aan en publiceert de wijziging.

• Een contactformulier dat aankomt. Een statische site heeft geen server die formulieren ontvangt. Vraag Claude om de formulieren-relay aan te zetten: inzendingen komen dan per e-mail bij je toe, zonder aparte formulierendienst.
• Bezoekers. Het dashboard toont per site privacyvriendelijke bezoekersstatistieken, en Claude kan ze voor je opvragen.
• Versies. Elke deploy blijft bewaard als versie, en vóór elke deploy maakt VibeDeploy een herstelpunt. Een wijziging waar je spijt van hebt, zet je met één klik terug op het tabblad Geschiedenis van je site, binnen het herstelvenster van je plan: 3 dagen in de proefperiode en op Solo en Maker, 7 dagen op Studio, 30 dagen op Business. Terugzetten gebeurt in het dashboard; de connector heeft daar geen tool voor.
• Een backend als het nodig is. Statische sites en single-page apps worden rechtstreeks geserveerd. Naast een site kunnen ook containers draaien (je eigen server, Postgres, MySQL, Redis of workers; tot 6 services met samen 2 CPU en 2 GiB geheugen), die je AI uitrolt met de MCP-tool deploy_app, geïsoleerd met gVisor. Containerdata zit nog niet in de momentopnames.

Waarom hosting in België

• Een eigen cluster in België. VibeDeploy draait op een eigen Kubernetes-cluster in België, uitgebaat door Tnet Comm.V uit Diest. Alle acht subverwerkers staan op de pagina met subverwerkers.
• Een kort antwoord voor je klanten. Vraagt een klant waar je website staat, dan is het antwoord: in België. Bij elk betaald plan hoort een verwerkersovereenkomst (DPA).
• Een duidelijke taakverdeling. Wat je in Claude typt, verwerkt Anthropic onder zijn eigen voorwaarden. De hosting, je bestanden en eventuele containers draaien bij VibeDeploy.
• Eerlijk over de grenzen. Er is één regio, in België, en geen wereldwijd edge-netwerk.

Wat kost het?

Artifacts en Claude Design kun je op elk Claude-abonnement gebruiken, ook op Free. Voor de hosting krijg je eerst 14 dagen om gratis te proberen, zonder betaalkaart, met één site en één eigen domein. Daarna kies je een plan:

Voor bureaus en grotere teams is er Business. Prijzen zijn inclusief btw waar die van toepassing is: voor Belgische klanten zit 21 procent btw in de prijs, particulieren in een ander EU-land betalen dezelfde prijs met de btw van hun eigen land, en bedrijven met een geldig EU-btw-nummer buiten België krijgen een factuur met verlegde btw. De factuur komt van Tnet Comm.V (BE0770401120, Waterbosstraat 39, 3290 Diest). Betalen kan met Bancontact, kaart en meer.

Kies je na de proefperiode geen plan, dan gaat je site offline, maar je account en bestanden blijven 30 dagen bewaard. Kies je in die tijd alsnog een plan, dan staat de site terug op hetzelfde adres. Alle details staan op de prijzenpagina. Bouw je liever met Lovable? Lees dan Lovable-website online zetten met je eigen domein.

Bronnen

• Anthropic Help Center, Get started with custom connectors using remote MCP: abonnementen, één eigen connector op Free, de stappen onder Customize > Connectors, verbindingen vanuit de cloud van Anthropic. Geraadpleegd op 13 oktober 2026.
• Claude Docs, Add a connector that isn't in the directory: de opties onder Authentication en OAuth client, Team en Enterprise, connectors per gesprek aan- of uitzetten. Geraadpleegd op 13 oktober 2026.
• Anthropic Help Center, What are artifacts and how do I use them?: artifacts per abonnement, oudere artifacts, de instelling Cloud code execution and file creation, /design in Claude Code. Geraadpleegd op 13 oktober 2026.
• Anthropic Help Center, Share artifacts: wie een gedeeld artifact kan openen, insluiten via Allowed domains. Geraadpleegd op 13 oktober 2026.
• Anthropic Help Center, Get started with Claude Design: abonnementen, het Export-menu en de partners, de sluiting van claude.ai/design. Geraadpleegd op 13 oktober 2026.
• Claude Code Docs, Overview, Advanced setup en Connect Claude Code to tools via MCP: wat Claude Code is, accountvereisten (Pro, Max, Team, Enterprise of Console, niet Claude Free), claude mcp add, /mcp, connectors van claude.ai in Claude Code. Geraadpleegd op 13 oktober 2026.
• Anthropic Help Center, Get started with Claude Cowork en Claude Cowork and chat are one Claude: abonnementen, mappen in de desktop-app, de samenvoeging met de chat. Geraadpleegd op 13 oktober 2026.