Objavi svoju web stranicu na internetu

Veliki finale: tvoja web stranica dobiva pravu adresu koju možeš poslati bilo kome na svijetu.

Što će se dogoditi

Do sada tvoja web stranica živi samo na tvom računalu. Sada ćemo je prenijeti na server – računalo koje je uvijek spojeno na internet – i dobit će adresu koju svatko može otvoriti. Koristit ćemo GitHub Pages: besplatno je i milijuni programera ga koriste.

⚠️

Ovaj korak napravi uz roditelja. Otvaranje GitHub računa treba e-mail adresu, a prema pravilima GitHuba račun za dijete mlađe od 13 godina mora otvoriti i voditi roditelj. Uz to, lijep je trenutak za dijeljenje – neka vide što si izgradio!

Korak po korak

Otvori GitHub račun. Idi na github.com i klikni Registracija. Upiši e-mail (roditeljev), lozinku i korisničko ime. Pazi na korisničko ime – postat će dio adrese tvoje web stranice! Nešto poput jake-builds bolje je od xxjake123xx.
Napravi novi repozitorij. Repozitorij je ladica za jedan projekt. Klikni zeleni gumb Novo (ili plus gore desno → Novi repozitorij). Upiši my-website za Naziv repozitorija, ostavi označeno Javno i klikni Stvori repozitorij.
Prenesi datoteke svoje web stranice. Na stranici repozitorija klikni poveznicu prenesi postojeću datoteku. Povuci sve iz mape my-website: index.html, ostale .html datoteke, style.css i cijelu mapu images. Klikni zeleni gumb Potvrdi promjene dolje.
Uključi GitHub Pages. Klikni karticu Postavke gore, zatim Pages u lijevom izborniku. Pod Grana odaberi main, ostavi / (root) i klikni Spremi.
Pričekaj minutu, zatim otvori svoju adresu. Tvoja web stranica sada živi na:
```
https://your-username.github.io/my-website/
```
(zamijeni your-username svojim GitHub korisničkim imenom). Ako odmah ne radi, daj joj dvije minute i osvježi stranicu.

🎉 Čestitamo, Stavitelju!

Imaš web stranicu na internetu. Pravu, s pravom adresom. Pošalji je baki, prijateljima, učitelju. I sjeti se odakle si krenuo: prazna datoteka i <h1>Radi!</h1>.

Što si naučio u ovih 12 lekcija:

kako internet, preglednici i serveri rade,
HTML: kostur stranice, naslovi, odlomci, popisi, slike, poveznice, struktura,
CSS: boje, fontovi, klase, model kutije, flexbox, kartice, animacije,
i na kraju, stavljanje web stranice na internet – što profesionalci zovu deployment.

Kako nastaviti mijenjati web stranicu

Web stranica nikad nije stvarno gotova! Kad god nešto promijeniš u datotekama na računalu:

otvori svoj repozitorij na GitHubu,
klikni Dodaj datoteku → Prenesi datoteke,
povuci promijenjene datoteke i klikni Potvrdi promjene.

U minuti promjena je uživo. (U razini 3 naučit ćeš to elegantnije – naredbama iz terminala, kao pravi profesionalac.)

💡

Što dalje? Tvoja web stranica je izgrađena, ali još ne može reagirati. U Razini 2 – Čarobnjak naučit ćeš joj čarolije: tamni način, galeriju fotografija za pregledavanje i kviz za posjetitelje. Gradimo je sada – i tvoja web stranica bit će savršeno spremna.

Što ćeš ponijeti iz ove lekcije

GitHub Pages objavljuje web stranicu besplatno: repozitorij → prenesi datoteke → Postavke → Pages.
Tvoja adresa: https://your-username.github.io/my-website/.
Mijenjanje web stranice = ponovno prenesi promijenjene datoteke. Živi i raste s tobom.