Wat ga je doen?

Met deze stappen publiceer je je eigen Vue-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-vue, dan wordt het:

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

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 vite.config.js aan

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

Open vite.config.js en voeg base toe:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: '/portfolio-vue/', // vervang door jouw repository-naam
})

Let op: Vervang /portfolio-vue/ door de naam van JOUW repository — inclusief de schuine strepen!

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

Gebruik je Vue Router?

Als je createWebHistory gebruikt, geef dan ook de base mee in router/index.js: 

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory('/portfolio-vue/'), // zelfde als vite.config.js
  routes: [
    // jouw routes
  ]
})

export default router

Alternatief: Gebruik createWebHashHistory() — dan hoef je geen base in te stellen. Je URL ziet er dan zo uit: https://janstudent.github.io/portfolio-vue/#/home. Minder mooi, maar makkelijker.

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 base correct is in vite.config.js
  • Beide moeten dezelfde repository naam hebben!

Probleem: CSS of afbeeldingen laden niet

Oplossing:

  • Check of base in vite.config.js is ingesteld
  • Run npm run deploy opnieuw

Probleem: Links werken niet (404 bij directe URL)

Oplossing:

  • Gebruik createWebHashHistory() in plaats van createWebHistory()
  • Of zorg dat base in de router overeenkomt met vite.config.js

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)

Handige 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