Julkaise verkkosivusi internetissä · Koodaa Martinin kanssa

Iso finaali: verkkosivusi saa oikean osoitteen jonka voit lähettää kenelle tahansa maailmassa.

Mitä on tapahtumassa

Tähän asti verkkosivusi on asunut vain omalla tietokoneellasi. Nyt lataamme sen palvelimelle – tietokoneelle joka on aina yhteydessä internetiin – ja se saa osoitteen jonka kuka tahansa voi avata. Käytämme GitHub Pages:ia – se on ilmainen, ja miljoonat ohjelmoijat käyttävät sitä.

⚠️

Tee tämä askel vanhemman kanssa. GitHub-tilin luominen vaatii sähköpostiosoitteen, ja GitHubin sääntöjen mukaan alle 13-vuotiaan lapsen tilin on luonut ja hallinnoi vanhempi. Lisäksi se on kiva hetki jakaa – anna heidän nähdä mitä olet rakentanut!

Askel askeleelta

Luo GitHub-tili. Mene osoitteeseen github.com ja klikkaa Sign up. Täytä sähköposti (vanhemman), salasana ja käyttäjänimi. Ole varovainen käyttäjänimen kanssa – siitä tulee osa verkkosivusi osoitetta! Jotain kuten jake-builds on parempi kuin xxjake123xx.
Luo uusi repository. Repository on laatikko yhdelle projektille. Klikkaa vihreää New-painiketta (tai plus-merkki oikeassa yläkulmassa → New repository). Kirjoita Repository name:ksi my-website, jätä Public valittuna ja klikkaa Create repository.
Lataa verkkosivusi tiedostot. Repository-sivulla klikkaa uploading an existing file -linkkiä. Raahaa kaikki my-website-kansiostasi: index.html, muut .html-tiedostot, style.css ja koko images-kansio. Klikkaa vihreää Commit changes -painiketta alhaalla.
Kytke GitHub Pages päälle. Klikkaa ylhäällä Settings-välilehteä, sitten Pages vasemmassa valikossa. Branch:in alla valitse main, jätä / (root) ja klikkaa Save.
Odota minuutti, sitten avaa osoitteesi. Verkkosivusi asuu nyt osoitteessa:
```
https://your-username.github.io/my-website/
```
(korvaa your-username GitHub-käyttäjänimelläsi). Jos se ei toimi heti, anna kaksi minuuttia ja päivitä sivu.

🎉 Onnittelut, Rakentaja!

Sinulla on verkkosivu internetissä. Oikea, oikealla osoitteella. Lähetä se mummollesi, ystävillesi, opettajallesi. Ja muista mistä aloitit: tyhjästä tiedostosta ja <h1>It works!</h1>:stä.

Mitä opit näiden 12 oppitunnin aikana:

miten internet, selaimet ja palvelimet toimivat,
HTML: sivun luuranko, otsikot, kappaleet, listat, kuvat, linkit, rakenne,
CSS: värit, fontit, luokat, laatikkomalli, flexbox, kortit, animaatiot,
ja lopuksi verkkosivun laittaminen internetiin – mitä ammattilaiset kutsuvat deployment:iksi.

Miten jatkat verkkosivusi muuttamista

Verkkosivu ei ole koskaan oikeasti valmis! Kun muutat jotain tiedostoissasi tietokoneellasi:

avaa repository GitHubissa,
klikkaa Add file → Upload files,
raahaa muuttuneet tiedostot ja klikkaa Commit changes.

Minuutin sisällä muutos on näkyvissä. (Tasolla 3 opit tekemään tämän tyylikkäämmin – komennoilla terminaalista, kuin oikea ammattilainen.)

💡

Mitä seuraavaksi? Verkkosivusi on rakennettu, mutta se ei vielä reagoi. Tasolla 2 – Taikuri opetat sille loitsuja: tumma tila, selattava valokuvagalleria ja tietovisa vierailijoille. Rakennamme sitä nyt – ja verkkosivusi on siihen täydellisesti valmis.

Mitä opit tästä oppitunnista

GitHub Pages julkaisee verkkosivun ilmaiseksi: repository → lataa tiedostot → Settings → Pages.
Osoitteesi: https://your-username.github.io/my-website/.
Verkkosivun muuttaminen = lataa muuttuneet tiedostot uudelleen. Se elää ja kasvaa kanssasi.