Van bestaande website naar 11ty

Vandaag ben ik begonnen met het ombouwen van mijn bestaande website LAFHQ — Loyal Amiga Force HQ naar een moderne statische website met Eleventy (11ty).

De bestaande site werkte prima, maar de onderliggende structuur was inmiddels behoorlijk gegroeid. Tijd dus om opnieuw te beginnen met een schone basis, zonder meteen de bestaande uitstraling overboord te gooien.

Een nieuw project

Ik ben begonnen met een volledig nieuw Git-project:

lafhq/

Daarbij gebruik ik nvm om de Node.js-versie van het project beheersbaar te houden. Eleventy is vervolgens als lokale dependency geïnstalleerd.

De versie waarmee we nu werken:

Eleventy 3.1.6

De package-lock.json wordt gewoon meegenomen in Git. Daarmee leggen we naast de package.json ook de exacte dependency-versies vast.

De basis van Eleventy

De nieuwe site heeft een eenvoudige structuur gekregen:

src/
├── _includes/
│   ├── components/
│   │   ├── footer.njk
│   │   ├── sidebar.njk
│   │   └── topbar.njk
│   └── layouts/
│       └── base.njk
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── img/
│   └── js/
├── posts/
├── about.md
├── index.njk
└── search/
    └── index.njk

Hiermee is de presentatie losgetrokken van de inhoud. Nunjucks wordt gebruikt voor de layouts en componenten, terwijl Markdown gebruikt kan worden voor pagina's en blogposts.

Tijdens het opzetten liepen we meteen tegen een klassieke Eleventy-fout aan:

You’re trying to use a layout that does not exist:
_includes/layouts/base.njk

De oorzaak bleek simpel: .eleventy.js stond op de verkeerde plek. Nadat die naar de projectroot was verhuisd, werkte de build weer.

Eerst de bestaande uitstraling behouden

Voordat we functionaliteit gingen toevoegen, hebben we ervoor gezorgd dat de nieuwe site visueel overeenkwam met de bestaande website.

De bestaande onderdelen zijn daarbij opgesplitst in componenten:

• topbar
• sidebar
• footer
• base layout

Dat geeft ons straks veel meer vrijheid om onderdelen onafhankelijk aan te passen.

Blogposts met Markdown

Een belangrijke stap was het overzetten van de content naar Markdown.

In plaats van voor iedere pagina HTML te onderhouden, kunnen we nu bijvoorbeeld gewoon schrijven:

---
title: Mijn eerste post
date: 2026-09-04
tags:
  - Amiga
  - LAFHQ
---

# Mijn eerste post

Hier komt de inhoud van de blogpost.

Eleventy bouwt dit vervolgens om naar de uiteindelijke HTML.

Voor de homepage gebruiken we de daadwerkelijke postinhoud als preview. We hebben bewust geen apart excerpt-veld toegevoegd. De preview wordt gegenereerd vanuit de inhoud van de post:

<div class="post-content">
    <p>De inhoud van de post wordt hier automatisch als preview weergegeven.</p>
</div>

Dat voorkomt dubbele content: de tekst hoeft maar op één plek onderhouden te worden.

Eigen content in een Markdown-pagina

Ook speciale contentblokken kunnen vanuit Markdown worden opgebouwd. Hierdoor blijft de content in het bronbestand leesbaar, terwijl de presentatie door CSS wordt geregeld.

Dat is precies de scheiding die ik met deze nieuwe structuur wil bereiken:

Markdown
   ↓
content
   ↓
Eleventy / Nunjucks
   ↓
HTML
   ↓
CSS
   ↓
website

RSS en XML

Ook de XML/RSS-functionaliteit is meegenomen.

Daarbij kwamen we nog een klein XML-probleem tegen:

XML declaration allowed only at the start of the document

Dat bleek veroorzaakt te worden doordat er vóór de XML-declaratie output stond. Nadat dat was gecorrigeerd, werd de feed weer correct als XML geïnterpreteerd.

Afbeeldingen en assets

De nieuwe assets-structuur staat inmiddels klaar:

src/assets/
├── css/
│   └── style.css
├── img/
└── js/

De JavaScript-map is bewust leeg begonnen. Functionaliteit wordt alleen toegevoegd wanneer die daadwerkelijk nodig is.

Een nieuwe zoekfunctie

Een van de eerste nieuwe functionaliteiten die we hebben gebouwd is een volledig client-side zoekfunctie.

De zoekindex wordt tijdens de Eleventy-build gegenereerd:

posts
  ↓
Eleventy
  ↓
search.json

De browser haalt vervolgens deze index op en zoekt daarin naar overeenkomsten in:

• titel
• inhoud

Daarmee hebben we geen database of backend nodig.

De zoekfunctie wordt geopend via het zoekicoon in de topbar.

We hebben daarbij meteen een nette overlay gebouwd met:

• zoekveld
• automatische focus
• sluiten via ×
• sluiten via Escape
• sluiten door buiten de dialog te klikken
• live zoekresultaten

Een belangrijk onderdeel hiervan was het opruimen van de oude search-CSS. De oude styling bevatte nog selectors voor onder andere #search-wrapper, #search-hints en een oude #search-results-layout. Die botsten met onze nieuwe zoekinterface.

CSS opschonen

Daarmee kwamen we bij een ander belangrijk onderdeel van de migratie: niet simpelweg de oude CSS blijven meeslepen.

De oorspronkelijke stylesheet bevatte nog veel styling uit het oude Chirpy-thema. Een deel daarvan gebruiken we nog, maar andere onderdelen zijn inmiddels overbodig.

We zijn daarom begonnen met het verwijderen van de oude search-CSS en het terugbrengen van de zoekfunctionaliteit naar één eigen blok.

Dit maakt de CSS beter begrijpelijk en voorkomt dat oude selectors onverwacht nieuwe componenten beïnvloeden.

De volgende stap wordt een bredere CSS-audit:

KEEP
REMOVE
CHECK

waarbij we per component bepalen welke oude styling nog daadwerkelijk door LAFHQ gebruikt wordt.

Waar staan we nu?

De basis staat inmiddels goed:

✓ Git repository
✓ Node.js via nvm
✓ Eleventy 3.1.6
✓ Nunjucks layouts
✓ Componenten voor topbar/sidebar/footer
✓ Markdown content
✓ Blogposts
✓ Post previews
✓ RSS/XML
✓ Nieuwe search-overlay
✓ Client-side search index
✓ Search via desktop én mobile topbar
✓ Eerste opschoning van oude CSS

Het mooie is dat we nu niet meer een bestaande website aan het verbouwen zijn, maar eigenlijk een nieuwe LAFHQ-site aan het opbouwen zijn met de bestaande site als visuele referentie.

En dat geeft ruimte om de komende stappen een stuk schoner aan te pakken.

Volgende stap

De volgende logische stap is de CSS verder ontdoen van ongebruikte Chirpy-code. Daarna kunnen we de search-resultaten verder verbeteren met bijvoorbeeld een snippet, datum en highlighting van de zoekterm.

Uiteindelijk moet de structuur vooral simpel blijven:

Content  → Markdown
Templates → Nunjucks
Build    → Eleventy
Styling  → CSS
Search   → JSON + JavaScript

Precies genoeg techniek om de site prettig te onderhouden, zonder een compleet framework of backend nodig te hebben.