Skip to content

🌍 Opdracht: Publiceer je profielpagina met GitLab CI/CD en GitLab Pages

Tot nu toe heb je vooral zelf je HTML en CSS in de browser geopend. In de praktijk wil je je werk vaak automatisch testen én online beschikbaar maken. Dat kan met CI/CD en GitLab Pages.

🤔 Wat is CI/CD?

CI/CD staat voor Continuous Integration / Continuous Deployment.

  • Continuous Integration (CI): elke keer dat je code aanpast en naar GitLab pusht, voert GitLab automatisch tests uit (bijvoorbeeld: klopt je code nog? Ontbreken er geen bestanden?).
  • Continuous Deployment (CD): als alle tests slagen, kan GitLab je project automatisch online zetten, zodat anderen het kunnen gebruiken of bekijken.

Je schrijft de regels voor dit proces in een configuratiebestand: .gitlab-ci.yml. Dit is een tekstbestand dat GitLab interpreteert en omzet naar acties.

🔧 Wat je moet doen

  1. Maak het bestand aan Maak in de hoofdmappen van je repository een nieuw bestand met de naam:
.gitlab-ci.yml
  1. Zet deze inhoud in je bestand
 image: alpine:latest

 pages:
 stage: deploy
 tags:
     - hva
 script:        
     - mkdir .public
     - cp -r * .public
     - mv .public public
 artifacts:
     paths:
     - public
 only:
     - main

👉 Wat dit doet:

  • GitLab gebruikt een lichte Linux-omgeving (alpine:latest).
  • Alles uit je repository (HTML, CSS, afbeeldingen) wordt gekopieerd naar een map .public.
  • Alles in .public wordt gepubliceerd als website via GitLab Pages.

  • Het werkt alleen op de main branch.

  • Commit en push je bestand naar GitLab.

  • Ga naar CI/CD → Pipelines en kijk of je pipeline draait. Wacht tot deze klaar is (groene check).

  • Ga naar Settings → Pages. Daar vind je de link naar jouw website.

📄 Bewijs van succes

  • Je profielpagina staat online via GitLab Pages.
  • Deel de link met een klasgenoot en laat hen checken of jouw pagina goed zichtbaar is.

⚡ Extra uitdagingen voor snelle studenten

  • Pas de pipeline aan zodat alleen de bestanden index.html, style.css en de map images/ gepubliceerd worden (hint: gebruik cp -r).
  • Voeg een test-stap toe vóór de deploy, die controleert of index.html bestaat (zie eerdere opdracht).
  • Maak een extra pagina (bijv. about.html) en koppel deze met een link vanuit je index.html. Publiceer opnieuw.
  • Voeg een favicon of extra CSS-bestand toe en controleer of de wijzigingen direct zichtbaar zijn na publiceren.

👉 Resultaat: je ervaart dat CI/CD je werk automatisch online kan zetten, zonder dat je zelf handmatig bestanden hoeft te uploaden.