Hoe werk ik deze site bij?

---
titel: 
intro: >
  Voor een kleine website die zelden verandert is de belangrijkste vraag niet
  “wat kan het meeste”, maar “wat kost het minste onderhoud en geld, en wat
  blijft werken als er niemand naar omkijkt”. Hieronder de voor- en nadelen.
wordpress_voordelen:
  - Vertrouwd; veel mensen kunnen ermee overweg.
  - Zelf tekst aanpassen via een visuele editor, zonder code.
  - Groot ecosysteem aan thema's en plugins.
  - Makkelijk een nieuwe ontwikkelaar te vinden.
wordpress_nadelen:
  - "Vereist onderhoud: core-, thema- en plugin-updates."
  - "Beveiligingsrisico: populair doelwit, plugins kunnen lekken."
  - Hosting met database = hogere kosten en meer dat stuk kan gaan.
  - Voor één pagina vaak overkill, en kan traag worden.
astro_voordelen:
  - ""
  - Zeer goedkoop tot gratis te hosten (bijv. Cloudflare Pages).
  - "Snel en veilig: geen database, nauwelijks aanvalsoppervlak."
  - Overzichtelijke bestanden; tekst staat in leesbare Markdown.
astro_nadelen:
  - Aanpassen vereist in de basis een build-/deploystap (git).
  - Geen visuele editor standaard — op te lossen met een lichte CMS-laag
    (Keystatic of Decap).
  - Kleinere “iedereen kent het”-vijver dan WordPress, al groeit Astro snel.
  - Minder geschikt voor sites met veel dynamiek of complexe functionaliteit.
seo_titel: WordPress of Astro voor een eenvoudige website? Een vergelijking
seo_omschrijving: "Voor- en nadelen van WordPress en Astro voor een kleine site
  die zelden verandert: onderhoud, kosten, snelheid en veiligheid."
footer: Deze pagina is zelf gebouwd in Astro.
---

## Kort gezegd

Voor een site als deze — één pagina, af en toe een tekstwijziging — weegt
**onderhoud** zwaarder dan functionaliteit. WordPress kan alles, maar vraagt
doorlopend aandacht; Astro doet minder, maar vraagt vrijwel niets.

Dit tekstblok is zelf het voorbeeld van een *vrij tekstveld*: in een
beheerpaneel bewerk je het met een gewone tekst-editor — dik, schuin,
lijstjes en [links](https://astro.build) — zonder losse invulvelden.

---
/*
  index.astro — de enige pagina van de site.

  Deze pagina HAALT alle tekst op uit  src/content/inhoud.md  en zet die in de
  juiste vorm (kop, twee kolommen, voettekst). Wil je tekst
  wijzigen? Open dan inhoud.md — niet dit bestand. Hieronder hoef je niets te
  veranderen.
*/
import Basis from '../layouts/Basis.astro';
// "Inhoud" is de vrije tekst ónder de frontmatter in inhoud.md (de
// "Toelichting"); Astro rendert die Markdown zelf naar HTML.
import Inhoud, { frontmatter, rawContent } from '../content/inhoud.md';

const heeftToelichting = rawContent().trim().length > 0;

// De twee systemen die we naast elkaar zetten. De naam ("WordPress" / "Astro")
// en de woorden "Voordelen" / "Nadelen" zijn vaste labels; de opsommingen zelf
// komen uit inhoud.md.
const systemen = [
  {
    naam: 'WordPress',
    stijl: 'wp',
    voordelen: frontmatter.wordpress_voordelen,
    nadelen: frontmatter.wordpress_nadelen,
  },
  {
    naam: 'Astro',
    stijl: 'astro',
    voordelen: frontmatter.astro_voordelen,
    nadelen: frontmatter.astro_nadelen,
  },
];
---

<!-- De SEO-velden uit inhoud.md bepalen de titel en omschrijving in Google;
     staan ze leeg, dan gelden de gewone titel en de standaardomschrijving. -->
<Basis
  titel={frontmatter.seo_titel || frontmatter.titel}
  omschrijving={frontmatter.seo_omschrijving || undefined}
>
  <main class="stuk">
    <header class="kop">
      <h1>{frontmatter.titel}</h1>
      <p class="intro">{frontmatter.intro}</p>
    </header>

    <section class="vergelijking" aria-label="Vergelijking van WordPress en Astro">
      {
        systemen.map((s) => (
          <div class={`systeem systeem--${s.stijl}`}>
            <h2>{s.naam}</h2>

            <div class="lijst lijst--voor">
              <h3>Voordelen</h3>
              <ul>
                {s.voordelen.map((punt) => (
                  <li>{punt}</li>
                ))}
              </ul>
            </div>

            <div class="lijst lijst--tegen">
              <h3>Nadelen</h3>
              <ul>
                {s.nadelen.map((punt) => (
                  <li>{punt}</li>
                ))}
              </ul>
            </div>
          </div>
        ))
      }
    </section>

    {
      heeftToelichting && (
        <section class="toelichting" aria-label="Toelichting">
          <Inhoud />
        </section>
      )
    }
  </main>

  <footer class="voet">
    <div class="voet-inhoud">
      <p>{frontmatter.footer}</p>
      <!-- Vaste navigatie (net als de labels hierboven), geen klant-tekst. -->
      <a class="voet-link" href="/hoe-update-ik/">Hoe werk ik deze site bij? →</a>
    </div>
  </footer>
</Basis>