Zveřejni svůj web na internetu · Programuj s Martinem

Velké finále: tvůj web dostane opravdovou adresu, kterou pošleš komukoli na světě.

Co se teď stane

Tvůj web zatím bydlí jen v tvém počítači. Teď ho nahrajeme na server – počítač, který je pořád připojený k internetu – a dostane adresu, kterou si otevře kdokoli. Použijeme GitHub Pages: je zdarma a používají ho miliony programátorů.

⚠️

Tenhle krok dělej s rodičem. K založení účtu na GitHubu je potřeba e-mail a podle pravidel GitHubu musí být účet dítěte mladšího 13 let založený a spravovaný rodičem. Navíc je to hezký moment – ať rodiče vidí, co jsi dokázal(a)!

Krok za krokem

Založte účet na GitHubu. Jděte na github.com a klikněte na Sign up. Vyplňte e-mail (rodičův), heslo a uživatelské jméno. Pozor na jméno – bude součástí adresy tvého webu! Třeba kuba-stavi je lepší než xxkuba123xx.
Vytvoř nový repozitář. Repozitář je šuplík na jeden projekt. Klikni na zelené tlačítko New (nebo plus vpravo nahoře → New repository). Do Repository name napiš muj-web, nech zaškrtnuté Public a klikni na Create repository.
Nahraj soubory webu. Na stránce repozitáře klikni na odkaz uploading an existing file. Přetáhni tam myší všechno ze složky muj-web: soubor index.html, ostatní .html soubory, styl.css i celou složku obrazky. Dole klikni na zelené Commit changes.
Zapni GitHub Pages. Nahoře klikni na záložku Settings, v levém menu na Pages. V části Branch vyber main, nech / (root) a klikni na Save.
Počkej minutku a otevři svou adresu. Tvůj web teď běží na adrese:
```
https://tvoje-jmeno.github.io/muj-web/
```
(místo tvoje-jmeno je tvoje uživatelské jméno z GitHubu). Když to hned nefunguje, dej tomu dvě minuty a obnov stránku.

🎉 Gratuluju, Staviteli!

Máš web na internetu. Opravdový, se skutečnou adresou. Pošli ji babičce, kamarádům, paní učitelce. A schválně si vzpomeň, kde jsi začínal(a): prázdný soubor a <h1>Funguje to!</h1>.

Co ses za těch 12 lekcí naučil(a):

jak funguje internet, prohlížeč a server,
HTML: kostru stránky, nadpisy, odstavce, seznamy, obrázky, odkazy, strukturu,
CSS: barvy, písma, třídy, krabicový model, flexbox, karty, animace,
a nakonec nasazení webu na internet – to, čemu profíci říkají deployment.

Jak web měnit dál

Web není nikdy hotový! Když něco změníš v souborech u sebe v počítači:

otevři svůj repozitář na GitHubu,
klikni na Add file → Upload files,
přetáhni tam změněné soubory a dej Commit changes.

Za minutku je změna na webu. (V Úrovni 3 se naučíš, jak tohle dělat elegantněji – příkazy z terminálu, jako profík.)

💡

Co dál? Tvůj web je postavený, ale ještě neumí reagovat. V Úrovni 2 – Kouzelník ho naučíš kouzla: tmavý režim, fotogalerii s prohlížením a kvíz pro návštěvníky. Připravujeme ji – a tvůj web na ni bude perfektně připravený.

Co si z téhle lekce odnést

GitHub Pages zveřejní web zdarma: repozitář → nahrát soubory → Settings → Pages.
Tvoje adresa: https://tvoje-jmeno.github.io/muj-web/.
Změna webu = nahrát změněné soubory znovu. Web žije a roste s tebou.