Z VibeCoding Festivalu 2026 · samostudijní · 60 min

Z písku do reality

Máš rozjetý web v Lovable nebo Boltu? Za hodinu ho dostaneš na veřejnou adresu, na kterou pošleš kohokoli - kód v Claude Code, historie na GitHubu, nasazení přes Vercel. Vlastním tempem, krok po kroku.

Tohle jsem naživo odučil na VibeCoding Festivalu v Ostravě. Teď si to projdeš sám, vlastním tempem - otevři na notebooku a jdi krok za krokem.

Claude Code GitHub Vercel
Co si odneseš
  • Vlastní web živě na internetu - adresa, kterou hned pošleš komukoli.
  • Co je Git a proč ho mít - bez biflování příkazů nazpaměť
  • Jak na vlastní doménu a nasazení přes Vercel
  • Když se to rozbije: čtení chyb a oprava
  • Postup, který použiješ na každý další projekt
Bez čeho to nepůjde
  • Vlastní notebook. Bez něj se tu nic neudělá.
  • Aktivní předplatné Claude (Pro nebo Max), nebo API kredit s kartou. Bez něj se Claude Code po přihlášení nerozjede - vyřeš to předem.
Jak na to

Jdi krok po kroku shora dolů. Každý příkaz v tmavém rámečku má tlačítko Kopírovat. Na počítači si hotové kroky odškrtáváš v panelu vlevo, stav se uloží v prohlížeči.

Kroky 1 a 2 (účty a instalace) si vyřeš jako první - pak jdeme rovnou na tvorbu webu (krok 3). Hlavní cíl: web na veřejné adrese (konec kroku 5). Co je dál, je navíc. Nežeň se tempem, každý jede svým.

Krok 1 · Než začneš · vyřeš předem

Co mít připravené

Tohle ideálně vyřeš ještě před workshopem. Na místě nebude čas čekat na instalace a přihlašování - rozjedeme se rovnou.

Účty zdarma
  • GitHub (zdarma) - kde bude bezpečně uložený tvůj kód. Založ na github.com.
  • Vercel (zdarma) - kam web nasadíš. Na vercel.com se přihlas přes GitHub, propojí se to samo.

Claude Code je placený. Potřebuje aktivní předplatné Claude (Pro nebo Max), nebo API kredit s platební kartou. Účet zdarma ho po přihlášení nerozjede.

Neznáš terminál? Začni tady

Terminál je okno, kam píšeš příkazy textem místo klikání. Vypadá to děsivě, ale ty jen zkopíruješ příkaz a zmáčkneš Enter. Jak ho otevřít:

  • Mac: zmáčkni Cmd + mezerník, napiš Terminal, Enter.
  • Windows: zmáčkni klávesu Win, napiš PowerShell, Enter. (Ne "cmd".)
Nainstaluj Claude Code

Nejjednodušší je oficiální instalátor - nepotřebuje nic dalšího. Spusť v terminálu podle svého systému:

Windows · PowerShell
irm https://claude.ai/install.ps1 | iex
Mac / Linux
curl -fsSL https://claude.ai/install.sh | bash

Pak zavři a znovu otevři terminál, napiš claude a přihlas se - účtem s Pro nebo Max (účet zdarma Claude Code nespustí). Návod: docs.claude.com.

Node.js a Git

Node.js (verze LTS) z nodejs.org - potřebuje ho Vercel CLI z kroku 2, který se instaluje přes npm.

Git - na Windows nainstaluj Git for Windows z git-scm.com. Na Macu se nabídne sám, až ho poprvé použiješ. Potřebuje ho Claude Code i příkazy v kroku 4.

Řekni Gitu, kdo jsi. Na čerstvé instalaci to nastav jednou - jinak první commit spadne s hláškou, že neví, kdo jsi:

Terminál
git config --global user.name "Tvé jméno"
git config --global user.email "tvuj@email.cz"

Když commit dělá Claude Code, klidně mu řekni, ať to nastaví za tebe.

Než vyrazíš - rychlý test

V terminálu spusť tohle. U všech tří ti má vypsat číslo verze:

Terminál
node --version
git --version
claude --version

Kdykoli Windows hlásí chybu o execution policy nebo "running scripts is disabled", spusť jednou Set-ExecutionPolicy -Scope CurrentUser RemoteSigned a zkus to znovu. Když příkaz hned po instalaci "není nalezen", zavři a otevři terminál znovu.

Krok 2 · Nainstaluj nástroje

Dva pomocníci: gh a vercel

GitHub CLI (gh) a Vercel CLI (vercel) jsou příkazy, přes které pošleš kód na GitHub a nasadíš web na Vercel. Nainstaluješ je ty v terminálu - potom je Claude Code umí spouštět za tebe. Použiješ je až v kroku 4 a 5, ale nainstaluj a přihlas je teď (ideálně ještě před workshopem), ať pak nasazení běží bez zdržení.

Vercel CLI - všude stejně
Terminál
npm i -g vercel
GitHub CLI - podle systému
macOS
brew install gh
Windows
winget install -e --id GitHub.cli

Linux a další možnosti: cli.github.com

Ověř, že jsou nainstalované
Terminál
gh --version
vercel --version

U obou ti má vypsat číslo verze. Rada: hned po instalaci zavři a znovu otevři terminál, jinak nově přidaný příkaz nemusí jít najít.

Přihlas se - každý příkaz zvlášť

Tyhle spouštěj po jednom, ne najednou - jsou interaktivní a otevřou prohlížeč. Nejdřív GitHub:

Terminál
gh auth login

U všech otázek stačí výchozí volby (stačí Enter). Když je hotovo, přihlas Vercel:

Terminál
vercel login

Když ti po instalaci nějaký příkaz nejde najít nebo hlásí chybu, zkopíruj ji do Claude Code a nech si poradit. Spouštět hotové příkazy (commit, push, nasazení) pak nech klidně na něm.

Krok 3 · Web v Claude Code

Vytvoř landing page

Otevři terminál (jak na to je v Kroku 1) a spusť claude (poprvé tě vyzve k přihlášení - viz krok 1). Nemusíš umět kódovat - všechno popíšeš slovy a Claude Code to napíše.

Nejdřív si založ složku

Web potřebuje vlastní prázdnou složku, ať se ti soubory nemíchají. Nech to udělat Claude Code - jako úplně první mu napiš: "založ novou prázdnou složku muj-web a všechno dělej v ní". Claude Code složku vytvoří a sám se do ní přepne. Pak teprve posílej zadání na web.

Prompt do Claude Code 
Vytvoř jednoduchou landing page jako jeden soubor index.html.
Téma: [tvůj projekt, tvoje jméno, co nabízíš].
Sekce: úvod s nadpisem a jednou větou, tři výhody, kontakt.
Čistý moderní vzhled, vše v jednom souboru, bez externích závislostí.
Mrkni se na výsledek

Řekni Claude Code: "spusť to lokálně, ať se na to kouknu", nebo si soubor index.html otevři rovnou v prohlížeči. Líbí se ti to? Pošli další zadání: "změň barvy na tmavé", "přidej sekci s cenami". Lad to ale teď jen lehce - hlavní cíl je dostat web ven. Doladíš ho potom, nasazení je pak otázka jednoho příkazu.

Hranaté závorky [...] nahraď svým obsahem. Čím konkrétnější zadání, tím lepší výsledek.

Krok 4 · Kód na GitHub

Git bez paniky

Git je historie tvého projektu. Zní to složitě, ve skutečnosti jsou to dva pojmy.

commit

Ulož snímek toho, jak projekt teď vypadá. Něco jako "uložit pozici" ve hře. Můžeš se k němu kdykoli vrátit.

push

Pošli snímky na GitHub. Tam jsou bezpečně mimo tvůj notebook a dají se sdílet. GitHub je domov tvého kódu.

Nech to udělat Claude Code

Nemusíš si pamatovat žádné příkazy. V Claude Code napiš:

Prompt do Claude Code
Z téhle složky založ git repozitář, udělej první commit
a nahraj to na můj GitHub jako nový veřejný repozitář.

Claude Code za tebe spustí git i gh a vrátí ti odkaz na repozitář.

Co Claude Code spustí pod kapotou
Terminál
git init
git add .
git commit -m "první verze"
gh repo create muj-web --public --source=. --push

Nemusíš to psát ručně - je to tu, abys viděl, co se reálně děje. Žádná magie.

Krok 5 · Nasazení na Vercel

Web venku za pár sekund

Teď to nejlepší. Ve stejné složce spustíš jeden příkaz a tvůj web je na veřejné adrese.

Proč GitHub i Vercel

GitHub je domov a historie tvého kódu. Vercel je nasazení - vezme kód a udělá z něj živý web. GitHub z kroku 4 přitom mít nemusíš, vercel nasadí web rovnou z tvé složky. Nejdřív ho tak nasadíme příkazem vercel, pak ho propojíš s GitHubem (rámeček níž), aby se po každém nahrání web sám přenasadil.

Nasazení
Terminál
vercel

Vercel se poprvé zeptá na pár věcí - skoro u všech stačí Enter, jen u otázky "Link to existing project?" napiš No (rozpis níž). Pak projekt nahraje a vrátí ti veřejnou adresu typu tvuj-web.vercel.app. Otevři ji, pošli ji komukoli. Web je venku. Když si u některé otázky nejsi jistý, zkopíruj ji do Claude Code.

Na co se vercel poprvé zeptá
  • Set up and deploy? - Enter (Yes).
  • Which scope? - vyber svůj účet, Enter.
  • Link to existing project? - napiš No.
  • What's your project's name? - Enter (nech výchozí).
  • In which directory is your code located? - Enter (./).
  • Want to modify these settings? - Enter (No).
Až budeš spokojený - ostrá verze
Terminál
vercel --prod

Nebo zase nech Claude Code: "nasaď tohle na Vercel do produkce".

Bonus - propoj GitHub a Vercel

Aby ses příště nemusel starat o příkazy vůbec, propoj svůj projekt s GitHubem jedním příkazem:

Terminál
vercel git connect

Spusť ve stejné složce - propojí tvůj stávající Vercel projekt s GitHub repem z kroku 4. Od té chvíle stačí nahrát změnu na GitHub a web se přenasadí sám. Žádný druhý projekt nezakládáš, je to pořád ten samý web.

Tohle je ta "magie", co dělá z GitHubu a Vercelu jeden hladký postup.

Tohle je ten moment, kvůli kterému tu jsi. Před chvílí to byl soubor na tvém notebooku. Teď to má adresu, na kterou se dostane celý svět.

Spadlo ti nasazení? To je normální - jak chybu přečíst a opravit je hned v dalším kroku.

Krok 6 · Když se to rozbije

Chyba není konec

Něco spadne skoro vždycky. To k tomu patří. Rozdíl není v tom, jestli děláš chyby, ale jestli je umíš rychle přečíst a opravit.

Smyčka, kterou si zapamatuj
  1. Přečti chybu. Když nasazení selže, Vercel ukáže záznam s chybovou hláškou. Nezavírej to.
  2. Zkopíruj ji celou do Claude Code a napiš: "tohle mi spadlo při nasazení, najdi příčinu a oprav to".
  3. Claude Code opraví a vysvětlí, co bylo špatně.
  4. Nasaď znovu - commit, push, vercel. Někdy to chce dvě až tři kola. To je normální.

Chyba → zkopíruj → Claude Code opraví → nasaď znovu. Tahle smyčka tě dostane z 90 % problémů.

Krok 7 · Vlastní doména · bonus

Z vercel.app na vlastní adresu

Adresa .vercel.app je skvělá na test. Vlastní doména ale vypadá profesionálně a líp se pamatuje.

Tohle chvíli trvá

Nákup domény a hlavně rozjezd DNS chvíli trvají, klidně i pár hodin. Stačí vědět, jak na to - dotáhneš to v klidu, až budeš mít čas.

Postup
  1. Pořiď doménu. Koupíš ji rovnou ve Vercelu, nebo u jakéhokoli registrátora domén.
  2. Přidej ji k projektu. Ve Vercelu: projekt → Settings → Domains → vlož svoji doménu.
  3. Nastav DNS. Vercel ti přesně řekne, co doplnit u registrátora (jeden záznam). U domén koupených přes Vercel se to nastaví samo.
  4. Hotovo. Za chvíli web běží na tvojí adrese - s HTTPS (zámeček v prohlížeči) zdarma.

Nevíš si rady s DNS? Zkopíruj, co ti Vercel ukáže, do Claude Code a nech si vysvětlit, kam to patří.

Krok 8 · Databáze a server · jen pro inspiraci

Když budeš chtít víc

Tohle dneska neděláme - jen ať víš, kam vede cesta dál. Landing page je statická, jen ji ukazuješ. Jakmile budeš chtít přihlašování, ukládat data nebo formuláře, které někam zapisují, postup zůstane stejný. Jen přibydou dílky.

Server

Vercel umí spouštět serverový kód (funkce) ve stejném projektu. Žádný počítač navíc - napíšeš funkci, nasadíš ji společně s webem.

Databáze

Přes Vercel Marketplace přidáš databázi na pár kliknutí (třeba Neon pro Postgres nebo Upstash pro Redis). Přístupové údaje Vercel doplní do projektu sám.

Dneska to ale neřešíme - tohle je jen směr, kam jít dál.

Krok 9 · Postup, co zůstane

Tohle není jednorázový trik

Cyklus, kterým jsi právě prošel, použiješ na každý další projekt. Pořád dokola, ať děláš cokoli.

Claude Code napíšeš → GitHub uložíš → Vercel nasadíš → oprav → nasaď znovu

Pro koho to je

Tenhle workshop je schválně mířený na lidi, co už něco zkusili v Lovable nebo Boltu a chtějí to dostat ven do světa.

Na zelené louce to zvládne každý. Tohle byl první krok ven - z písku do reality.