flowsmithonline

Z nuly na živý web

Nikdy jsi nic „nekódil/a"? Nevadí. S těmihle připravenými postupy se klidně do hodiny dostaneš od prázdného počítače k vlastní stránce na internetu, kterou pošleš kamarádům. Půjdeme krok po kroku a u každého řekneme i proč — ať tomu rozumíš, ne jen klikáš.

Možná znáš ChatGPT, Gemini nebo podobné chatovací nástroje — fungují s různým úspěchem. My tady sázíme na Claude od firmy Anthropic, který k reálné práci nasazuje většina firemních zákazníků v USA. Pracuje totiž trochu jinak: neodpovídá ti jen v okně, ale sám sáhne na soubory, spustí příkazy a postaví věci za tebe.

A ať je to hned jasné: všechno, co tu použiješ, je zdarma. I v bezplatné verzi máš ty nejvýkonnější části celého řetězce v plné síle — tytéž, jaké používají špičkoví profíci; jen v omezeném objemu, ne v omezené funkčnosti. Na první weby to bohatě stačí. Až ti free kredit dojde, můžeš si připlatit — a nejspíš zjistíš, že je to jedna z nejlepších investic, jaké jsi kdy udělal/a. Ale na rozjezd nepotřebuješ utratit ani korunu: funkční řešení je tady a celé zdarma — dostupné studentům i těm, kdo tomu zatím nevěří.

Řekneš v Coworku „Hello World" Tvůj počítač vznikne soubor Git / GitHub uloží verzi Cloudflare postaví web Veřejná adresa www-hello-world.pages.dev
Příkazy a prompty níž se podle toho samy přepíšou. Složka bude www-hello-world, na stránce bude nadpis „Hello World". Pozn.: v názvu složky zmizela diakritika a mezery se změnily na pomlčky — názvy repozitářů a souborů se ve světě počítačů píšou bez háčků a čárek (ASCII) a s pomlčkami. Nadpis na stránce diakritiku mít může.
Zvol si vlastní, méně okoukaný název. Adresa www-hello-world.pages.dev je veřejná — a když si necháš obecné „hello-world", přistaneš na adrese, kterou zná (a kouká na ni) kdekdo z kurzu. Místo klidného hřiště pro tebe a pár kámošů, kde si můžeš v klidu zkoušet a klidně něco i zvorat, je z toho rázem výkladní skříň. Přidej si něco svého (iniciály, číslo), třeba hello-world-kh-7 — ať máš svůj koutek jen pro sebe. Na ostro stejně přijde vlastní doména (krok 7).
Zobrazení: Podrobně = každý krok i s vysvětlením proč · Stručně = jen příkazy a kroky (pro ty, kdo už něco tuší)
Co budeš mít na konci 1 · Účty 2 · Terminál + Homebrew 3 · První projekt 4 · Stránka (přes agenta) 5 · Na GitHub 6 · Na internet 7 · Vlastní doména 8 · Spuštění do světa

Co budeš mít na konci

Funkční webovou stránku na adrese typu www-hello-world.pages.dev (a později klidně na vlastní doméně), kterou kdokoli na světě otevře v prohlížeči. A hlavně postup, který si zopakuješ pro libovolný další nápad.

Těžké nástroje (build, knihovny) běží v cloudu a v sandboxu agenta — do svého počítače skoro nic neinstaluješ. Počítač je jednorázový, pravdou je cloud.
Navíc — souvislost: deploy jede z gitu (Cloudflare staví na každý push), nikdy ručně z notebooku. Tvůj počítač drží jen pracovní kopii — zdroj pravdy je git + cloud. To je celé tajemství „disaster-proof" setupu.

1 · Založ si tři účty (zdarma)

Budeš potřebovat tři věci. Všechny mají bezplatnou variantu, která ti na začátek bohatě stačí:

Zaregistruj se do všech tří, ověř e-mail a můžeš jít dál. Hesla si ulož do správce hesel (na Macu appka Hesla) — ať je máš bezpečně a nemusíš si je pamatovat.

Správa hesel a zálohování klíčů má vlastní návod — sem ji teď netaháme, ať tě to nezahltí. Pro první web ji nepotřebuješ.

2 · Terminál a Homebrew

„Terminál" je okno, kam píšeš příkazy textem. Vypadá to vážně, ale je to jen způsob, jak počítači říct přesně, co má udělat. Otevři appku Terminál (přes Spotlight: ⌘ Space → napiš Terminal).

Nainstaluj Homebrew

Homebrew je „obchod" pro instalaci nástrojů jedním příkazem. Zkopíruj následující řádek, vlož do Terminálu a stiskni Enter (poprosí tě o heslo k počítači — to je v pořádku):

Nainstaluj pár nástrojů

Teď přes Homebrew přidáme git (verzování), gh (GitHub z příkazové řádky) a GitHub Desktop (klikací appka na git):

Navíc: drž si Brewfile v repu (jeden řádek na nástroj) a na novém stroji jen brew bundle — celý toolchain je reprodukovatelný z manifestu.

3 · Vytvoř si první projekt

Všechny své weby budeš mít hezky pohromadě ve složce Projects přímo ve své domovské složce (~ je zkratka pro /Users/tvoje-jmeno). Vytvoř ji a v ní složku pro tenhle web:

Pozor na iCloud. Nedávej projekty do složky Dokumenty ani na Plochu — ty ti iCloud synchronizuje do cloudu a s gitem se pere (konflikty, mizící soubory). Složka ~/Projects v domovské složce se do iCloudu nesynchronizuje, takže je bezpečná. Příkaz výš to dělá správně.

To www- na začátku je naše konvence pro weby — ve složce Projects se ti weby seřadí pěkně k sobě (aplikace dostanou svůj vlastní začátek). Až jich budeš mít víc, oceníš to.

Tip: přetáhni složku Projects do levého panelu Finderu (do „Oblíbené") — budeš tam chodit fakt často, ať ji máš na jeden klik.

4 · Stránku napíše agent (ty jen řekneš co)

Tady přichází kouzlo: nepíšeš kód, popíšeš výsledek. V Coworku otevři složku ~/Projects/www-hello-world a napiš agentovi tenhle pokyn (zkopíruj — je už nastavený na tvůj název):

Agent soubor vytvoří. Otevři index.html dvojklikem — měl/a bys svou stránku vidět rovnou v prohlížeči (zatím jen u sebe v počítači). Otevře se místo webu text/kód? Žádná panika — přetáhni soubor index.html na ikonu prohlížeče dole v Docku, nebo na něj klikni pravým tlačítkem → Otevřít v aplikaci → tvůj prohlížeč.

Nelíbí se ti to? Řekni agentovi, co změnit — „dej nadpis modře", „přidej dole rok". Zkoušej, čti výsledek, uprav. Přesně takhle se s agentem pracuje.

5 · Ulož web na GitHub

Web teď uložíme do gitu — bezpečného úložiště, odkud se i zveřejní. Jak na to? Vyber si cestu:

Nemusíš znát jediný příkaz. Otevři v Coworku složku ~/Projects/www-hello-world — a zkontroluj, že je to fakt ta složka s tvým webem (ne Plocha, ne Dokumenty). Tady se schová devět z deseti začátečnických zádrhelů. Pak agentovi vlož přesně tenhle pokyn (klikni do rámečku, ⌘ A, ⌘ C — zkopíruje se celý):

Co se stane — a nelekni se. V jednu chvíli agent otevře okno prohlížeče, kde se ke GitHubu přihlásíš ty sám/sama. Je to tak správně a bezpečně: tvoje heslo nevidí agent ani my — zadáváš ho přímo GitHubu. Pak se vrátíš do Coworku a napíšeš „hotovo, pokračuj".
Claude ti může „klást odpor" — a je to dobře. U citlivých kroků (přihlášení, hesla, placené potvrzení) se schválně zastaví a nechá je na tobě. Není to chyba ani že „to neumí" — je to pojistka, aby za tebe neudělal nic, co nechceš. Když se zastaví, udělej ten krok ty a napiš „pokračuj". (Tenhle šelmostroj budí respekt, ale táhne za tebe — ty jen držíš otěže.)
Tohle je to klíčové flow: mluvíš s Coworkem a na druhé straně vypadávají hotové weby. Většina lidí víc vědět nepotřebuje.

6 · Pusť web na internet (Cloudflare)

Teď web vystavíme na internet přes Cloudflare. Jak na to? Vyber si cestu:

Teď web vystavíme na internet. Vlož agentovi tenhle pokyn — je naschvál podrobný, ať to vyjde napoprvé (klikni do rámečku, ⌘ A, ⌘ C):

Přihlášení do Cloudflare proběhne stejně jako u GitHubu — v okně prohlížeče a heslo zadáš ty, agent se ho nedotkne. Pak řekneš „pokračuj".
I tady může Claude klást odpor u přihlášení nebo potvrzení — a je to správně. Zastaví se, ty ten krok uděláš a napíšeš „pokračuj". Když by tápal, klidně mu napověz: „použij Cloudflare MCP konektor" nebo „zkus to přes wrangler".
Tohle je to odšpuntování úzkého hrdla: nápady → Claude → web venku. Většina lidí zvolí tenhle plně automatický proces — a má klid na tvoření.
A když nějaká služba nemá API (jen klikání)? Pak přijde ke slovu Chrome plugin: agent ti kroky přednaklikne přímo v prohlížeči a ty jen přeneseš citlivý údaj (secret). Zatím v betě a pomalejší než API/CLI/MCP, ale mocný.

Zastav se na chvíli — tvůj web je na světě.

Před pár desítkami minut jsi měl/a prázdný počítač. Teď máš živý web na internetu, na adrese typu www-hello-world.pages.dev. Otevři si ji — funguje, je veřejná, kdokoli na světě si ji načte.

Ještě to není tvoje oficiální doména (www.mujprojekt.com přijde v kroku 7) — tahle je „vývojářská". Ale na věci to nic nemění: je to venku a můžeš si na to sáhnout.

A přesně tohle je ten okamžik, na který se čeká: pošli odkaz kamarádům, zeptej se jich, co na to říkají — a klidně to pak ještě několikrát předělej a vylepši. Web teď měníš, kdykoli chceš (řekneš agentovi, nebo ručně commit → push), a za chvilku je úprava venku.

Žádný spěch dál. Tohle si užij — sám/sama jsi právě dostal/a nápad z hlavy až na internet.

Máš na stránce kontaktní formulář? Vyzkoušej ho, než mu uvěříš. Když agenta poprosíš o „stránku s kontaktním formulářem", často ti vyrobí formulář, který vypadá úplně reálně — políčka, tlačítko Odeslat, dokonce i hláška „děkujeme!" — ale potichu nikam neodesílá. Je to atrapa. Tak hned teď udělej tohle: vyplň ho a sám/sama ho odešli. Když ti žádná zpráva nedorazí (do schránky nebo kam jsi ji čekal/a), je to atrapa a potřebuje napojit na opravdový backend. Na přesně tohle máme hotový návod: Rozjeď funkční formulář →

Teď si hraj — měň web a sleduj, jak se sám publikuje

Tohle je celé to kouzlo: myšlenku řekneš v Coworku a zbytek — uložení verze (commit), odeslání (push) i sestavení (build) — proběhne sám. Za chvilku změnu vidíš online, klidně i na mobilu. Držíš v ruce nástroj, kterému řekneš, jaký web chceš, a on ti vzniká pod rukama.

Vyzkoušej to — popros agenta třeba o:

  1. jinou barvu pozadí a barvu písma;
  2. do patičky verzi stránky a datum sestavení — ať na vlastní oči vidíš, že se web fakt přestavěl;
  3. nějaké ikony. Máme rádi Phosphor a Lucide — otevři si je a vyber, ať víš, co je v repertoáru.

Zkus si — drobné pokusy bez rizika, každý jednou větou

Žádný z nich nemůže nic rozbít — je to tvoje soukromé hřiště. Každý je jedna věta, kterou řekneš agentovi. Zkus jeden, sleduj, jak se objeví online, a ucítíš, jak se ten nástroj stává tvým:

  1. „Přidej malé hodiny, ať ukazují aktuální čas."
  2. „Přidej k nadpisu malou ikonku."
  3. „Přidej do rohu sluníčko."
  4. „Nastav tuhle fotku z mého alba jako pozadí" (nejdřív fotku přetáhni do Coworku).
  5. „Polož nadpis přes fotku, ať zůstane čitelný."
  6. „Přidej přepínač světlý/tmavý režim" — nebo přepínač s fotkou / bez fotky.
  7. „Změň písmo na něco čistšího / hravějšího."
  8. „Přelaď celou barevnou paletu — zkus luxusní zlatou, nebo technickou modrou." Jedna věta a celý web změní náladu.
Nelíbí se ti výsledek? Stačí říct — „vrať to zpátky", „udělej to jemnější", „zkus jinou barvu". Nic tu není natrvalo a nic ti nehrozí. Právě tohle tam a zpátky je ta dovednost: řekni, koukni, uprav.

Po každé změně buď řekni agentovi „ulož a vypusť to ven" (automat), nebo ručně Commit → Push — a Cloudflare web sám přestaví. Za chvilku obnovíš stránku a máš to. Nápad → ven. Od teď měníš web, kdykoli chceš.

Správná chvíle na mobil. Když už si hraješ, řekni agentovi „ať web vypadá dobře i na mobilu" — tomu se říká responzivní design (web se přizpůsobí velikosti obrazovky). Otevři si stránku na telefonu a uvidíš rozdíl. Teď to dává smysl, protože si to hned osaháš. A záleží na tom: odkaz, který budeš sdílet, si lidi otevřou na mobilu — tak ať agent udělá pořádnou mobilní verzi, ne jen tak na oko (v kroku 8 si to ještě ověříme).
Tady končí „hračka". Hotový Hello World je super na vyzkoušení — testovací stránku na ostrou doménu obvykle nedáváš. Kroky 7–8 níž jsou pro chvíli, kdy stavíš reálný web.
tvorba webu → publikování

7 · Vlastní doména pro reálný web

Až budeš chtít místo .pages.dev opravdovou adresu — třeba mojedomena.cz — napojíš si ji na svůj projekt v Cloudflare Pages. Je tam jeden zádrhel, o který skoro každý zakopne, tak ať ho trefíš hned napoprvé.

Přidej OBĚ adresy — holou doménu i tu s www

V Cloudflare Pages otevři svůj projekt → Custom domains → Set up a domain a přidej dvě adresy, jednu po druhé:

  1. holou doménu — mojedomena.cz (té se odborně říká apex);
  2. a taky www.mojedomena.cz.

Ke každé Cloudflare sám vytvoří DNS záznam a vystaví HTTPS certifikát (ten zámeček). Chvilku to trvá, pár minut.

Proč obě? Protože přesně tady jeden reálný student uvízl. Nastavil si mojedomena.cz, fungovalo to — ale www.mojedomena.cz hlásilo chybu. Lidi píšou „www" ze zvyku, odkazy odjinud ji používají, vyhledávače si ji pamatují. Když přidáš jen holou doménu, každý návštěvník, co napíše www., narazí do zdi. Přidej obě a celá ta třída „mně to nejde, kámošovi taky ne" zmizí.

Vyber jednu hlavní adresu — a tu druhou na ni přesměruj

Teď fungují obě adresy, jenže nechceš, aby ti tentýž web žil na dvou URL (je to nepořádek a mate to vyhledávače). Tak si jednu vybereš jako tu pravou a tu druhou na ni přesměruješ. Doporučujeme jako hlavní tu holou doménu (kratší, čistší). Tohle je přesně ten krok, který náš student nikdy neudělal.

Do kořene projektu — do stejné složky jako index.html — přidej malý soubor jménem _redirects (bez přípony, prostě jen ten název) s tímhle jediným řádkem:

Polidsky: „kdo přijde na www., pošli ho na holou doménu a nech mu tu stránku, kterou chtěl." Pak ještě řekni prohlížeči a vyhledávačům, která adresa je ta pravá — značka <link rel="canonical"> v <head> stránky má mířit na holou doménu. (Když bys chtěl/a jako hlavní naopak www., udělej to zrcadlově — jen si vyber jedno a drž se toho.)

Nic z toho nemusíš psát ručně — ten jeden pokyn v kroku 8 ti nastaví přesměrování, canonical značku i všechno ostatní naráz. Tady stačí pochopit proč: dvoje dveře do budovy, ale všichni skončí ve stejné hale.

Kde doménu koupit: Cloudflare umí většinu domén registrovat přímo za velkoobchodní cenu — bez marže (národní jako .cz/.eu zatím přes jiného registrátora). U většího portfolia to dělá výrazné úspory: třeba na doméně .group jde o desítky tisíc Kč ročně. A hlavně máš pak doménu, hosting i web pod jednou střechou — celé AI-agent-friendly, což je krédo celého Flowsmith.
Pozor: nastavení domény míchá i e-maily a zabezpečení (SPF/DKIM/DMARC). Ať si nerozbiješ poštu, tohle bereme jako samostatný návod — nepatří do první lekce.

8 · Spuštění do světa — „dospělý web"

Holá stránka funguje, ale opravdový web má pár drobností, díky kterým působí hotově a chová se správně všude. Přesně tuhle sadu jsme dali i samotnému flowsmith. Tady je, co každý kousek je a proč ho chceš:

Nic z toho neděláš ručně. Otevři projekt v Coworku a vlož tenhle jeden pokyn — vyrobí ti celou spouštěcí sadu naráz (je už nastavený na tvůj název):

Jak ověřit, že to fakt klaplo (udělej všech pět — je to rychlé):

  1. napiš do prohlížeče holou doménu — načte se;
  2. přidej před ni www. — má tě to odrazit na holou;
  3. vlož odkaz do chatu (napiš sám/sama sobě) — má vyskočit kartička s názvem, textem a obrázkem;
  4. mrkni na záložku prohlížeče — je tam tvůj název i ta tvoje ikonka.
  5. otevři si to na mobilu — komu odkaz pošleš, ten ho většinou ťukne v messengeru nebo esemesce, takže se otevře na telefonu.
Než to pošleš — zkontroluj to na mobilu. Kamarádi dostanou odkaz nejčastěji v messengeru nebo esemesce a otevřou ho na telefonu. Web, co na notebooku vypadá skvěle, ale na mobilu rozbitě, je okamžitá ostuda. Pokud jsi v kroku 6 responzivní úpravu přeskočil/a, řekni teď agentovi „ať to vypadá dobře i na mobilu" a znovu si to na telefonu zkontroluj.

(My na tohle máme připravený skill — hotový ověřený postup, který agentovi přesně řekne, co a jak. Co skill je a jak si vlastní vyrobíš, je v lekci Co je skill.)

Co sis právě osahal/a: účty → nástroje → projekt → web napsaný agentem → git → živý web. Stejný postup zopakuješ pro cokoli dalšího — měníš jen obsah.

Kam dál