Publiceer je website op internet

Het grote finale: je website krijgt een echt adres dat je naar iedereen ter wereld kunt sturen.

Wat er gaat gebeuren

Tot nu toe staat je website alleen op je eigen computer. Nu uploaden we hem naar een server – een computer die altijd met internet verbonden is – en hij krijgt een adres dat iedereen kan openen. We gebruiken GitHub Pages: het is gratis en miljoenen programmeurs gebruiken het.

⚠️

Doe deze stap met een ouder. Een GitHub-account aanmaken heeft een e-mailadres nodig, en volgens de regels van GitHub moet een account voor een kind onder de 13 door een ouder worden aangemaakt en beheerd. Bovendien is het een mooi moment om te delen – laat ze zien wat je gebouwd hebt!

Stap voor stap

Maak een GitHub-account. Ga naar github.com en klik op Sign up. Vul een e-mail in (van een ouder), een wachtwoord en een gebruikersnaam. Let op de gebruikersnaam – die wordt onderdeel van het adres van je website! Iets als jake-builds is beter dan xxjake123xx.
Maak een nieuwe repository. Een repository is een lade voor één project. Klik op de groene knop New (of het plusteken rechtsboven → New repository). Typ my-website bij Repository name, laat Public aangevinkt en klik op Create repository.
Upload de bestanden van je website. Op de repositorypagina klik je op de link uploading an existing file. Sleep alles uit je my-website-map erin: index.html, je andere .html-bestanden, style.css en de hele map images. Klik onderaan op de groene knop Commit changes.
Zet GitHub Pages aan. Klik bovenaan op het tabblad Settings, dan Pages in het linkermenu. Onder Branch kies je main, laat / (root) staan en klik op Save.
Wacht een minuut en open je adres. Je website staat nu op:
```
https://your-username.github.io/my-website/
```
(vervang your-username door je GitHub-gebruikersnaam). Werkt het niet meteen, wacht twee minuten en ververs de pagina.

🎉 Gefeliciteerd, Bouwer!

Je hebt een website op internet. Een echte, met een echt adres. Stuur hem naar je oma, je vrienden, je leraar. En neem even de tijd om te onthouden waar je begon: een leeg bestand en <h1>It works!</h1>.

Wat je in deze 12 lessen geleerd hebt:

hoe internet, browsers en servers werken,
HTML: het skelet van een pagina, koppen, alinea’s, lijsten, afbeeldingen, links, structuur,
CSS: kleuren, lettertypes, classes, het boxmodel, flexbox, kaarten, animaties,
en tot slot een website online zetten – wat de professionals deployment noemen.

Hoe je je website blijft aanpassen

Een website is nooit echt af! Als je iets verandert in je bestanden op je computer:

open je repository op GitHub,
klik op Add file → Upload files,
sleep de gewijzigde bestanden erin en klik op Commit changes.

Binnen een minuut staat de wijziging live. (In Level 3 leer je dit eleganter – met commando’s uit de terminal, als een echte pro.)

💡

Wat nu? Je website staat, maar hij kan nog niet reageren. In Level 2 – Tovenaar leer je hem spreuken: donkere modus, een doorbladerbare fotogalerij en een quiz voor bezoekers. We bouwen eraan – en je website is er perfect klaar voor.

Wat neem je mee uit deze les

GitHub Pages publiceert een website gratis: repository → bestanden uploaden → Settings → Pages.
Je adres: https://your-username.github.io/my-website/.
Je website aanpassen = de gewijzigde bestanden opnieuw uploaden. Hij leeft en groeit met je mee.