Wie starten Sie mit Vibe Hosting?
Ein komplettes Vibe Coding Tutorial von Anfang an

Du hast wahrscheinlich schon von Vibe Coding gehört — der Praxis, einem KI-System zu beschreiben, was du möchtest, und es den Code für dich schreiben zu lassen. Aber hier ist das, worüber niemand spricht: Was passiert nachdem der Code geschrieben ist?

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.

Da kommt Vibe Hosting ins Spiel.

In diesem Tutorial gehen wir durch den kompletten Workflow von Null bis zu einer live Website mit Claude Code für Vibe Coding und NameOcean für Vibe Hosting.

Was du brauchst

Das war's. Kein Docker. Keine AWS-Konsole. Kein Terraform. Keine Tränen.

Fügen Sie den NameOcean MCP-Server mit einem einzigen Befehl zu Claude Code hinzu. Sie müssen nichts herunterladen: Er läuft auf nameocean.net, und Sie melden sich im Browser mit Ihrem NameOcean-Konto an.

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

Führen Sie anschließend /mcp in Claude Code aus und wählen Sie nameocean, um sich anzumelden. Claude Desktop, claude.ai, Cursor und andere Clients verbinden sich auf die gleiche Weise: siehe die MCP-Anleitung.

Melde dich in deinem NameOcean Dashboard an und erstelle einen neuen Server. Wähle den Plan, der zu deinen Anforderungen passt:

Für eine Landing Page oder eine kleine Web-App ist der Starter-Plan mehr als ausreichend.

Wenn Sie eine Domain bei NameOcean registriert haben (oder dorthin transferiert haben), ist das Verbinden mit Ihrem Server eine einzige Aktion. Durch die MCP-Integration von Claude Code ist es buchstäblich ein Satz:

"Bind mywebsite.com to my Starter server"

Im Hintergrund führt NameOcean folgende Aktionen durch:

1. Aktualisiert DNS-Einträge, um auf Ihren Server zu verweisen
2. Stellt automatisch ein SSL-Zertifikat über Let's Encrypt bereit
3. Konfiguriert den Load Balancer, um HTTPS-Traffic an Ihren Server weiterzuleiten

Innerhalb weniger Minuten ist Ihre Domain live und mit HTTPS gesichert. Keine Certbot-Befehle, keine Nginx-SSL-Konfiguration, keine DNS-Propagierungsspiele.

Jetzt zum spaßigen Teil. Öffnen Sie Ihr Projektverzeichnis und starten Sie Claude Code:

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

Beschreiben Sie dann einfach, was Sie möchten:

"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 erstellt eine vollständige, responsive, produktionsreife Website. Sie schreiben keine einzige Zeile Code. Sie beschreiben den Vibe, und die KI liefert.

Die Kunst des Vibe Coding

Der Schlüssel zum erfolgreichen Vibe Coding ist, spezifisch zu sein über was Sie möchten, aber flexibel über wie es umgesetzt wird:

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."

Hier glänzt Vibe Hosting. Jeder NameOcean-Server wird mit einem integrierten Git Remote geliefert. Fügen Sie ihn einmalig hinzu:

# 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

Das war's. Ihr Code landet in /root/app/ auf dem Server. Nginx ist bereits so konfiguriert, dass statische Dateien aus diesem Verzeichnis bereitgestellt werden. Ihre Website ist live.

Kein Build-Schritt. Kein Docker-Image. Keine Deployment-Pipeline. Kein Warten. Einfach git push und Browser aktualisieren.

Ihr erster Push kann unter einem beliebigen Branch-Namen erfolgen (main, master...); der Server verwendet diesen Branch ab da an für Deployments und die Platzhalter-Startseite verschwindet. Benötigen Sie einen Build-Schritt oder einen Neustart nach jedem Deploy? Fügen Sie .nameocean/deploy.sh zu Ihrem Projekt hinzu. Das Skript wird auf dem Server nach jedem Push ausgeführt und seine Ausgabe erscheint direkt in Ihrem Terminal:

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

Direkt auf dem Server bearbeitete Dateien werden beim nächsten Push ersetzt. Halten Sie Ihre Änderungen daher in git fest.

Die echte Stärke von Vibe Coding + Vibe Hosting ist die Iterationsgeschwindigkeit. Möchten Sie den Hero-Bereich ändern?

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

Dann stellen Sie erneut bereit:

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

Ihre Änderungen sind in Sekunden live. Diese Feedback-Schleife — beschreiben → generieren → bereitstellen → live sehen — macht Vibe Hosting transformativ. Sie codieren nicht nur schneller; Sie versenden schneller.

Über statische Seiten hinaus

Vibe Hosting auf NameOcean ist nicht auf statisches HTML beschränkt. Die Plattform unterstützt Full-Stack-Anwendungen sofort.

Der NameOcean-Load-Balancer empfängt HTTPS-Verkehr über Port 443, speichert die Zertifikate und leitet jede Anfrage an Port 80 Ihres Servers weiter. Wenn Sie Ihre Website auf Port 80 bereitstellen, ist das alles, was Sie brauchen: kein Certbot, keine SSL-Konfiguration auf dem Server.

Node.js / Express / Next.js

Weisen Sie Claude Code an, Ihre Express-API oder Next.js-App zu erstellen. Konfigurieren Sie sie so, dass sie auf 127.0.0.1:8000 lauscht, richten Sie Supervisor so ein, dass die App weiterläuft (vorkonfigurierte Beispiele finden Sie in /root/conf/supervisor.conf), und aktivieren Sie den Reverse Proxy in /root/conf/nginx.conf. Fertig.

Python / Flask / FastAPI / Django

Derselbe Ablauf. Ihre Python-App lauscht auf Port 8000, Supervisor verwaltet den Prozess, Nginx leitet die Anfragen weiter. NameOcean wird mit der neuesten Python-Version (3.15) via pyenv, einem fertigen virtualenv und uv für schnelle Installationen ausgeliefert.

Go / Rust / Alles

Kompilieren Sie Ihre Binärdatei, führen Sie sie auf Port 8000 aus, und Nginx übernimmt den Rest. Oder verwenden Sie Docker, wenn Ihnen das entspricht: Docker und Docker Compose sind installiert und laufen.

Andere Protokolle

Game-Server, MQTT, WebSockets auf einem eigenen Port: Öffnen Sie im Server-Menü im Dashboard einen TCP- oder UDP-Port. NameOcean weist den externen Port zu und der Datenverkehr wird direkt an Ihren Server weitergeleitet. Bis zu 10 Ports pro Server.

Ihr Server erklärt sich selbst der KI

Jeder Server verfügt in /root über die Datei AGENTS.md (auch als CLAUDE.md verlinkt). Sie teilt Claude Code, Codex oder jedem anderen Agenten mit, wie der Server funktioniert: wo die App liegt, wie der Datenverkehr ankommt, wie Sie deployen, Prozesse ausführen, Ports öffnen und Domains binden. Führen Sie nameocean-info auf dem Server aus, um die Live-Informationen abzurufen: Versionen, laufende Dienste, offene Ports und das letzte Deployment.

Die MCP-Integration: Vibe Hosting im Autopilot

Hier ist, was die NameOcean + Claude Code Kombination besonders macht: MCP (Model Context Protocol) Integration.

Wenn du NameOcean als MCP-Server in Claude Code verbindest, kann die KI direkt:

• Server erstellen und verwalten — Infrastruktur mit einem Satz aufbauen
• Domains binden — mit automatischer SSL und DNS-Konfiguration
• Ports öffnen/schließen — für Datenbanken, APIs und Services
• Code deployen — via git push, ausgelöst aus dem Gespräch
• Server-Status prüfen — deine Infrastruktur in natürlicher Sprache überwachen

Das bedeutet, du kannst einfach sagen:

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

Und Claude Code kümmert sich um alles — von der Server-Bereitstellung über das Schreiben des Codes bis zum Deployment. Der gesamte Lebenszyklus, gesteuert durch natürliche Sprache. Die Infrastruktur wird unsichtbar.

Echtes Beispiel: WordGrid Landing Page

Lass uns dich durch ein echtes Beispiel führen. Wir haben die Landing Page für WordGrid, ein türkisches Wortpuzzle-Spiel, von Grund auf gebaut.

Gesamtzeit: unter 10 Minuten.

Das Ergebnis: eine vollständig responsive, dunkel gestaltete Landing Page mit animiertem Hero-Bereich, App Store und Google Play Download-Buttons, Features Grid, Screenshot-Galerie, Spielanleitung, Call-to-Action-Bereich und mobil-optimiertes Layout. Alles von KI generiert und mit einem einzigen Push deployed.

Tipps für effektives Vibe Hosting

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