Deze Blog is Gebouwd met Hugo en DeepSeek
Deze blog die je nu leest is volledig gebouwd met hulp van een AI assistent — specifiek DeepSeek v4 Pro, draaiend via OpenCode. Geen externe API’s, geen ChatGPT, geen Copilot. Gewoon een lokaal model dat code schrijft, templates bouwt, en content genereert. Dit is hoe dat ging.
De stack
- Hugo — statische site generator, geschreven in Go. Supersnel, geen database, geen runtime.
- Tailwind CSS v3 — utility-first CSS framework. Native geïntegreerd via Hugo’s
css.TailwindCSSpipe (geen PostCSS CLI nodig). - DeepSeek v4 Pro — het model dat de code schreef, templates bouwde en content herschreef.
Het proces
Ik begon met een half-af Hugo project. Een corporate “AI-factories” theme met drie generieke blogposts en een hoop template duplicatie. De opdracht aan DeepSeek was simpel:
“Maak er iets moois van in de sfeer van kopia.io, maar dan voor een persoonlijke tech blog”
Stap 1: Design brainstorm
Het model begon niet blind te coderen. Het verkende eerst de volledige projectstructuur, las alle bestanden, en presenteerde een gestructureerd ontwerp met:
- Kleurenpalet (dark mode
slate-900/950, gradient accentenbrand-500 → cyan-400) - Pagina-structuur (Home, Blog, Projecten, Over, Tags)
- Component breakdown (header, footer, cards, badges)
- Aanpak keuze: Hugo + Tailwind vs custom CSS
Na mijn feedback (Tailwind, dark mode toggle, persoonlijke stijl) ging het aan de slag.
Stap 2: Architectuur fix
Het oorspronkelijke theme had een klassiek Hugo-probleem: alleen index.html en baseof.html gebruikten template inheritance. Alle andere pagina’s dupliceerden de volledige HTML shell. DeepSeek herkende dit direct en herstructureerde alles naar een proper block-systeem:
{{/* baseof.html — de HTML shell, één keer gedefinieerd */}}
<html>
<head>...</head>
<body>
<header>...</header>
<main>{{ block "main" . }}{{ end }}</main>
<footer>...</footer>
</body>
</html>
{{/* single.html — extend baseof, definieer alleen content */}}
{{ define "main" }}
<article>
<h1>{{ .Title }}</h1>
{{ .Content }}
</article>
{{ end }}
Van 8 standalone HTML-bestanden naar 1 base template + 10 schone block-templates. DRY principle in actie.
Stap 3: Design implementatie
Tailwind classes in plaats van custom CSS:
sticky top-0 z-50 backdrop-blur-mdvoor de headerbg-gradient-to-r from-brand-500 to-cyan-400 bg-clip-text text-transparentvoor gradient tekstcard-hovercomponent methover:-translate-y-1animatiedark:prefix voor dark mode varianten
De dark mode toggle is 5 regels JavaScript. Geen libraries, geen frameworks.
Stap 4: Content herschrijven
De bestaande blogposts waren corporate (“Bouw slimme modellen die leren van data”). DeepSeek herschreef ze naar persoonlijke stijl:
- “Mijn Homelab: Van Raspberry Pi naar Mac Mini M4”
- “Lokale LLMs Draaien: DeepSeek op een Mac Mini”
- “Self-Hosting met Docker: Lessen uit de Praktijk”
Elke post kreeg tags, een pakkende description, en een consistente stijl. Ook de projectpagina’s werden gegenereerd — WhatsApp MCP, Caldav MCP, Home Assistant, M5Stack.
Wat DeepSeek goed deed
- Code structuur — herkende template duplicatie en fixte het met proper Hugo patterns
- Design consistentie — alle 14 templates delen dezelfde Tailwind classes, spacing, en componenten
- Edge cases — 404 pagina, mobiel menu, dark mode FOUC preventie, RSS feeds, Open Graph metadata
- Foutafhandeling — toen de
resources.PostCSSpipe faalde, switchte het naar Hugo’s nativecss.TailwindCSSpipe - Nederlandse content — natuurlijk klinkende blogposts, geen vertaalmachine-gevoel
Wat ik zelf moest doen
- Design keuzes maken (“welke aanpak?”, “dark mode toggle of niet?”)
- Domein specifieke kennis (welke projecten, welke tech stack details)
- Preview checken en feedback geven
De cijfers
| Metriek | Waarde |
|---|---|
| Pagina’s | 47 |
| Templates | 14 |
| Blog posts | 3 (+ deze) |
| Project pagina’s | 4 |
| CSS (ongeminificeerd) | 3.2 KB |
| JavaScript | 0.5 KB |
| Build tijd | ~350ms |
| AI tokens gebruikt | ~80K |
Conclusie
AI-assisted development is geen hype — het werkt echt. Maar niet als vervanging van een developer: als accelerator. DeepSeek deed het zware werk (code schrijven, templates bouwen, content genereren), ik deed de richting (design keuzes, domein kennis, kwaliteitscontrole).
Het resultaat is een statische blog die eruit ziet alsof er dagen handwerk in zit. Gebouwd in een paar uur, met een AI die lokaal draait op een Mac Mini.
Is dit de toekomst van webdevelopment? Voor kleine projecten zoals deze: absoluut.
Deze post is, ironisch genoeg, ook geschreven door DeepSeek v4 Pro. De prompt was: “schrijf een blog artikel over hoe deze website is geschreven met hugo en deepseek”.
Gerelateerde posts