Jak nasadit web zdarma

Máš hotový projekt. Na tvém počítači běží, vypadá dobře, funguje. A přesto ho nikdo nikdy neuvidí, protože poslední krok, dostat ho na internet, vypadá jako úplně jiná disciplína.

Není. Za dvacet minut můžeš mít živou adresu a nezaplatíš za to nic. Projdeme si to od začátku a nebudu ti zamlčovat místa, kde se to obvykle zadrhne.

Co potřebuješ mít připravené#

Než začneš, tři věci:

• Projekt, který se dá spustit z čisté složky. To znamená: naklonuješ ho jinam, spustíš instalaci závislostí, spustíš build a projde to.
• Účet na GitHubu. Zdarma. Nasazení se odvíjí od repozitáře, ne od tvého disku.
• Účet u hostingu. Pro statické weby a Next.js projekty je nejjednodušší Vercel nebo Netlify, oba mají bezplatnou úroveň pro osobní projekty. Pro čistě statický výstup funguje i GitHub Pages nebo Cloudflare Pages.

Krok 1: ověř build na svém počítači#

Tohle je krok, který devadesát procent lidí přeskočí a pak deset minut kouká na červený log. Vývojový režim a produkční build nejsou totéž. Vývoj odpouští chyby, které build nepustí.

npm install
npm run build

Když build projde, jdi dál. Když ne, oprav to teď. Chyba, kterou vidíš tady, je ta samá chyba, kterou uvidíš na serveru, jenom tady ji vyřešíš rychleji.

Nejčastější zádrhely v tomhle kroku:

• Nepoužitá proměnná nebo import, které vývojový režim toleruje a build ne.
• Chybějící typ v TypeScriptu, který jsi „vyřešil" tím, že ses na varování vykašlal.
• Soubor, který máš na disku, ale není v gitu. O tom je celý další krok.

Krok 2: dostaň to na GitHub#

git init
git add .
git commit -m "prvni verze"

Teď důležitá pauza. Než něco odešleš, zkontroluj, co odesíláš:

git status

V seznamu nesmí být .env, .env.local, složka node_modules ani nic, co obsahuje klíče, hesla nebo tokeny. Když tam takový soubor je, přidej ho do .gitignore a odeber z indexu:

echo ".env.local" >> .gitignore
git rm --cached .env.local
git commit -m "vyradit lokalni promenne z gitu"

Klíč, který jednou pošleš do veřejného repozitáře, je prozrazený navždy, i když ho hned smažeš. Historie zůstává. Jediná správná reakce je vygenerovat nový a starý zneplatnit.

Pak založ prázdný repozitář na GitHubu a připoj ho:

git remote add origin https://github.com/tvoje-jmeno/tvuj-projekt.git
git branch -M main
git push -u origin main

Krok 3: propoj repozitář s hostingem#

U Vercelu i Netlify je to stejný postup: přihlásíš se GitHub účtem, dáš import projektu, vybereš repozitář. Framework většinou pozná sám a předvyplní příkaz pro build i výstupní složku.

Zkontroluj dvě políčka:

• Build command. Obvykle npm run build.
• Output directory. Pro Next.js to hosting řeší sám, pro statické generátory to bývá dist nebo out.

Potvrdíš a čekáš. První sestavení trvá déle než ta další, protože se stahují všechny závislosti. Až doběhne, dostaneš adresu. Klikni na ni.

Krok 4: proměnné prostředí#

Tady to spadne nejčastěji. Lokálně máš .env.local s klíči k API. Do gitu jsi ho správně neposlal. A server o něm proto neví.

Ve správě projektu na hostingu najdi sekci Environment Variables a naklikej tam totéž, co máš lokálně. Pak spusť sestavení znovu, protože proměnné se načítají při buildu, ne za běhu.

Pozor na jednu věc: proměnná s prefixem NEXT_PUBLIC_ se dostane do kódu, který běží v prohlížeči. To znamená, že ji uvidí každý návštěvník. Nikdy tam nedávej nic tajného.

Co se pokazí a jak to poznat#

Build projde lokálně, na serveru ne#

Skoro vždycky je za tím rozdíl velikosti písmen v názvech souborů. Windows a macOS berou Header.tsx a header.tsx jako totéž, Linux na serveru ne. Zkontroluj importy, jestli sedí přesně na název souboru.

Druhá varianta je jiná verze Node.js. V nastavení projektu se dá verze zamknout, nastav ji na tu, kterou máš lokálně.

Stránka se načte, ale obrázky chybí#

Cesty. Lokálně ti projde ./obrazky/foto.jpg, na serveru ne, protože stránka běží na jiné úrovni adresy. Používej cesty od kořene, tedy /obrazky/foto.jpg, a soubory drž ve složce public.

Změny se neprojevují#

Nasadil jsi, ale vidíš starou verzi. Než začneš hledat chybu, otevři stránku v anonymním okně. V devíti případech z deseti je to mezipaměť prohlížeče, ne špatné nasazení.

Vlastní doména nefunguje hned#

Když si připojíš vlastní doménu, nastavíš u registrátora DNS záznamy, které ti hosting ukáže. Změna se nerozšíří okamžitě. Chvíli může trvat, než se projeví všude, a je normální, že ti stránka jede z mobilních dat a z domácí sítě ještě ne. Nepřenastavuj to každou půlhodinu, tím se to jen protáhne.

Co udělat hned potom#

Nasazení není konec, je to začátek smyčky. Od téhle chvíle platí jednoduché pravidlo: každý push do hlavní větve znamená nové nasazení. Takže:

1. Nepracuj přímo v hlavní větvi. Založ si větev, tam zkoušej, pak slučuj.
2. Před každým pushem spusť build lokálně. Trvá to chvíli a ušetří to stud.
3. Podívej se na hotovou stránku na mobilu. Ne na zmenšeném okně prohlížeče, na skutečném telefonu.

A pak to pošli někomu. To je celý smysl toho, že to je na internetu. Projekt, který nikdo neviděl, je pořád jenom složka na disku.

Postup na živém projektu ukazuju ve videích a připravené prompty i skilly, které při tom používám, najdeš v nástrojích.