Hosting

WEB ESSENTIALS

Je website online zetten

Een website publiceren

Je hebt een site gemaakt in HTML en CSS. 🥳

Nu wil je uiteraard dat andere mensen hier naar kunnen surfen.

Hier heb je nog 2 dingen voor nodig:

  • 🌍 Domeinnaam
  • 💾 Hosting

Domeinnaam

  • Bijvoorbeeld: www.bol.com, www.arteveldehogeschool.be....
  • Is uniek, dus mag nog niet bestaan.
  • Koop je aan bij een domeinnaamregistrar of webhostingbedrijf
  • Extensie kan je kiezen (.be/.com/.net...)
  • Je betaalt een jaarlijkse kost om de domeinnaam te behouden

= 🌍 het adres van een website op het internet.

💡Wij kopen tijdens deze module geen custom domeinnamen aan, maar maken gebruik van gratis, gegenereerde url.

Domeinnaam

Bedrijven waar je domeinnamen kan nakijken en registreren:
combell.com, versio.com, one.com...

Hosting

= 💾  Hosting is het proces waarbij je website beschikbaar wordt gemaakt op het internet.

Je bestanden worden opgeslagen op een computer die 24/7 online is (= een server), zodat iedereen ter wereld je site kan bezoeken.

Je website hosten

  1. Kies een hostingpakket bij een hostingprovider.

  2. Betaal voor je hosting. Er bestaan ook gratis opties.

  3. Upload je bestanden (HTML, CSS, afbeeldingen, …) naar de server. Dit doe je klassiek via FTP (File Transfer Protocol), een soort drag-&-drop tussen je computer en de server.

✨ Je website staat nu online via een door de hostingprovider gegenereerde domeinnaam. Optioneel koppel je nu je eigen, aangekochte domeinnaam.

Static hosting

Voorbeelden van hosting providers voor simpele HTML/CSS/JS websites:

De eerste drie hebben een gratis optie beschikbaar 🤩

Samenvatting

🏠 Je website = Een huis dat je hebt gedesigned en gebouwd

🌍 Je domeinnaam = het adres van dat huis

💾 Hosting = de grond waar je het huis op plaatst

Netlify

Hoe doe je dit?

  1. Ga naar netlify.com en maak een gratis account. *

  2. Kies "Deploy manually"

  3. Sleep je projectmap naar het upload vak (of klik om te browsen)

  4. Wacht tot de upload voltooid is

  5. Je site is nu live op een Netlify URL!

* Kies "Skip this step for now" in de laatste stap om door te gaan naar het dashboard.

⚠️ Belangrijke tips

📄 Je hoofdbestand moet index.html heten

Netlify zoekt automatisch naar index.html als startpagina

📁 De folderstructuur is belangrijk

Upload de map met je website, niet losse bestanden. Relatieve paden blijven werken!

🔄 Updates?

Sleep gewoon opnieuw je map naar dezelfde site. De oude versie wordt vervangen!