Vous avez probablement entendu parler de la programmation vibe — la pratique de décrire ce que vous voulez à une IA et la laisser écrire le code pour vous. Mais voici la chose dont personne ne parle : qu'est-ce qui se passe après que le code soit écrit ?
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.
C'est là que l'hébergement vibe intervient.
Vibe hosting c'est déployer votre code de la même manière que vous l'avez écrit — sans effort, sans friction, sans maux de tête de configuration, et sans diplôme en DevOps requis. Vous faites git push, et votre site est en direct. SSL ? Automatique. DNS ? Géré. Configuration du serveur ? Déjà fait.
Dans ce tutoriel, nous allons vous guider dans le flux de travail complet de zéro à un site web en direct en utilisant Claude Code pour la programmation vibe et NameOcean pour l'hébergement vibe.
Ce dont vous aurez besoin
C'est tout. Pas de Docker. Pas de console AWS. Pas de Terraform. Pas de larmes.
Connecter Claude Code à NameOcean
Ajoutez le serveur MCP de NameOcean à Claude Code en une seule commande. Rien à télécharger : il fonctionne sur nameocean.net, et vous vous connectez avec votre compte NameOcean dans le navigateur.
$ claude mcp add --transport http nameocean https://nameocean.net/mcpExécutez ensuite /mcp dans Claude Code et choisissez nameocean pour vous connecter. Claude Desktop, claude.ai, Cursor et les autres clients se connectent de la même manière : consultez le guide MCP.
Vous n'avez pas encore de compte ? Inscrivez-vous sur nameocean.net d'abord. Pour connecter une application, la connexion en deux étapes doit être activée sur votre compte.
Créer un serveur sur NameOcean
Connectez-vous à votre tableau de bord NameOcean et créez un nouveau serveur. Choisissez le plan qui correspond à vos besoins :
| Plan | CPU | RAM | Disque | Idéal pour |
|---|---|---|---|---|
| Starter 5 $/mois | 3 | 3 GB | 30 GB | Pages d'accueil, petites applications |
| Growth 8 $/mois | 5 | 5 GB | 50 GB | Applications web en production |
Pour une page d'accueil ou une petite application web, le plan Starter est plus que suffisant.
Chaque serveur NameOcean fonctionne sous Rocky Linux 10 et est livré avec Python 3.15 (pyenv + uv), Node.js 22, Go 1.26, Nginx, PostgreSQL 16, Valkey (compatible Redis), Docker avec Compose, Supervisor et Git — tout est préconfiguré et prêt à l'emploi. Aucune installation requise.
Liez Votre Domaine
Si vous avez un domaine enregistré sur NameOcean (ou transféré vers celui-ci), le lier à votre serveur est une action unique. Grâce à l'intégration MCP de Claude Code, c'est littéralement une phrase :
"Bind mywebsite.com to my Starter server"En coulisse, NameOcean :
- Met à jour les enregistrements DNS pour pointer vers votre serveur
- Provisionne automatiquement un certificat SSL via Let's Encrypt
- Configure l'équilibreur de charge pour router le trafic HTTPS vers votre serveur
En quelques minutes, votre domaine est en ligne et sécurisé avec HTTPS. Pas de commandes Certbot, pas de configuration SSL Nginx, pas de jeux de devinettes sur la propagation DNS.
Codez Votre Site Web par Vibes
Maintenant pour la partie amusante. Ouvrez le répertoire de votre projet et lancez Claude Code :
mkdir my-awesome-site && cd my-awesome-site
git init
claudeDécrivez simplement ce que vous voulez :
"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 créera un site web complet, réactif et prêt pour la production. Vous n'écrivez pas une seule ligne de code. Vous décrivez la vibe, et l'IA livre le résultat.
L'Art du Vibe Coding
La clé du bon vibe coding est d'être spécifique sur ce que vous voulez mais flexible sur comment c'est implémenté :
Le contenu et la copie (surtout dans des langues spécifiques), les couleurs de marque et l'identité visuelle, les fonctionnalités et sections que vous voulez, l'audience cible et le ton.
L'architecture CSS, les détails des animations, la structure des composants, les points d'arrêt réactifs, le choix des icônes et les micro-interactions.
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."
Déployez avec Git Push
C'est là que le vibe hosting brille. Chaque serveur NameOcean est livré avec une télécommande git intégrée. Ajoutez-la une fois :
# 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 mainC'est tout. Votre code atterrit dans /root/app/ sur le serveur. Nginx est déjà configuré pour servir les fichiers statiques depuis ce répertoire. Votre site est en ligne.
Pas d'étape de build. Pas d'image Docker. Pas de pipeline de déploiement. Pas d'attente. Juste git push et actualisez votre navigateur.
Votre premier push peut utiliser n'importe quel nom de branche (main, master...) ; le serveur déploie ensuite cette branche et la page d'accueil provisoire disparaît. Besoin d'une étape de build ou d'un redémarrage après chaque déploiement ? Ajoutez .nameocean/deploy.sh à votre projet. Il s'exécute sur le serveur après chaque push et sa sortie s'affiche directement dans votre terminal :
#!/bin/bash
set -e
npm ci
npm run build
supervisorctl restart appLes fichiers modifiés directement sur le serveur sont remplacés par le prochain push, conservez donc vos modifications dans git.
Itérez avec les Vibes
Le vrai pouvoir du vibe coding + vibe hosting est la vitesse d'itération. Vous voulez changer la section hero ?
"Make the hero headline bigger and add a floating animation to the phone mockup"Puis déployez à nouveau :
git add . && git commit -m "Bigger hero headline + animation" && git push nameocean mainVos modifications sont en ligne en secondes. Cette boucle de rétroaction — décrire → générer → déployer → voir en direct — est ce qui rend le vibe hosting transformateur. Vous ne codez pas juste plus vite ; vous livrez plus vite.
Au-delà des Sites Statiques
Le vibe hosting sur NameOcean n'est pas limité au HTML statique. La plateforme supporte les applications full-stack directement.
ARCHITECTURE DU SERVEUR
Le load balancer NameOcean reçoit le trafic HTTPS sur le port 443, gère les certificats et transmet chaque requête au port 80 de votre serveur. Il vous suffit de servir votre site sur le port 80 : pas de Certbot, pas de configuration SSL sur le serveur.
Node.js / Express / Next.js
Demandez à Claude Code de créer votre API Express ou votre application Next.js. Configurez-la pour qu'elle écoute sur 127.0.0.1:8000, paramétrez Supervisor pour la maintenir en fonctionnement (des exemples prêts à l'emploi se trouvent dans /root/conf/supervisor.conf) et activez le reverse proxy dans /root/conf/nginx.conf. C'est terminé.
Python / Flask / FastAPI / Django
Même méthode. Votre application Python écoute sur le port 8000, Supervisor gère le processus, Nginx relaie les requêtes. NameOcean fournit la dernière version de Python (3.15) via pyenv, un virtualenv prêt à l'emploi et uv pour des installations rapides.
Go / Rust / N'importe quoi
Compilez votre binaire, lancez-le sur le port 8000, et Nginx s'occupe du reste. Ou utilisez Docker si vous préférez : Docker et Docker Compose sont installés et en cours d'exécution.
Autres protocoles
Serveurs de jeu, MQTT, WebSockets sur leur propre port : ouvrez un port TCP ou UDP depuis le menu du serveur dans le tableau de bord. NameOcean attribue le port externe et le trafic arrive directement sur votre serveur. Jusqu'à 10 ports par serveur.
Votre serveur s'explique à l'IA
Chaque serveur possède un fichier AGENTS.md (aussi lié en tant que CLAUDE.md) dans /root. Il indique à Claude Code, Codex ou à tout autre agent comment fonctionne le serveur : où se trouve l'application, comment arrive le trafic, comment déployer, lancer des processus, ouvrir des ports et lier des domaines. Exécutez nameocean-info sur le serveur pour obtenir les informations en direct : versions, services en cours, ports ouverts et dernier déploiement.
L'intégration MCP : L'hébergement Vibe en pilotage automatique
Voici ce qui rend le combo NameOcean + Claude Code spécial : l'intégration MCP (Model Context Protocol).
Quand vous connectez NameOcean comme serveur MCP dans Claude Code, l'IA peut directement :
- Créer et gérer des serveurs — lancer de l'infrastructure avec une phrase
- Lier des domaines — avec SSL et configuration DNS automatiques
- Ouvrir/fermer des ports — pour les bases de données, APIs et services
- Déployer du code — via git push, déclenché par la conversation
- Vérifier le statut du serveur — surveiller votre infrastructure en langage naturel
Cela signifie que vous pouvez littéralement dire :
"Create a new Starter server, bind mydomain.com to it, build
a portfolio website with my projects, and deploy it"Et Claude Code gère tout — de l'approvisionnement du serveur à l'écriture du code jusqu'au déploiement. Tout le cycle de vie, géré via le langage naturel. L'infrastructure devient invisible.
Exemple concret : page d'accueil WordGrid
Laissez-nous vous montrer un vrai exemple. Nous avons construit la page d'accueil pour WordGrid, un jeu de puzzle de mots turc, à partir de zéro.
Temps total : moins de 10 minutes.
| Étape | Action | Temps |
|---|---|---|
| 1 | Créé un serveur Starter sur NameOcean | ~30 secondes |
| 2 | Lié wordgridoyna.com — DNS + SSL automatiques | ~10 secondes |
| 3 | Décrit la page d'accueil à Claude Code | ~3 minutes |
| 4 | git push nameocean main | ~5 secondes |
| 5 | Site en ligne sur https://wordgridoyna.com | Instantané ✨ |
Le résultat : une page d'accueil entièrement responsive au thème sombre avec une section hero animée, des boutons de téléchargement App Store et Google Play, grille de fonctionnalités, galerie de captures d'écran, guide comment jouer, section d'appel à l'action, et mise en page optimisée pour mobile. Tout généré par l'IA, déployé avec un simple push.
Conseils pour un hébergement Vibe efficace
Commencez simplement, itérez rapidement
Ne décrivez pas toute votre app en un seul prompt. Commencez par la structure, puis ajoutez des fonctionnalités. Chaque itération est un git push loin d'être en ligne.
Utilisez la bonne taille de serveur
Ne surprovisionnez pas. Un serveur Starter gère la plupart des pages d'accueil et petites apps. N'augmentez que si nécessaire.
Gardez l'historique Git propre
Même avec le vibe coding, maintenez de bons messages de commit. Quand vous devez revenir en arrière, git revert fonctionne toujours.
Exploitez la pile préinstallée
Node, Python, Go, PostgreSQL, Valkey, Docker -- tout est là. Exécutez nameocean-info pour voir les versions exactes et utilisez ce qui est déjà disponible.
Utilisez Supervisor pour les processus
Vous lancez Node.js ou Python ? Utilisez toujours Supervisor. Il redémarre automatiquement en cas de crash et démarre au redémarrage du serveur.
Faites confiance à l'IA, guidez le vibe
Soyez précis sur le quoi, flexible sur le comment. L'IA gère les détails d'implémentation -- vous vous concentrez sur la vision.
Le manifeste de l'hébergement Vibe
Quand l'écart entre une idée et un site web en ligne se mesure en minutes au lieu d'heures, tout change. Les projets annexes se lancent. Les MVPs atteignent les clients dans l'après-midi. La dette technique due à une infrastructure complexe disparaît simplement.
Le meilleur déploiement est celui auquel vous ne devez pas penser.
git push, et c'est en ligne. C'est le vibe.
Prêt à commencer l'hébergement Vibe ?
Votre prochain projet est à une conversation de devenir en ligne.
git pushConnectez vos serveurs à Claude Code
$ claude mcp add --transport http nameocean https://nameocean.net/mcp