Onze nieuwe website - van Hexo naar 11ty

Het is zover: onze website heeft een flinke update gekregen. Na jaren op Hexo te hebben gedraaid, was het tijd voor iets nieuws. We kozen voor Eleventy (11ty) als static site generator, gecombineerd met Tailwind CSS voor de styling.

Waarom de overstap?

Onze oude Hexo-website deed prima dienst, maar er waren een paar punten die ons dwars zaten:

• Verouderde dependencies - Node packages die niet meer onderhouden werden
• Beperkte flexibiliteit - Aanpassingen aan de layout waren omslachtig
• Build performance - De build werd steeds trager naarmate de site groeide

De pijnpunten in detail

Het grootste probleem was de onderhoudslast. Elke keer dat we npm install draaiden, kregen we een waslijst aan security warnings. Packages die al jaren niet meer bijgewerkt waren, dependencies van dependencies die conflicten veroorzaakten.

"De beste code is code die je niet hoeft te onderhouden."

Deze wijsheid ging steeds meer resoneren naarmate we meer tijd kwijt waren aan het bijwerken van de tooling dan aan het schrijven van content.

Wat we zochten

We stelden een lijst met eisen op:

1. Moderne tooling met actieve community
2. Eenvoudige architectuur zonder veel abstractie
3. Goede developer experience met snelle builds
4. Flexibiliteit in templating en styling

De technische stack

Na evaluatie van verschillende opties kwamen we uit op deze combinatie:

Component	Keuze	Waarom
SSG	Eleventy 3.x	Eenvoud, snelheid, flexibiliteit
Styling	Tailwind CSS 4	Utility-first, geen CSS bloat
Templating	Nunjucks	Krachtig, goede 11ty integratie
Hosting	Netlify	Automatische deploys, CDN

Eleventy: de kern

11ty is verfrissend eenvoudig. Geen magische configuratie, geen verborgen conventions. Je geeft het bestanden, het maakt er HTML van.

Configuratie

De hele configuratie past in één bestand:

export default function (eleventyConfig) {
  // Collections voor blogposts
  eleventyConfig.addCollection("blogNL", function(api) {
    return api.getFilteredByTag("blogNL")
      .sort((a, b) => b.date - a.date);
  });

  // Passthrough voor afbeeldingen
  eleventyConfig.addPassthroughCopy('src/assets/img');

  return {
    dir: { input: 'src', output: 'dist' }
  };
}

Filters

Custom filters maken het leven makkelijker:

// Datum formatting per taal
eleventyConfig.addFilter("localDate", function(date, lang) {
  const locale = lang === 'nl' ? 'nl-NL' : 'en-US';
  return new Date(date).toLocaleDateString(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
});

Tailwind CSS 4

De nieuwste versie van Tailwind brengt significante verbeteringen:

Nieuwe features

• CSS-first configuratie - Geen tailwind.config.js meer nodig
• Native CSS nesting - Cleaner syntax
• Verbeterde performance - Snellere builds

Voorbeeld: een button component

<button class="
  bg-blue-600 hover:bg-blue-700
  text-white font-semibold
  px-6 py-3 rounded-lg
  transition-colors duration-200
  shadow-lg hover:shadow-xl
">
  Verstuur
</button>

Het resultaat: consistent design zonder groeiende CSS bestanden.

Content management

Directory structuur

We kozen voor een intuïtieve mappenstructuur:

src/
├── blog/
│   ├── blog.json           # Defaults voor NL posts
│   ├── 2026-01-13-post/
│   │   ├── index.md        # Content
│   │   └── banner.jpg      # Afbeeldingen
│   └── legacy/
│       └── oude-post/
│           └── index.md
├── en/
│   └── blog/
│       ├── blog.json       # Defaults voor EN posts
│       └── 2026-01-13-post/
│           └── index.md
└── _includes/
    ├── post.njk
    └── blog-card.njk

Co-located images

Een handige feature: afbeeldingen staan in dezelfde map als de blogpost.

Voordelen

• Overzicht - Alles bij elkaar
• Verwijderen - Delete de map, klaar
• Verplaatsen - Drag & drop de hele folder

Implementatie

In de frontmatter:

banner: banner.jpg  # Relatief pad

In de template:

<img src="[page.url][banner]" alt="[title]">

(Met Nunjucks variabelen tussen dubbele accolades)

Tweetalige opzet

URL structuur

Taal	Blog index	Post URL
Nederlands	/blog/	/blog/2026-01-13-post/
Engels	/en/blog/	/en/blog/2026-01-13-post/

Vertalingen koppelen

Via de translationKey in frontmatter:

# Nederlandse versie
translationKey: my-post-2026
lang: nl

# Engelse versie
translationKey: my-post-2026
lang: en

De template toont automatisch een link naar de vertaling als die beschikbaar is.

Wat we geleerd hebben

Do's

1. Begin simpel - Voeg features toe wanneer nodig
2. Behoud URLs - Belangrijk voor SEO en bookmarks
3. Documenteer keuzes - Je toekomstige zelf zal je dankbaar zijn

Don'ts

1. Over-engineer niet - YAGNI (You Aren't Gonna Need It)
2. Kopieer geen boilerplate - Begrijp wat je toevoegt
3. Vergeet toegankelijkheid niet - Semantische HTML, alt-teksten

Technische learnings

Performance optimalisatie

• Lazy loading voor afbeeldingen onder de fold
• CSS purging voor minimale bundle size
• Caching headers correct instellen

SEO overwegingen

• Canonical URLs voor vertalingen
• Structured data voor blogposts
• Sitemap automatisch genereren

Volgende stappen

De basis staat, maar er is altijd meer te doen:

Korte termijn

• [ ] RSS feed implementeren
• [ ] Open Graph meta tags
• [ ] 404 pagina stylen

Lange termijn

• [ ] Zoekfunctionaliteit
• [ ] Gerelateerde posts
• [ ] Reading time indicator

---

Conclusie

De migratie van Hexo naar 11ty was de moeite waard. We hebben nu een snellere, beter onderhoudbare website met moderne tooling. De learning curve was minimaal en de developer experience is uitstekend.

Heb je vragen over onze aanpak of wil je sparren over je eigen website? Neem contact op!