Een Hugo site opzetten - Deel 1: De omgeving

Dit is het eerste deel in een serie blogposts over het opzetten van deze website met Hugo. In dit deel behandel ik het inrichten van de ontwikkelomgeving: van installatie tot een draaiende lokale site.

Waarom Hugo?

Er zijn tientallen static site generators beschikbaar, maar Hugo springt eruit door zijn snelheid. De site wordt in milliseconden gebouwd, en de ingebouwde dev server herlaadt de pagina direct bij elke wijziging. Geen Node.js runtime, geen bundlers, geen wachttijden — gewoon snel bouwen.

Daarnaast biedt Hugo out-of-the-box ondersteuning voor meertalige sites, wat voor deze site (Nederlands en Engels) een must was.

Hugo installeren

Op Windows is de makkelijkste manier via Chocolatey:

choco install hugo-extended

Op macOS via Homebrew:

brew install hugo

Controleer daarna of alles goed staat:

hugo version

Ik gebruik de extended versie van Hugo. Deze is nodig als je SCSS/SASS wilt gebruiken of andere asset processing via Hugo Pipes.

Een nieuw project aanmaken

Met Hugo is een nieuw project aanmaken een enkele opdracht:

hugo new site mijn-site
cd mijn-site

Dit genereert de volgende mappenstructuur:

mijn-site/
├── archetypes/     # Templates voor nieuwe content
├── assets/         # Bestanden verwerkt door Hugo Pipes (CSS, JS)
├── content/        # Alle inhoud van de site (Markdown)
├── data/           # Data bestanden (JSON, YAML, TOML)
├── i18n/           # Vertalingen
├── layouts/        # HTML templates
├── static/         # Statische bestanden (afbeeldingen, fonts)
├── themes/         # Thema's
└── hugo.yaml       # Configuratiebestand

De twee belangrijkste mappen om te onthouden: content/ voor je teksten en layouts/ voor je templates.

Een thema kiezen

Hugo heeft een grote thema-bibliotheek met kant-en-klare Hugo-thema’s. Voor deze site heb ik echter een andere aanpak gekozen: ik ben begonnen met het Simple Portfolio Template, een puur HTML/CSS/JS template dat niet specifiek voor Hugo is gemaakt. Dit template heb ik vervolgens handmatig omgebouwd naar een Hugo-thema door de HTML op te splitsen in Hugo layouts en partials, en de assets te verplaatsen naar de juiste mappen.

Het voordeel van deze aanpak is dat je niet beperkt bent tot bestaande Hugo-thema’s — elk HTML-template kan als uitgangspunt dienen. Het kost wat meer werk om het om te bouwen, maar je hebt volledige controle over het eindresultaat.

Let wel op de licentie van het template dat je gebruikt. Veel templates gebruiken een MIT-licentie, wat betekent dat je het vrij mag aanpassen en gebruiken, zolang je de originele copyright-notice en licentie meelevert. Bewaar het LICENSE bestand in je thema-map om hieraan te voldoen.

Een thema plaats je in de themes/ map en activeer je in hugo.yaml:

theme: thema-naam

De configuratie

Het hart van elk Hugo project is het configuratiebestand. Ik gebruik hugo.yaml (Hugo ondersteunt ook TOML en JSON). Een minimale configuratie ziet er zo uit:

baseURL: https://jouw-domein.nl
title: Mijn Site
theme: thema-naam

Later voeg je hier parameters aan toe voor metadata, sociale links, en taalinstellingen. Maar voor nu is dit voldoende om te starten.

De lokale dev server

Dit is waar Hugo echt schittert. Start de development server:

hugo server

Je site is nu beschikbaar op http://localhost:1313. Elke wijziging die je opslaat wordt direct zichtbaar in de browser — zonder handmatig te herladen. Dit maakt het ontwikkelproces bijzonder prettig.

Wil je ook concept-posts (drafts) zien? Gebruik dan:

hugo server -D

Git inrichten

Een Hugo site is gewoon een map met bestanden, wat het perfect maakt voor versiebeheer met Git. Een paar tips:

• Voeg een .gitignore toe met daarin de public/ map (deze wordt bij elke build opnieuw gegenereerd)
• De resources/_gen/ map is Hugo’s cache voor verwerkte assets (zoals gecompileerde SCSS of verkleinde afbeeldingen). Deze wordt automatisch aangemaakt wanneer nodig, dus die kan ook uitgesloten worden
• Commit regelmatig, zodat je altijd terug kunt naar een werkende versie

public/
resources/_gen/
.hugo_build.lock

Claude Code als hulpmiddel

Bij het opzetten van deze site heb ik Claude Code gebruikt als AI-assistent. Vooral bij het inrichten van de projectstructuur, het schrijven van templates en het debuggen van CSS was dit een enorme tijdsbesparing. Claude Code begrijpt de Hugo-structuur en kan direct in je project meewerken via de terminal.

Een CLAUDE.md bestand in de root van je project helpt Claude Code om de context van je project te begrijpen — welke commando’s je gebruikt, hoe de architectuur in elkaar zit, en welke conventies je volgt.

Volgende stap

In het volgende deel laat ik zien hoe ik het HTML-template heb omgebouwd naar een volledig werkend Hugo-thema — van het opsplitsen van de HTML in layouts en partials tot het inrichten van Hugo Pipes voor CSS en JavaScript.