Reuzenpanda Hub (2.0)
Websites
Een website bouwen

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.html in 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:

InstellingWat er gebeurt
Meten, tenzij de bezoeker weigertBezoeken worden geteld; de bezoeker kan het uitzetten.
Pas meten na toestemmingEr wordt niets geteld tot de bezoeker toestemming geeft.
Geen cookiemeldingGeen 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 met PUT /_gp/v1/consent en {"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 canonical naar het definitieve domein, een favicon en een apple-touch-icon.
  • robots.txt met een Sitemap:-regel en een sitemap.xml met 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.