Hoe begint u met Vibe Hosting?
Een complete Vibe Coding-tutorial vanaf nul

Je hebt waarschijnlijk al van vibe-codering gehoord — het praktijken waarbij je aan een AI beschrijft wat je wilt en deze de code voor je schrijft. Maar hier is het ding waar niemand over praat: wat gebeurt er nadat de code is geschreven?

Most vibe coders hit a wall. They've got a beautiful app sitting on their laptop, and then they Google "how to deploy a website" and fall into a rabbit hole of Docker, Kubernetes, CI/CD pipelines, and YAML files that make them question their life choices.

Daar komt vibe-hosting om de hoek.

In deze tutorial doorlopen we de complete workflow van nul naar een live website met Claude Code voor vibe-codering en NameOcean voor vibe-hosting.

Wat je nodig hebt

Dat is het. Geen Docker. Geen AWS-console. Geen Terraform. Geen tranen.

Voeg de NameOcean MCP-server met één opdracht toe aan Claude Code. U hoeft niets te downloaden: de server draait op nameocean.net en u logt in met uw NameOcean-account in de browser.

$ claude mcp add --transport http nameocean https://nameocean.net/mcp

Voer daarna /mcp uit in Claude Code en kies nameocean om in te loggen. Claude Desktop, claude.ai, Cursor en andere clients maken op dezelfde manier verbinding: zie de MCP-handleiding.

Log in op je NameOcean-dashboard en maak een nieuwe server aan. Kies het plan dat aan je behoeften voldoet:

Voor een landingspagina of een kleine web app is het Starter plan meer dan voldoende.

Als je een domein hebt geregistreerd op NameOcean (of ernaar toe hebt overgedragen), het verbinden met je server is één actie. Via Claude Code's MCP-integratie is het letterlijk één zin:

"Bind mywebsite.com to my Starter server"

Achter de schermen doet NameOcean:

1. Werkt DNS-records bij om naar je server te wijzen
2. Stelt automatisch een SSL-certificaat in via Let's Encrypt
3. Configureert de load balancer om HTTPS-verkeer naar je server te routeren

Binnen enkele minuten is je domein live en beveiligd met HTTPS. Geen Certbot-commando's, geen Nginx SSL-configuratie, geen DNS-propagatie gissingsspelletjes.

Nu voor het leuke gedeelte. Open je projectmap en start Claude Code:

mkdir my-awesome-site && cd my-awesome-site
git init
claude

Beschrijf dan gewoon wat je wilt:

"Create a modern landing page for my WordGrid word puzzle game.
It should have a hero section with App Store and Google Play buttons,
a features section, screenshots, how-to-play steps, and a CTA section.
Use the game's color palette — orange, teal, purple on a dark background."

Claude Code zal een complete, responsieve, productie-klare website creëren. Je schrijft geen enkele regel code. Je beschrijft de vibe, en de AI levert.

De Kunst van Vibe Coding

De sleutel tot geweldig vibe coding is specifiek zijn over wat je wilt maar flexibel over hoe het wordt geïmplementeerd:

Think of it like talking to a skilled designer. You say "I want a modern, dark-themed landing page that feels playful and energetic" -- you don't say "use flexbox with a 24px gap and a linear gradient from #0f1628 to #161d35."

Dit is waar vibe hosting schittert. Elke NameOcean server wordt geleverd met een ingebouwde git remote. Voeg het eenmaal toe:

# Add the remote (first time only)
git remote add nameocean ssh://root@yourserver.nameocean.org:PORT/root/app

# Deploy
git add .
git commit -m "Initial launch"
git push nameocean main

Klaar. Je code belandt in /root/app/ op de server. Nginx is al geconfigureerd om statische bestanden uit die map te serveren. Je site is live.

Geen build stap. Geen Docker-image. Geen deployment pipeline. Geen wachten. Alleen git push en vernieuw je browser.

Uw eerste push mag een willekeurige branchnaam hebben (main, master...); de server deployt vanaf dat moment die branch en de placeholder-welkomstpagina verdwijnt. Hebt u na elke deploy een buildstap of herstart nodig? Voeg .nameocean/deploy.sh toe aan uw project. Dit script draait na elke push op de server en de uitvoer verschijnt direct in uw terminal:

#!/bin/bash
set -e
npm ci
npm run build
supervisorctl restart app

Bestanden die u rechtstreeks op de server bewerkt, worden bij de volgende push overschreven. Bewaar uw wijzigingen dus in git.

De echte kracht van vibe coding + vibe hosting is de iteratiesnelheid. Wil je de hero-sectie wijzigen?

"Make the hero headline bigger and add a floating animation to the phone mockup"

Deploy dan opnieuw:

git add . && git commit -m "Bigger hero headline + animation" && git push nameocean main

Je wijzigingen zijn live in seconden. Deze feedbackloop — beschrijf → genereer → deploy → zie het live — is wat vibe hosting transformatief maakt. Je codeert niet alleen sneller; je shipped sneller.

Beyond Static Sites

Vibe hosting op NameOcean is niet beperkt tot statische HTML. Het platform ondersteunt full-stack applicaties direct.

De NameOcean-loadbalancer ontvangt HTTPS op poort 443, beheert de certificaten en stuurt elk verzoek door naar poort 80 van uw server. Uw site aanbieden op poort 80 is alles wat u nodig hebt: geen Certbot, geen SSL-configuratie op de server.

Node.js / Express / Next.js

Laat Claude Code uw Express API of Next.js-app maken. Configureer deze om te luisteren op 127.0.0.1:8000, stel Supervisor in om het proces draaiend te houden (kant-en-klare voorbeelden staan in /root/conf/supervisor.conf) en schakel de reverse proxy in via /root/conf/nginx.conf. Klaar.

Python / Flask / FastAPI / Django

Dezelfde workflow. Uw Python-app luistert op poort 8000, Supervisor beheert het proces en Nginx proxyt de verzoeken. NameOcean levert de nieuwste Python (3.15) via pyenv, een kant-en-klare virtualenv en uv voor snelle installaties.

Go / Rust / Alles

Compileer uw binary, draai deze op poort 8000 en Nginx regelt de rest. Of gebruik Docker als u dat prettiger vindt: Docker en Docker Compose zijn geïnstalleerd en actief.

Andere protocollen

Gameservers, MQTT, WebSockets op een eigen poort: open een TCP- of UDP-poort via het servermenu in het dashboard. NameOcean wijst de externe poort toe en het verkeer gaat rechtstreeks naar uw server. Tot 10 poorten per server.

Uw server legt zichzelf uit aan de AI

Elke server heeft een AGENTS.md (ook gelinkt als CLAUDE.md) in /root. Daarin staat voor Claude Code, Codex of een andere agent hoe de server werkt: waar de app staat, hoe het verkeer binnenkomt, hoe u deployt, processen draait, poorten opent en domeinen koppelt. Voer nameocean-info uit op de server voor actuele gegevens: versies, draaiende services, open poorten en de laatste deploy.

De MCP-integratie: Vibe Hosting op autopilot

Hier is wat het NameOcean + Claude Code combo speciaal maakt: MCP (Model Context Protocol) integratie.

Wanneer je NameOcean als een MCP-server verbindt in Claude Code, kan de AI direct:

• Servers maken en beheren — zet infrastructuur op met één zin
• Domeinen koppelen — met automatische SSL en DNS-configuratie
• Poorten openen/sluiten — voor databases, API's en services
• Code deployen — via git push, geactiveerd vanuit het gesprek
• Serverstatus controleren — controleer je infrastructuur in natuurlijke taal

Dit betekent dat je letterlijk kunt zeggen:

"Create a new Starter server, bind mydomain.com to it, build
a portfolio website with my projects, and deploy it"

En Claude Code regelt alles — van serverprovisioning tot het schrijven van code tot het deployen ervan. De volledige levenscyclus, beheerd via natuurlijke taal. De infrastructuur wordt onzichtbaar.

Real-world voorbeeld: WordGrid landingspagina

Laat ons je door een echt voorbeeld lopen. We hebben de landingspagina voor WordGrid, een Turks woordpuzzelspel, helemaal van nul af aan gebouwd.

Totale tijd: minder dan 10 minuten.

Het resultaat: een volledig responsive, donker thema landingspagina met een geanimeerde heloseectie, App Store- en Google Play-downloadknoppen, functienetwerk, schermafbeeldingengalerij, how-to-play-gids, oproep tot actie-sectie en mobiel-geoptimaliseerde indeling. Allemaal gegenereerd door AI, gedeployed met één push.

Tips voor effectieve Vibe Hosting

$ claude mcp add --transport http nameocean https://nameocean.net/mcp