Kuinka aloittaa Vibe Hosting?
Täydellinen Vibe Coding -opetusohjelma alusta alkaen

Olet todennäköisesti kuullut vibe-koodauksesta — käytännöstä, jossa kuvailla AI:lle, mitä haluat, ja annat sen kirjoittaa koodin sinulle. Mutta tässä on asia, josta kukaan ei puhu: mitä tapahtuu sen jälkeen, kun koodi on kirjoitettu?

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.

Tässä vaiheessa vibe-hosting tulee peliin.

Tässä opetusohjelmassa käydään läpi koko työnkulku nollasta live-verkkosivustoon käyttämällä Claude Codea vibe-koodaukseen ja NameOceania vibe-hostingiin.

Mitä tarvitset

Siinä kaikki. Ei Dockeria. Ei AWS-konsolissa. Ei Terraformia. Ei kyyneleitä.

Lisää NameOceanin MCP-palvelin Claude Codeen yhdellä komennolla. Mitään ei tarvitse ladata: palvelin toimii osoitteessa nameocean.net, ja kirjaudut sisään NameOcean-tililläsi selaimessa.

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

Suorita sitten /mcp Claude Codessa ja valitse nameocean kirjautuaksesi sisään. Claude Desktop, claude.ai, Cursor ja muut asiakasohjelmat yhdistetään samalla tavalla: katso MCP-opas.

Kirjaudu NameOcean-hallintapaneeliin ja luo uusi palvelin. Valitse suunnitelmasi, joka sopii tarpeisiisi:

Saapumissivulle tai pieneen verkkosovellukseen Starter-palvelu riittää enemmän kuin hyvin.

Jos sinulla on verkkotunnus rekisteröity NameOcean:iin (tai siirretty siihen), sen yhdistäminen palvelimeen on yksittäinen toimenpide. Claude Code:n MCP-integraation kautta se on kirjaimellisesti yksi lause:

"Bind mywebsite.com to my Starter server"

Taustalla NameOcean:

1. Päivittää DNS-tietueita osoittamaan palvelimeesi
2. Valmistaa SSL-sertifikaatin automaattisesti Let's Encrypt:in kautta
3. Määrittää kuormantasaimen HTTPS-liikenteen reitittämiseen palvelimeesi

Muutamassa minuutissa verkkotunnuksesi on käytössä ja suojattu HTTPS:llä. Ei Certbot-komentoja, ei Nginx SSL -määrittelyä, ei DNS-levitysarvailuja.

Nyt tulee hauskaa osaa. Avaa projektikansiosi ja käynnistä Claude Code:

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

Sitten vain kuvaile mitä haluat:

"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 luo täydellisen, reagoivan, tuotantovalmiin verkkosivuston. Et kirjoita yhtään koodirivää. Kuvailet vibea, ja tekoäly toimittaa.

Vibe-koodauksen taito

Hyvän vibe-koodauksen salaisuus on olla tarkka mitä haluat, mutta joustava kuinka se toteutetaan:

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

Tässä vibe-hosting loistaa. Jokainen NameOcean-palvelin sisältää sisäänrakennetun git-etäkohteen. Lisää se kerran:

# 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

Siinä se. Koodi laskeutuu /root/app/:iin palvelimella. Nginx on jo määritetty palvelemaan staattisia tiedostoja kyseisestä hakemistosta. Sivustosi on käytössä.

Ei rakennusvaihetta. Ei Docker-kuvaa. Ei käyttöönottopotkulinja. Ei odottamista. Vain git push ja selaimen päivitys.

Ensimmäinen pushisi voi käyttää mitä tahansa haaran nimeä (main, master...); palvelin julkaisee siitä lähtien kyseisen haaran ja paikkamerkkinä toimiva tervetulosivu poistuu. Tarvitsetko build-vaiheen tai uudelleenkäynnistyksen jokaisen julkaisun jälkeen? Lisää projektiisi .nameocean/deploy.sh. Se suoritetaan palvelimella jokaisen pushin jälkeen, ja sen tuloste näkyy suoraan päätteessäsi:

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

Palvelimella suoraan muokatut tiedostot korvataan seuraavalla pushilla, joten säilytä muutoksesi gitissä.

Vibe-koodauksen ja vibe-hostingin todellinen voima on iteraationopeus. Haluatko muuttaa hero-osiota?

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

Sitten ota käyttöön uudelleen:

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

Muutoksesi ovat käytössä sekunneissa. Tämä palautelenkki — kuvaile → luo → ota käyttöön → näe se live — tekee vibe-hostingista muuntavaa. Et vain koodia nopeammin; toimitat nopeammin.

Staattiset sivustot ylittämässä

Vibe-hosting NameOcean:issa ei rajoitu staattiseen HTML:ään. Alusta tukee täysipinoisia sovelluksia heti valmiina.

NameOcean-kuormantasaaja vastaanottaa HTTPS-liikenteen portissa 443, hallitsee varmenteet ja välittää jokaisen pyynnön palvelimesi porttiin 80. Riittää, että sivustosi vastaa portissa 80: et tarvitse Certbotia etkä SSL-määrityksiä palvelimella.

Node.js / Express / Next.js

Pyydä Claude Codea luomaan Express API tai Next.js-sovelluksesi. Määritä se kuuntelemaan osoitetta 127.0.0.1:8000, aseta Supervisor pitämään se käynnissä (valmiita esimerkkejä löytyy tiedostosta /root/conf/supervisor.conf) ja ota käänteinen välityspalvelin käyttöön tiedostossa /root/conf/nginx.conf. Valmis.

Python / Flask / FastAPI / Django

Sama työnkulku. Python-sovelluksesi kuuntelee porttia 8000, Supervisor hallitsee prosessia ja Nginx välittää pyynnöt. NameOceanin mukana tulee uusin Python (3.15) pyenvin kautta, valmis virtualenv ja uv nopeisiin asennuksiin.

Go / Rust / Mikä tahansa

Käännä binäärisi, aja se portissa 8000, ja Nginx hoitaa lopun. Tai käytä Dockeria, jos se on tyylisi: Docker ja Docker Compose on asennettu ja käynnissä.

Muut protokollat

Pelipalvelimet, MQTT, WebSocketit omassa portissaan: avaa TCP- tai UDP-portti palvelimen valikosta hallintapaneelissa. NameOcean määrittää ulkoisen portin, ja liikenne ohjautuu suoraan palvelimellesi. Enintään 10 porttia palvelinta kohden.

Palvelimesi selittää itsensä tekoälylle

Jokaisessa palvelimessa on AGENTS.md (linkitettynä myös nimellä CLAUDE.md) hakemistossa /root. Se kertoo Claude Codelle, Codexille tai muulle agentille, miten palvelin toimii: missä sovellus sijaitsee, miten liikenne saapuu, miten julkaistaan, ajetaan prosesseja, avataan portteja ja liitetään verkkotunnuksia. Suorita palvelimella nameocean-info nähdäksesi ajantasaiset tiedot: versiot, käynnissä olevat palvelut, avoimet portit ja viimeisin julkaisu.

MCP-integraatio: Vibe Hosting täysautomatiikalla

Tässä se, mikä tekee NameOcean + Claude Code -yhdistelmästä erityisen: MCP (Model Context Protocol) -integraatio.

Kun yhdistät NameOceanin MCP-palvelimeksi Claude Codeen, tekoäly voi suoraan:

• Luoda ja hallita palvelimia — käynnistä infrastruktuuri yhdellä lauseella
• Sitoa verkkotunnuksia — automaattisella SSL:llä ja DNS-konfiguraatiolla
• Avata/sulkea portteja — tietokannoille, API:lle ja palveluille
• Ottaa koodia käyttöön — git push:n kautta, keskustelusta laukaistuna
• Tarkistaa palvelimen tilan — valvo infrastruktuuria luonnollisella kielellä

Tämä tarkoittaa, että voit kirjaimellisesti sanoa:

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

Ja Claude Code hoitaa kaiken — palvelimen valmistelusta koodin kirjoittamiseen sen käyttöönottoon. Koko elinkaari hallitaan luonnollisen kielen kautta. Infrastruktuuri muuttuu näkymättömäksi.

Todellinen esimerkki: WordGrid-saapumissivu

Käydään läpi todellinen esimerkki. Rakensimme saapumissivun WordGridille, turkkilaiselle sanapeliä, alusta alkaen.

Kokonaisaika: alle 10 minuuttia.

Tuloksena täysin responsiivinen, tumma saapumissivu animoidulla hero-osiolla, App Store- ja Google Play -lathauspainikkeilla, ominaisuuksien ruudukolla, kuvakaappauste-gallerialla, pelaamisen ohjeella, call-to-action-osiolla ja mobiilioptimoidulla asettelulla. Kaikki tekoälyn luoma, käyttöön otettu yhdellä push:lla.

Vinkkejä tehokkaaseen Vibe Hostingiin

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