Een website bouwen
Een website op giantpanda.site is een statische site: HTML, CSS, JavaScript, afbeeldingen en lettertypen. Er draait
geen servercode. Alles wat een site aan "backend" nodig heeft (bezoekers tellen, cookietoestemming, een configurator,
aanvragen) gaat via /_gp/v1 op het eigen adres van de site. Zie Configurator en /_gp.
Wat werkt
- Gewone HTML-sites (één of meer
.html-bestanden). - Gebouwde sites uit een framework met een statische export: Vite, Astro, Next.js met
output: 'export', SvelteKit met de static adapter, Eleventy, Hugo enzovoort. - Single-page apps (React, Vue). Let op de paginalinks: een route zonder eigen HTML-bestand geeft een 404, tenzij je per route een HTML-bestand genereert.
Wat niet werkt: server-side rendering, API-routes, middleware, databases of andere code die op een server moet draaien.
De basis
index.htmlin de root van de build. Dat is de homepage.- Maximaal 5.000 bestanden per versie.
- Host alles zelf: afbeeldingen, lettertypen en scripts staan in de build, niet op een ander domein (geen Google Fonts-link, geen afbeeldingen van een CDN). Dat is sneller, en er gaan geen bezoekersgegevens naar derden.
- Mobiel eerst: test op ongeveer 375 px breed.
- Relatieve of root-paden (
/assets/logo.svg), nooit een absolute URL naar een ander adres van je site: dezelfde bestanden worden ook op het voorbeeldadres en op je eigen domein getoond.
Bezoekers tellen
Elke pagina roept bij het laden één keer de site-boot aan:
fetch("/_gp/v1/boot", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ path: location.pathname })
});Een single-page app doet dat opnieuw bij elke routewissel (bijvoorbeeld door history.pushState en popstate te
volgen). Daarmee ziet Hub de bezoekers en paginaweergaven per website.
Cookies en toestemming
Kies in de instellingen bewust de cookiemelding van de site:
| Instelling | Wat er gebeurt |
|---|---|
| Meten, tenzij de bezoeker weigert | Bezoeken worden geteld; de bezoeker kan het uitzetten. |
| Pas meten na toestemming | Er wordt niets geteld tot de bezoeker toestemming geeft. |
| Geen cookiemelding | Geen melding en geen meting. |
- Het antwoord van de boot zegt of toestemming nodig is (
consent.required). Toon dan een cookiebanner met een echte keuze en geef de keuze door metPUT /_gp/v1/consenten{"analytics": "GRANTED"}of"DENIED". - Scripts van derden die cookies zetten (Google Tag Manager, pixels, ingesloten video's) laad je pas na toestemming.
- Zet een link "Cookie-instellingen" in de footer, zodat bezoekers hun keuze kunnen aanpassen.
Klaar voor Google en delen
- Per pagina een
<title>en<meta name="description">,lang="nl"op<html>, één<h1>, alt-teksten bij afbeeldingen. - Open Graph voor delen:
og:title,og:description,og:image(absolute URL, 1200×630, zelf gehost),og:url. - Een
canonicalnaar het definitieve domein, een favicon en eenapple-touch-icon. robots.txtmet eenSitemap:-regel en eensitemap.xmlmet absolute URL's. Zie Speciale bestanden.
Een <meta name="robots" content="noindex"> in je HTML houdt de site uit Google, ook als hij live staat. Zet die er
alleen in als dat de bedoeling is.
Een AI-assistent laten bouwen
Bouw je de site met een AI-assistent (Claude, Cursor en dergelijke), geef hem dan de skill
gianthost-site-bouwen (opens in a new tab) van
files.giantpanda.site (opens in a new tab). Daar staan deze regels in, met de
OpenAPI-spec van /_gp/v1 (opens in a new tab) en de CI-bestanden.