Aan de slag

Volledige installatiegids voor je nieuwe authority site. Volg deze stappen om je site live te krijgen.

Snel overzicht

Dit template biedt alles wat je nodig hebt om een authority website te lanceren. Het installatieproces bestaat uit:

1. Configuratie - Site-instellingen, kleuren en branding aanpassen
2. Contentstructuur - Begrijpen hoe artikelen zijn georganiseerd
3. Assets - Placeholder afbeeldingen vervangen door je eigen afbeeldingen
4. Deployment - Pushen naar GitHub en deployen op Cloudflare Pages

Stap 1: Configuratiebestanden

Drie bestanden moeten worden aangepast met je site-informatie:

Site configuratie

Bewerk src/config/site.config.ts om het volgende aan te passen:

• Sitenaam en domein
• Meta titel en beschrijving
• Auteursinformatie
• Contact e-mail
• Social links
• Lead generatie instellingen (of uitschakelen)

Kleuren

Bewerk src/styles/global.css om je merkkleuren aan te passen. Zoek naar de CSS variabelen in het :root blok. Zie COLOR-SCHEMES.md voor kant-en-klare kleurpaletten.

Astro config

Bewerk astro.config.mjs om het volgende aan te passen:

• siteHostname - je domein zonder https://
• site - je volledige URL met https://

Stap 2: Contentstructuur

Artikelen worden opgeslagen in src/content/articles/ met een hiërarchische structuur:

src/content/articles/
├── sectie-naam/
│   ├── index.mdx           # Parent artikel (Niveau 1)
│   └── kind-onderwerp/
│       ├── index.mdx       # Kind artikel (Niveau 2)
│       └── kleinkind/
│           └── index.mdx   # Kleinkind artikel (Niveau 3)

Artikel frontmatter

Elk artikel heeft deze frontmatter nodig:

---
title: "Artikel titel"
metaTitle: "SEO titel: met keywords"
description: "Meta beschrijving (140-165 tekens)"
slug: "sectie-naam/kind-onderwerp"
pubDate: "2026-01-15T12:00:00.000Z"
image: "/images/sectie-naam/kind-onderwerp/featured.webp"
imageAlt: "Beschrijving van de afbeelding"
---

Stap 3: Assets vervangen

Vervang deze placeholder afbeeldingen in /public/images/:

Stap 4: Menu configuratie

Het navigatiemenu wordt automatisch gegenereerd op basis van je content. Bepaal de volgorde door menuOrder aan te passen in drie bestanden:

• src/components/Header.astro
• src/pages/index.astro
• src/pages/sitemap.astro

const menuOrder = [
  'eerste-sectie',
  'tweede-sectie',
  'derde-sectie',
];

Stap 5: Statische pagina's

Pas deze pagina's aan met je eigen content in src/content/pages/:

• over.mdx - Over ons pagina
• disclaimer.mdx - Disclaimer
• privacy.mdx - Privacybeleid
• voorwaarden.mdx - Algemene voorwaarden

Stap 6: Lokaal testen

Test je site lokaal voordat je deployt:

npm install
npm run dev

Ga naar http://localhost:4321 om je site te bekijken.

Stap 7: Deployment

GitHub setup

git init
git add .
git commit -m "Initial commit"
git push origin main

Cloudflare Pages

1. Ga naar Cloudflare Dashboard → Pages
2. Create project → Connect to GitHub
3. Build command: npm run build
4. Output directory: dist

Omgevingsvariabelen

Stel deze variabele in via Cloudflare Pages settings als je de /templates pagina wilt beveiligen:

• TEMPLATES_PASSWORD - Wachtwoord voor toegang tot /templates

Zie SETUP.md voor gedetailleerde installatie-instructies.

Component templates

Dit template bevat verschillende herbruikbare componenten voor je content. Bezoek de Component templates pagina voor live voorbeelden van:

• Offerte formulier popup
• Inline offerte formulier
• Tabel templates met styling
• Product slider
• Review cards (thkw-top-pick en thkw-best-for varianten)
• Jaar placeholder ([[year]])

Documentatiebestanden

Voor meer gedetailleerde informatie, bekijk deze bestanden in de root directory:

• README.md - Snel overzicht
• SETUP.md - Gedetailleerde installatie-instructies
• CHECKLIST.md - Checklist voor nieuwe projecten
• COLOR-SCHEMES.md - Kant-en-klare kleurpaletten
• CLAUDE-CODE.md - Gebruik met Claude Code

Hulp nodig?

Als je problemen tegenkomt:

1. Bekijk de documentatiebestanden hierboven
2. Zoek naar TODO: in de codebase om waarden te vinden die aangepast moeten worden
3. Draai npm run build om fouten te vinden voordat je deployt