Wat ga je doen?

Met deze stappen publiceer je je eigen React-website online, zodat je hem kunt laten zien als portfolio.

Wat heb je nodig:

  • Een GitHub account
  • Een GitHub Student Developer Pack
  • Je project geüpload op GitHub

Stap 1: Installeer gh-pages

Dit programma helpt om de site automatisch online te zetten.

Open de terminal in je projectmap en typ:

npm install --save-dev gh-pages

Druk op Enter. Dit installeert een extra hulpmiddel dat de map met jouw website (dist) naar GitHub Pages kan sturen.

Stap 2: Voeg "homepage" toe aan package.json

Dit vertelt aan GitHub waar je website online moet komen te staan.

Wat moet je doen:

  1. Open het bestand package.json
  2. Zet helemaal bovenin (boven "scripts") deze regel:
"homepage": "https://<jouw-gebruikersnaam>.github.io/<repository-naam>",

Vervang alles tussen de < > door je eigen gegevens!

Voorbeeld:

Als je GitHub-account janstudent heet en je repository heet portfolio-react, dan wordt het:

"homepage": "https://janstudent.github.io/portfolio-react",

Waarom dit nodig is: GitHub Pages moet weten waar jouw website online komt te staan. Die URL wordt gebruikt door het build-systeem om alle paden in je website goed te maken.

Stap 3: Voeg extra regels toe voor deployment

Scroll in package.json naar beneden bij "scripts". Daaronder voeg je deze twee regels toe:

"predeploy": "npm run build",
"deploy": "gh-pages -d dist"

Je "scripts"-gedeelte hoort er dan ongeveer zo uit te zien:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

Wat gebeurt hier?

  • predeploy → bouwt eerst de site (maakt de dist-map aan)
  • deploy → stuurt de inhoud van dist automatisch naar GitHub Pages

Stap 4: Pas je router aan (als je React Router gebruikt)

GitHub Pages zet jouw site in een submap (bijv. /portfolio-react/). Daarom moet de router weten in welke map de site draait.

Open App.jsx of main.jsx en wijzig de BrowserRouter:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter basename="/portfolio-react">
      {/* je routes */}
    </BrowserRouter>
  );
}

export default App;

Let op: Vervang /portfolio-react door de naam van JOUW repository!

Waarom dit nodig is: Zonder basename denkt React dat de site in de hoofdmap staat (/) — maar op GitHub Pages staat hij meestal in een submap. Met basename zorg je dat alle links goed werken.

Stap 5: Deploy naar GitHub Pages

Nu alles is ingesteld, kan je je website online zetten!

In de terminal, typ:

npm run deploy

Wat gebeurt er nu?

  1. predeploy wordt automatisch uitgevoerd → bouwt je project
  2. deploy wordt uitgevoerd → pusht dist naar GitHub Pages
  3. GitHub Pages zet de site online (kan 1-2 minuten duren)

Je ziet in de terminal:

> predeploy
> npm run build

...building...

> deploy
> gh-pages -d dist

Published

Stap 6: Check je Website

Ga naar je GitHub repository en klik op Settings → Pages.

Je ziet daar de URL waar je website staat, bijvoorbeeld:

https://jouw-username.github.io/repository-naam/

Klik op de link en bekijk je website!

Gefeliciteerd! Je website staat nu online en kun je delen met anderen!

Veelgemaakte Problemen

Probleem: Witte pagina / 404 error

Oplossing:

  • Check of homepage correct is in package.json
  • Check of basename correct is in BrowserRouter
  • Beide moeten dezelfde repository naam hebben!

Probleem: CSS werkt niet

Oplossing:

  • Check of je CSS import in App.jsx staat
  • Run npm run deploy opnieuw

Probleem: Links werken niet

Oplossing:

  • Gebruik <Link> van react-router-dom
  • Gebruik GEEN <a> tags voor interne links

Website Updaten

Als je wijzigingen hebt gemaakt en je website wilt updaten:

  1. Sla je wijzigingen op
  2. Run npm run deploy opnieuw
  3. Wacht 1-2 minuten
  4. Refresh je browser (eventueel hard refresh met Ctrl+Shift+R)

Handy Tips:

  • Test je website eerst lokaal met npm run dev
  • Check altijd de browser console voor errors
  • Gebruik de GitHub Pages URL voor je portfolio
  • Hard refresh (Ctrl+Shift+R) als wijzigingen niet zichtbaar zijn