Je website online zetten

Je website online zetten#

Nu heb je flink gewerkt om je eigen site met HTML en CSS in elkaar te zetten. En natuurlijk op zo’n manier dat je aan alle design-principes hebt voldaan. Tsja, dan is het natuurlijk ook erg leuk om je website online te zetten, zodat andere mensen het resultaat van je harde werk ook kunnen bekijken.

In dit hoofdstuk zie je twee manieren om je website online te zetten.

Manier

Voor- en nadelen

Github Pages

+ Gratis
+ Werken met Git, is handig voor de modules Project Informatica en Python Plus
+ Veel documentatie beschikbaar
+ Erg flexibel
- de online editor van GitHub is ok, maar niet super

Neocities

+ Gratis
+ Fijne online editor
+ Gemakkelijk op te zetten
- geen integratie met de modules Project Informatica en Python Plus.

Publiceren op GitHub Pages#

Stap 1: Maak een GitHub-account#

Voor als je er nog geen hebt. Heb je al een GitHub-account, dan gebruik je natuurlijk dat account.

Tip voor het kiezen van een gebruikersnaam: wanneer je serieus bent over Informatica, kies dan een accountnaam, die je over 10 jaar ook nog zou willen gebruiken.

  1. Ga naar GitHub.

  2. Klik op Sign up en maak een account aan (als je er nog geen hebt).

Stap 2: Maak een nieuwe repository aan#

  1. Nadat je bent ingelogd, klik rechtsboven op het ”+”-symbool en selecteer “New repository”.

  2. Geef de repository een naam (bijv. “MijnWebsite”).

  3. Selecteer de optie Public zodat je website toegankelijk is voor iedereen.

  4. Voeg een README.md toe (optioneel maar handig om de repository te beschrijven).

  5. Klik op Create repository om de repository aan te maken.

Stap 3: Voeg je websitebestanden toe#

  1. Upload je bestanden door in de repository te klikken op Add file > Upload files. Upload je HTML, CSS, en eventuele andere statische bestanden zoals afbeeldingen of JavaScript.

  2. Klik op Commit changes om de bestanden aan de repository toe te voegen.

Stap 4: GitHub Pages activeren#

  1. Ga naar het tabblad Settings van je repository (bovenaan de pagina).

  2. Scroll naar beneden tot je het gedeelte GitHub Pages ziet.

  3. Bij “Source”, selecteer main branch en kies eventueel de map waar je index.html staat (als je het in de hoofdmap hebt staan, kies “root”).

  4. Klik op Save.

Stap 5: Bekijk je website#

  1. Na een paar seconden is je website live.

  2. Ga naar het gedeelte GitHub Pages in de Settings-pagina. Je zult daar een URL zien zoals https://gebruikersnaam.github.io/MijnWebsite.

  3. Klik op de link of voer de URL in je browser in om je website te bekijken.

Stap 6: Website updaten#

  1. Als je later wijzigingen wilt aanbrengen, kun je eenvoudig nieuwe bestanden uploaden of de bestaande bestanden in je repository aanpassen.

  2. Na het maken van wijzigingen en het klikken op Commit changes, wordt de live website automatisch bijgewerkt.

Publiceren op Neocities#

Stap 1: Maak een Neocities-account#

  1. Ga naar de Neocities-website.

  2. Klik op Sign up om een account aan te maken.

  3. Vul de gevraagde informatie in: gebruikersnaam, wachtwoord, en e-mailadres.

  4. Je gebruikersnaam wordt een onderdeel van de URL van je website (bijvoorbeeld: gebruikersnaam.neocities.org).

  5. Klik op Create account om je account te maken.

Stap 2: Bereid je bestanden voor#

  1. Zorg ervoor dat je een index.html bestand hebt, dit is de hoofdpagina van je website.

  2. Zorg ervoor dat je ook je CSS en eventuele andere bestanden (zoals afbeeldingen of JavaScript) klaar hebt staan in een lokale map op je computer.

Stap 3: Upload je website naar Neocities#

  1. Na het aanmaken van je account, word je doorgestuurd naar je dashboard.

  2. Klik op Upload files (bovenaan de pagina).

  3. Sleep de HTML-, CSS- en andere bestanden die je wilt uploaden naar de Neocities-bestandenmanager, of gebruik de knop “Choose files” om ze handmatig te selecteren.

  4. Zodra de bestanden zijn geüpload, zie je ze verschijnen in je bestandsbeheer op Neocities.

Stap 4: Bekijk je website#

  1. Nadat je de bestanden hebt geüpload, is je website meteen live!

  2. De URL van je website is https://gebruikersnaam.neocities.org (waarbij gebruikersnaam de naam is die je hebt gekozen tijdens het aanmaken van je account).

  3. Open de URL in je browser om je website te bekijken.

Stap 5: Je website updaten#

  1. Als je wijzigingen wilt aanbrengen, ga je gewoon terug naar je Neocities-dashboard.

  2. Klik op Upload files om nieuwe bestanden te uploaden of bestaande bestanden te vervangen.

  3. Zodra je de bestanden opnieuw hebt geüpload, worden de veranderingen direct doorgevoerd op je live website.

Optioneel: Gebruik de Neocities editor#

  1. Neocities biedt ook een ingebouwde editor waarmee je direct op de website je HTML- en CSS-bestanden kunt aanpassen.

  2. Ga naar je dashboard, klik op een bestand (bijv. index.html), en klik op Edit om de editor te openen.

  3. Pas de code aan en klik op Save om de wijzigingen live te maken.

Inhoud