Home on Hugo Codex

Zeg het voort

Mon, 01 Jan 0001 00:00:00 +0000

Vind je deze website leuk, maar heb je geen geld over? Zeg het dan voort door iets over deze website op social media te zetten. Gebruik gerust de knoppen hierboven. Die delen de homepage. Bedankt, je bent geweldig!

Zeg het voort

Mon, 01 Jan 0001 00:00:00 +0000

Trakteer me op koffie

Mon, 01 Jan 0001 00:00:00 +0000

Een perfecte koffie in de ochtend maakt mijn dag helemaal goed. Trakteer me op een kleine voor een goede start of op een grote om de hele dag door te kunnen!

Trakteer me op koffie

Mon, 01 Jan 0001 00:00:00 +0000

Een perfecte kop koffie in de ochtend maakt mijn dag helemaal goed. Trakteer me op een kleintje voor een goede start of op een grote om de hele dag door te kunnen!

Trakteer me op een biertje

Mon, 01 Jan 0001 00:00:00 +0000

Ik hou erg van bier! IPA, Guinness, stout, speciaalbier… en ik vind het heerlijk om nieuwe te proberen. Trakteer me op een fluitje om op gang te komen of op een vaasje voor een lekker begin van de avond.

Trakteer me op een biertje

Mon, 01 Jan 0001 00:00:00 +0000

Ik hou erg van bier! IPA, Guinness, Stout, speciaalbier… en ik vind het heerlijk om nieuwe te proberen. Trakteer me op een fluitje om op gang te komen of op een pintje voor een lekker tintelend gevoel.

Trakteer me op bonbons

Mon, 01 Jan 0001 00:00:00 +0000

Koop een mooie doos bonbons voor me… niet voor mij, maar voor mijn vrouw. Haar bonbons geven levert me vrijwel zeker extra programmeertijd op in mijn Linux-powered man cave.

Trakteer me op bonbons

Mon, 01 Jan 0001 00:00:00 +0000

Trakteer me op een chique doos bonbons… niet voor mij, maar voor mijn vrouw. Haar bonbons geven levert me vrijwel zeker extra programmeertijd op in mijn Linux-powered man cave.

Trakteer me op Hugo-stickers

Mon, 01 Jan 0001 00:00:00 +0000

Als je dit koopt, sponsor ik BEP via Github, wat mij een paar hele gave Hugo-stickers oplevert. Daarmee kan ik mijn laptop, mijn muren, mijn deuren, mijn fiets en mijn kinderen versieren! Ik denk dat ik minimaal 3 maanden moet sponsoren op het plan van 9 dollar, maar je mag me ook 6 maanden of een heel jaar cadeau doen. BEP verdient het en ik blijf sponsoren zolang het geld binnenkomt.

Trakteer me op Hugo-stickers

Mon, 01 Jan 0001 00:00:00 +0000

Sponsor een feature

Mon, 01 Jan 0001 00:00:00 +0000

Je kunt een feature uit de uitbreidingen-bibliotheek sponsoren. Ik geef je niet alleen een eervolle vermelding op de site, maar je mag ook meedenken over extra functionaliteit van die feature.

Sponsor een feature

Mon, 01 Jan 0001 00:00:00 +0000

Je kunt een feature uit de uitbreidingen-bibliotheek sponsoren. Ik geef je niet alleen een eervolle vermelding op de site, maar je mag ook meedenken over extra functionaliteit van die feature.

Sitepins: een geweldig CMS voor Hugo

Tue, 23 Dec 2025 00:00:00 +0000

Dus je hebt een Hugo-website maar geen CMS? Bekijk Sitepins. Neem het aan van iemand die zelf een CMS voor Hugo heeft gemaakt: het is goed. Een hele soepele interface (met React). Prettig voor het oog… volledig uitgerust… en het mooiste van alles: kijk eens naar die prijzenpagina. Daar kan (en wil) ik echt niet mee concurreren! Ik weet zeker dat de prijs omhooggaat zodra dit uit bèta is, dus zorg dat je een van die geweldige deals op dit fantastische product te pakken krijgt. (klik op de afbeelding hieronder)

Een URL-redirect maken

Fri, 14 Nov 2025 00:00:00 +0000

Soms heb je een pagina die naar een nieuwe URL is verhuisd. Om geen SEO-linkwaarde te verliezen wil je dat de oude URL doorstuurt naar de nieuwe. Gelukkig heeft Hugo daar ingebouwde ondersteuning voor. Zet gewoon de oude relatieve url in de front matter onder de sleutel ‘aliases’, zo:

---
title: Some post
aliases
- /my-old-url
- /even-older-url
---

Hugo maakt nu pagina’s op basis van de ingebouwde alias.html-template. Die ziet er zo uit:

Slider carousel verbeterd

Thu, 23 Oct 2025 00:00:00 +0000

Ik was naar Flickety van Metafizzy aan het kijken, nadat ik een moderne versie van hun Isotope-component had gemaakt. Het viel me op dat Flickety het slepen van slides op desktop ondersteunt. Na wat zoeken vond ik deze codepen, die hetzelfde deed. Ik heb die functionaliteit aan mijn slidercomponent van 3kb toegevoegd… en voilà… De sliders/carousels ondersteunen nu ook slepen met de muis. Bekijk deze front-end code library.

Ik heb je zojuist misschien 25 dollar aan licentiekosten bespaard! Veel programmeerplezier!

Automatische carousel toegevoegd

Thu, 11 Sep 2025 00:00:00 +0000

Mijn vriend en collega Guus kwam met een geweldig idee: laat Hugo de content doorlopen en lijsten die alleen uit afbeeldingen bestaan omzetten in carousels. Een vibe-coding-demo en wat optimalisaties later hebben we nu een mooie nieuwe feature voor Hugo. Je kunt hem hier bekijken. De oude carousel is ook nog steeds beschikbaar als je een complexere opzet nodig hebt. Bedankt Guus en veel programmeerplezier allemaal!

Handige body-classes

Wed, 09 Jul 2025 00:00:00 +0000

Stylen wordt een stuk makkelijker als de body van je HTML-document de juiste classes heeft. De volgende classes zijn erg handig. Let op: hierbij gaan we ervan uit dat je je secties (mappen in de root van de content) Engelse meervoudsnamen geeft, zoals ‘products’ of ‘reviews’. We gaan uit van deze structuur:

content/
├── products/ <-- section
│   ├── _index.md <-- list page
│   ├── product-1.md <-- single page
│   └── product-2.md
├── _index.md <-- homepage
├── about.md <-- other page
└── contact.md

De code hieronder voegt op de homepage de class ‘home’ toe aan je body.

Zoeken met Lunr.js

Wed, 02 Jul 2025 00:00:00 +0000

We hebben zoeken met Lunr.js aan deze website toegevoegd. Lunr.js gebruikt een lokale index, waarmee je een op maat gemaakte zoekfunctie kunt bouwen. Het heeft alle voordelen van een kant-en-klaar systeem, maar is nog steeds heel goed configureerbaar. Ga je gang en probeer het.

Migratiestappen voor Hugo v0.147.9

Tue, 01 Jul 2025 00:00:00 +0000

Om volledig naar v0.147.9 te migreren moet je de volgende stappen doorlopen (als je dat nog niet gedaan hebt):

verplaats alles uit de map _default naar de root van de map layouts
verwijder de map _default
hernoem alle single.html-bestanden naar page.html
hernoem alle list.html-bestanden naar section.html
verplaats alles uit de map layouts/page naar de root van de map layouts
verwijder de map page
hernoem het bestand config.yaml (of toml/json) naar hugo.yaml (of toml/json)
vervang :filename door :contentbasename

Had je zowel een single.html in je map layouts als een single in je map layouts/page, volg dan deze instructies.

Nieuw templatesysteem in Hugo v0.146.0

Thu, 26 Jun 2025 00:00:00 +0000

In Hugo v0.146.0 hebben we de manier waarop Go-templates in Hugo worden afgehandeld volledig opnieuw geïmplementeerd. Daar horen structurele wijzigingen in de map ’layouts’ bij, plus een nieuw en krachtiger systeem om templates op te zoeken.

We hebben geprobeerd zoveel mogelijk backward compatibility te behouden door “oud naar nieuw” te mappen, maar er zijn een paar problemen gemeld. We werken aan een volledige herziening van de documentatie hierover – tot die tijd is dit een one-pager met de belangrijkste wijzigingen.

Verbetering van de Youtube-shortcode

Fri, 20 Jun 2025 00:00:00 +0000

We hebben een verbetering toegevoegd aan de Youtube-shortcode. Hij downloadt nu automatisch de Youtube-afbeelding en verkleint en snijdt hem bij zodat hij in een 16:9-verhouding past. Hiervoor is assetDir: static in je configuratie nodig. Het is een AVG-vriendelijke/legale Youtube-embed (geen cookiebalk nodig). De truc is dat het geen echte embed is… maar een link/afbeelding met een duidelijk Youtube-merkteken erop. Uitgaande links vallen niet onder de AVG-regels.

Verbetering van de lightbox

Fri, 29 Nov 2024 00:00:00 +0000

We hebben een vloeiende overgang aan de lightbox toegevoegd, plus de mogelijkheid om met de pijltjestoetsen te navigeren en de lightbox met de Escape-toets te sluiten. Bekijk het!

Brekende wijziging in summary

Thu, 10 Oct 2024 00:00:00 +0000

Ik kwam erachter dat er in release 0.134 van Hugo een breaking change is doorgevoerd. Een automatisch gegenereerde {{ .Summary }} geeft niet langer platte content terug. Dat kan je twee keer doen nadenken voordat je Hugo naar de nieuwste versie bijwerkt. Dit probleem is alleen op te lossen door {{ .Summary }} te vervangen door {{ .Summary | plainify }} op alle plekken waar je automatische samenvattingen gebruikt, en dat is nogal wat werk. Je bent gewaarschuwd!

Hugobricks heeft een update gekregen

Thu, 26 Sep 2024 00:00:00 +0000

Soms heb je alleen een goed excuus nodig… en dat heb ik net gevonden om Hugobricks bij te werken, het ultieme Hugo-thema. Geloof je me niet? Bekijk deze pagina. Ziet dat er niet geweldig uit? Ik vind van wel. Ga je eigen website maken met Hugobricks. Het thema heeft een MIT-licentie. Kijk in de Github-repository voor de licentiedetails.

Bijgewerkte image render hook

Mon, 23 Sep 2024 00:00:00 +0000

Ik heb de image render hook uit mijn artikel Alle afbeeldingen verkleinen bijgewerkt. Hij controleert nu op SVG-afbeeldingen en gaat daar goed mee om. Daarnaast gebruik ik ‘with’ om te controleren of de image resource bestaat.

{{ with (resources.GetMatch .Destination) }}
    {{ if ne .MediaType.SubType "svg" }}
        <img src="{{ (.Resize `900x jpg Smart q50`).RelPermalink | safeURL }}" alt="{{ $.Text }}" />
    {{ else }}
        <img src="{{ .RelPermalink | safeURL }}" alt="{{ $.Text }}" />
    {{ end }}
{{ end }}

Een uitgebreidere templating-/layoutstrategie?

Mon, 26 Feb 2024 00:00:00 +0000

Context: aanpak van templating/layouts

We zijn (altijd) bezig het proces/de workflow te verbeteren. Nu we de basis onder de knie hebben: is het tijd voor een uitgebreidere templating-/layoutstrategie?

Een eerste aanpak voor templating

Als we het over Hugo-layouts hebben, definieer je meestal simpelweg

my-hugo-project
|._ layouts/ Home (or index) html template
           |._ page.html
           |. _/default/list.html

We hadden het al eerder over hoe je begint en over het gebruik van partials voor (bijvoorbeeld) de header en de footer.

'page' gebruiken in shortcodes - let op de cache

Wed, 08 Nov 2023 00:00:00 +0000

Sinds recente Hugo-versies (we zitten inmiddels op v0.120) is de elegante ‘page’-notatie geïntroduceerd. We hebben nu makkelijk toegang tot een ‘globaal Page-object’! Mooi.

Terwijl we hem vrolijk zo gebruikten in een Hugo-‘shortcode’:

{{ page.File.BaseFileName }}

viel ons (schijnbaar) vreemd gedrag op tijdens het bouwen van de site en het bekijken van wat de Firefox-browser renderde. Vreemd.

In de issue-lijst van de Github-repository hebben we het gemeld:

‘page’ gebruikt in een shortcode vertoont niet erg consistent gedrag: problemen treden alleen op bij de eerste ‘hugo server’-run, [..]

Waarom je zou moeten upgraden naar Hugo v0.120

Thu, 02 Nov 2023 00:00:00 +0000

Bouw je meertalige websites en gebruik je een CMS, dan wil je upgraden naar de nieuwste Hugo-versie. Ik zal je vertellen waarom. Indexpagina’s met een underscore in je contentmap (de lijstpagina’s van secties) hadden een regel in de front matter nodig om de URL de permalink-structuur te laten volgen. In een van de recentere Hugo-versies is dat opgelost. Je kunt de permalink van de lijstpagina nu in het configuratiebestand definiëren! De losse pagina’s heten ‘page’ en de lijstpagina heet ‘section’. Met yaml ziet dat er zo uit:

Spreken op HugoConf 2023

Sun, 01 Oct 2023 00:00:00 +0000

Het was een eer om te mogen spreken op HugoConf 2023. Mijn talk ging over Hugobricks, een thema/concept voor stapelbare contentblokken in Hugo. Wil je mijn (vooraf opgenomen) talk van 7 minuten zien, bekijk hem dan op Vimeo of Youtube.

Dit was mijn derde conferentietalk. Ik heb ook gepresenteerd op JekyllConf 2019 en HugoConf 2022. Ik werd vergezeld door een aantal fantastische sprekers, zoals Joe Mooring (in de Hugo-community bekend om zijn uitstekende ondersteuning). Hij vertelde over bijdragen aan open source. Zijn talk was mijn persoonlijke favoriet. Ik vond ook de talk van Christian Oliff over render hooks erg goed, net als de talk van Liam Bigelow over Pagefind. Wil je versteld staan van getallen en schaal, dan raad ik de talk van John Phamvan aan, die vertelde over een Hugo-website met 4 miljoen pagina’s. En tot slot, voor iedereen die ooit een website naar Hugo heeft gemigreerd: je moet George Phillips bekijken met zijn verbluffende concept voor automatische migratie.

HugoConf 2023

Tue, 19 Sep 2023 00:00:00 +0000

Na de succesvolle HugoConf van vorig jaar, met 32 sprekers en meer dan 500 aangemelde deelnemers uit 49 landen, hebben we bij CloudCannon zoveel plezier gehad in het produceren van en deelnemen aan het evenement dat ze besloten het nog een keer te doen!

Sinds de eerste publieke versie, die in 2013 uitkwam, is Hugo een ongelooflijk populaire static site generator geworden, vooral bekend om zijn bouwsnelheid. Hugo is ook het favoriete gereedschap van veel Partners en Experts van CloudCannon, die met behulp van ons CMS live visueel bewerken naar hun niet-technische klanten brengen.

Nieuw automatisch inklappend menu

Mon, 06 Mar 2023 00:00:00 +0000

In mijn vorige versie van het automatisch inklappende (geneste) menu koos ik ervoor om de subsecties van Hugo te vermijden. Door een update van het kruimelpad raakte ik echter gemotiveerd om te testen of ik een genest menu kon maken op basis van secties en subsecties. Dat lukte en de code werd een stuk schoner/korter en simpeler, vooral dankzij de variabele ‘.Ancestors’. Of een pagina ‘actief’ is bepaal je met de volgende code:

Kruimelpad sinds Hugo v0.109.0

Sun, 19 Feb 2023 00:00:00 +0000

Dit is een echte parel van Joe Mooring:

Een kruimelpad genereren werd een stuk eenvoudiger met Hugo v0.109.0 en later. Gebruik de .Ancestors-methode op .Page.

<ul id="breadcrumbs">
    {{- range .Ancestors.Reverse }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{- end }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
</ul>

BIJGEWERKT 2023-03-06: Je vindt deze code nu ook in de kruimelpad-uitbreiding.

Instagram-oplossing kapot

Fri, 17 Feb 2023 00:00:00 +0000

We promootten Profile Page Images op deze website, dat leunde op een koppeling met de Instagram API. Gisteren besloten de mensen bij Meta deze koppeling uit te schakelen, omdat ze niet konden inloggen en de koppeling die wij gebruikten niet konden vinden. We hebben het over een koppeling die ruim 200 van jullie blijkbaar moeiteloos hadden gevonden en met plezier gebruikten (te zien aan het enorme bandbreedtegebruik). En die tracking-vrije bandbreedte leverde ik met alle plezier. Privacy is iets waar ik veel om geef.

Analytics toevoegen aan je Hugo-website

Fri, 03 Feb 2023 00:00:00 +0000

Om analytics in een Hugo Jamstack-website te krijgen, kun je een van de volgende aanpakken gebruiken:

Analytics-tools van derden, zoals Google Analytics of Matomo. Deze tools leveren een trackingcode die je in je JAMstack-website kunt plaatsen om gegevens over gebruikersgedrag te verzamelen.
Eigen tracking aan de serverkant: je kunt een serverless functie gebruiken om gegevens over gebruikersgedrag vast te leggen en in een database op te slaan.
Een alles-in-één dienstverlener gebruiken.

Alle drie de opties hebben trouwens hun nadelen.

Digitale downloads in de webshop

Mon, 12 Dec 2022 00:00:00 +0000

Zo nu en dan krijgen we berichten via onze chatknop onderaan deze website. Sommige mensen stellen vragen, sommige willen bedanken en sommige komen met geweldige ideeën. Dat laatste was gisteren het geval. Andrei (zijn achternaam laat ik om privacyredenen weg) stelde zich voor en vroeg of het mogelijk zou zijn om de webshop in Jekyll Codex te gebruiken voor digitale downloads.

In eerste instantie dacht ik dat zijn verzoek een hoop aanpassingen zou vergen en was ik wat terughoudend. Maar hoe langer we praatten, hoe duidelijker het werd dat die aanpassingen eigenlijk vrij subtiel waren. We waren het er allebei over eens dat als we Mollie’s Plink-dienst wilden gebruiken, we van de winkelwagen af moesten, omdat meerdere downloads de zaak onnodig ingewikkeld zouden maken. Uiteindelijk kwamen we uit op een extra variabele bij de producten, genaamd ‘payment_link’. Laat je die leeg, dan gedraagt de webshop zich gewoon zoals altijd. Vul je een productspecifieke betaallink in, dan gaat de koper rechtstreeks naar de checkout, langs de winkelwagen heen, doordat de variabelen aan de URL worden toegevoegd in plaats van aan de winkelwagen-cookie. Mensen kunnen de winkelwagen nog steeds gebruiken, alleen niet voor producten met een productspecifieke betaallink. Je zou kunnen zeggen dat dit een beetje verwarrend is (de winkelwagen maar voor een deel van de producten gebruiken). In de praktijk is het echter waarschijnlijker dat je een webshop hebt met alleen digitale downloads, of juist helemaal zonder.

Shortcodes met gebruikscommentaar

Sun, 13 Nov 2022 00:00:00 +0000

Ik heb bovenaan mijn (relevante) shortcodes commentaar over het gebruik toegevoegd. Je ziet het commentaar hieronder in de shortcode youtube.html:

<!-- 
{{/* 
    
    Usage: 
    {{< youtube id="qtIqKaDlqXo" image="/uploads/youtubeposter.jpg" >}} 
    
*/}}
-->

Dat is niet alleen handig voor developers, maar vertelt ook ons eigen CMS ( Usecue CMS) hoe het deze shortcodes moet invoegen. Het CMS leest het gebruiksvoorbeeld uit het commentaar en voegt een invoegknop toe aan het editorveld. Daardoor kunnen jouw redacteuren/klanten deze shortcodes makkelijk (her)gebruiken. Lees voor meer informatie hierover A CMS with Hugo shortcode support.

Hugo-webshop overgezet vanuit Jekyll

Wed, 12 Oct 2022 00:00:00 +0000

Ik wilde de webshop van https://jekyllcodex.org al een tijd naar deze website overzetten, maar ik kon er de tijd niet voor vinden. Gelukkig wilde mijn Spaanse vriend Fenix me helpen. Hij heeft de Jekyll-webshop naar Hugo overgezet. Je vindt een demo door bovenin op ‘Doneren’ te klikken.

Fenix verving de layouts door shortcodes, wat de bruikbaarheid verbeterde. Ook verving hij alle Liquid-code door de Go templating taal. De webshop gebruikt Mollie, wat prima werkt voor Europese betalingen. Wil je in de VS verkopen, dan kun je de dynamische betaallink van Mollie vervangen door een dynamische Paypal-link.

Nieuwe deelknoppen

Wed, 12 Oct 2022 00:00:00 +0000

Dankzij Guus Groenink hebben we nu gloednieuwe deelknoppen. Ik werk al een flinke tijd met Guus samen en die man is een Hugo-KONING! Hij bouwt dagelijks Hugo-websites voor Omelette Du Fromage (een reclamebureau). Je ziet de nieuwe knoppen in actie in onze nieuwe webshop (door Fenix overgezet vanuit Jekyll) en onder elke blogpost. De deelknoppen kunnen delen op verschillende moderne netwerken, ze hebben ingesloten (inline) SVG’s en er zit zelfs een net configuratiegedeelte bovenin de partial. Bekijk het zelf in de sectie Uitbreidingen!

Hugo debuggen

Wed, 05 Oct 2022 00:00:00 +0000

Ik bouw nu een half jaar websites met Hugo. In die zes maanden heb ik veel geworsteld en veel geleerd. Ik heb geleerd dat mijn leerstrategie “leren met vallen en opstaan” is. Dus toen ik terugkeek, zei ik tegen mezelf: wordt het niet eens tijd om te leren hoe je Hugo fatsoenlijk debugt?

Ik loop tegen een probleem aan waarbij een layout gestyled moet worden door onder een bepaalde voorwaarde een CSS-class toe te voegen, met

Een webshop bouwen met Hugo

Fri, 30 Sep 2022 00:00:00 +0000

Dit stond al lang op ons verlanglijstje: een simpele webshop in Hugo bouwen zonder maandelijks bedrag aan een derde partij te betalen. En eindelijk is het me gelukt! Wil je zien hoe het werkt, kijk dan op mijn donatiepagina. De webshop heeft maar twee instellingen nodig: het e-mailadres voor de bevestiging en je Plink-betaallink. Het opzetten kost een paar minuten en vereist alleen een Mollie-account. Er zijn geen beperkingen aan de vormgeving van de productpagina’s. Hij gebruikt het HTML API-principe, waar Lea Verou van MIT flink onderzoek naar heeft gedaan en dat eenvoudig te implementeren blijkt. Op de donatiepagina laten we zien hoe dit met productvarianten kan werken.

Alle afbeeldingen verkleinen

Mon, 04 Jul 2022 00:00:00 +0000

Bedankt dat je deze lightning talk over ‘afbeeldingen verkleinen’ bijwoont. Hugo staat bekend om zijn snelle paginaladingen. Maar als je webpagina’s wilt die direct laden, moet je ook je afbeeldingen goed verkleinen. Gelukkig kan Hugo afbeeldingen zelf verkleinen. In deze talk vertel ik je hoe je Hugo zo instelt dat hij automatisch alle afbeeldingen in je project verkleint en comprimeert, ook die welke via een extern CMS door je klant worden geüpload.

Toekomstige datums

Fri, 24 Jun 2022 00:00:00 +0000

Introductie

Bij een evenementenoverzicht wil je alleen toekomstige datums tonen. Dat is lastig, want Hugo weet alleen welke dag het is op het moment van de build, en dat kan dagen of maanden geleden zijn. Daarom hebben we een javascript-oplossing nodig om dit probleem op te lossen.

Hoe het werkt

Het script haalt de huidige datum in het formaat ‘jjjj-mm-dd’ op met javascript. Je hoeft de datum van het evenement met Hugo-templating alleen als een custom attribuut ‘future-date’ op het omliggende HTML-element te zetten; het script verwijdert vervolgens de elementen waarvan de ‘future-date’ in het verleden ligt. Deze elementen mogen van elk type zijn, ook een lijstitem of een link werkt prima.

Beeldcompressie voor luie mensen

Sun, 19 Jun 2022 00:00:00 +0000

Nee, dit gaat niet over lazy loading. We hebben het puur over beeldcompressie, want afbeeldingen zijn een belangrijk deel van je paginalading (gemiddeld 20%). Elke byte telt als je een Google Lighthouse-score van 100% wilt halen. Ik was blij te ontdekken dat Boris Smus mooi voorwerk heeft gedaan over dit onderwerp, waarin hij stelt dat een ‘sterk gecomprimeerde 2x-afbeelding kleiner is en er beter uitziet dan de ongecomprimeerde 1x-afbeelding’. Ik heb een van de voorbeelden van Boris gebruikt om dit artikel te illustreren, waarin we proberen zichtbare compressie-artefacten te vermijden en onze afbeelding(en) toch flink te comprimeren.

Carousel bijgewerkt

Mon, 23 May 2022 13:00:00 +0000

Een half jaar geleden maakte ik een slider/carousel voor Hugo, gebaseerd op deze codepen. Vandaag heb ik de code bijgewerkt en een bug opgelost (de bolletjes gaven op mobiel tijdens het swipen niet de juiste positie aan). De code heeft nu een ’event listener’ om scrollen te detecteren en ik heb een debounce-functie toegevoegd van Chris Ferdinandi, die toevallig ook een fanatiek Hugo-gebruiker is. Hij zou nu responsive en boterzacht moeten zijn.

Er is nog iets veranderd: de responsiviteit. Voor een website die ik aan het bouwen was, moest de slider een variabel aantal slides kunnen tonen. Het is me gelukt om de slider volledig responsive te maken. Je hebt misschien een herlaadbeurt nodig (omdat ik dure resize-listeners wilde voorkomen), maar je kunt met CSS bepalen hoeveel slides je carousel toont. De carousel past zich daar dan op aan.

Spaanse taal toegevoegd

Wed, 11 May 2022 00:00:00 +0000

Nog in vroege bèta, en verre van volledig vertaald, is onze Spaanse versie van deze website. Verwacht niet dat de Spaanse versie (precies) dezelfde informatie bevat als de Engelse, want de Spaanse versie wordt bijgehouden door Fenix, terwijl ik (Joost) de Engelse versie bijhoud. Fenix is enorm gepassioneerd over Hugo en ’the stackless way’. We delen dezelfde visie op webontwikkeling. We spreken elkaar wekelijks om over ‘alles rond Hugo’ te praten en we doen zelfs een aantal websiteklussen samen. Al met al een geweldige samenwerking! Ik kijk uit naar de bijdragen van Fenix op de Hugo Codex-website!

Markdown-afbeeldingen verkleinen

Fri, 08 Apr 2022 00:00:00 +0000

Vóór 2015 bouwde ik WordPress-websites. Sommige dingen in WordPress vond ik echt goed. Een daarvan was het verkleinen van afbeeldingen. Toen ik in 2015 overstapte op Jekyll kwam ik erachter dat ik afbeeldingen niet meer automatisch kon verkleinen. Gelukkig vond ik images.weserv.nl, een Nederlandse dienst voor het verkleinen van afbeeldingen. Die dienst was slimmer dan WordPress. Hij verkleinde je afbeeldingen on the fly en hield ze 30 dagen in hun cache. Een uitstekende strategie. Maar de afbeeldingen in mijn markdown werden nog steeds niet verkleind, wat vaak leidde tot enorme paginaladingen.

Redenen om Hugo te upgraden naar versie 0.96

Sat, 02 Apr 2022 00:00:00 +0000

Mijn belangrijkste reden om Hugo (van versie 0.81) naar versie 0.96 te upgraden was de taalondersteuning voor datums. Dat betekent dat ik geen ingewikkelde lookups meer nodig heb om een datum taalspecifiek weer te geven. Ik kan nu simpelweg het volgende in mijn configuratiebestand zetten:

defaultContentLanguage: nl
languageCode: nl_NL

Daarmee kan ik een taalspecifieke datum tonen met: {{ .Date | time.Format ":date_long" }}. Dat levert een Nederlandse datum op als deze: ‘2 april 2022’. Mooi toch?

Een menu maken met geneste pagina's

Thu, 23 Dec 2021 00:00:00 +0000

Veel websites gebruiken een automatisch inklappend menu. Het is een mooie en compacte manier om veel content gestructureerd te tonen, maar het vraagt wel om een hiërarchisch overzicht van al je pagina’s. Deze post legt uit hoe je dat doet.

Verschillende aanpakken

Ik heb een paar verschillende aanpakken geprobeerd. Ik begon met de aanname dat ik geen mappen in secties mocht gebruiken. Ik dacht dat een map in een sectie een subsectie zou aanmaken. Daarom begon ik met een verwijzing naar de ouder in de front matter. Toen ik erachter kwam dat ik wel degelijk submappen MOCHT gebruiken, zolang ik maar geen ‘index.md’ of ‘_index.md’ bestand gebruikte, heb ik het script herschreven. Ik ging ervan uit dat de mappenstructuur terug te zien zou zijn in mijn permalinks. Dat bleek echter ook een verkeerde aanname. Daarom heb ik het script een tweede keer herschreven. Deze keer laat ik het naar het bestandspad kijken. Het is volledig onafhankelijk van de gebruikte permalinks en werkt daardoor ook in een meertalige opzet met eigen permalinks die in het configuratiebestand en de front matter zijn gedefinieerd.

Youtube-shortcode toegevoegd

Fri, 10 Dec 2021 00:00:00 +0000

Ik heb een gloednieuwe ‘uitbreiding’ toegevoegd: een AVG-proof manier om Youtube aan je Hugo-website toe te voegen met een shortcode. Hij is geïnspireerd op de code van Paul Irish. Installeren is supersimpel. Ik heb de afbeeldingen zelfs al voor je in base64 gecodeerd. Het enige wat je hoeft te doen is de Youtube-shortcode in je shortcodes-map zetten en je kunt aan de slag!

Veel programmeerplezier!

Kruimelpad bijgewerkt

Thu, 09 Dec 2021 00:00:00 +0000

Ik bouw nu een half jaar websites met Hugo en ik ben een GROTE fan. Zeker, de documentatie is soms wat vreemd of onvolledig. Waar vind je bijvoorbeeld de variabele ‘resources’ (helemaal in kleine letters)? Ik zou het niet weten. Aan de andere kant is het Discourse-kanaal absoluut fantastisch. De tijd die mensen erin steken om iedereen te helpen is gewoon verbluffend.

In de afgelopen zes maanden heb ik veel geworsteld en veel geleerd. Toen ik dus terugkeek naar de code die ik voor mijn kruimelpad gebruikte (die ik ruim een half jaar geleden maakte), zag ik dat het beter kon… en dat heb ik gedaan.

Een nieuw CMS voor Hugo-websites

Fri, 19 Nov 2021 00:00:00 +0000

Netlify deed onderzoek naar de prioriteiten van Jamstack-developers. Wat Jamstack-developers het belangrijkst vinden is ‘performance’, wat de populariteit van Hugo verklaart. Hugo is de absolute koning van de performance. Er is geen SSG zo snel als Hugo. Andere prioriteiten van Jamstack-developers zijn uptime, veiligheid en ontwikkelsnelheid, die over het algemeen goed zijn bij elk Jamstack-project. Toch weten we (en zien we in de data) dat mensen er steeds meer moeite mee hebben om hun Jamstack-website compliant te krijgen. Dat komt waarschijnlijk door het gedistribueerde karakter van Jamstack-projecten. Een Jamstack-project combineert meerdere diensten van meerdere leveranciers. Dat betekent dat je elke leverancier op compliance moet controleren. We zien ook dat mensen zich steeds meer zorgen maken over vendor lock-in. Elke leverancier vraagt van je dat je leert hoe hun software werkt. Daarom staan die Jamstack-kanalen vol met commerciële blogposts en advertenties. Zodra je tijd hebt geïnvesteerd in het leren werken met de oplossing van een bepaalde leverancier, heb je jezelf een lock-in bezorgd. Overstappen naar een andere aanbieder zou betekenen dat je weer een andere oplossing moet leren, en dus extra tijd moet investeren die je waarschijnlijk niet hebt.

Lessen uit het overzetten vanuit Jekyll

Sun, 19 Sep 2021 00:00:00 +0000

Ik heb de afgelopen 6 jaar zo’n 30 Jekyll-websites per jaar gebouwd. Onlangs ben ik volledig overgestapt op Hugo en heb ik meerdere websites van Jekyll naar Hugo overgezet. Onderweg heb ik een paar dingen geleerd die jij ook moet weten als je de stap van Jekyll naar Hugo zet. Ik heb het lastig gehad met het leren van Hugo, maar uiteindelijk was het het waard, vooral vanwege de korte bouwtijden en de ingebouwde beeldconversie die ik er nu bij heb.

Lichtgewicht slider/carousel toegevoegd

Sat, 21 Aug 2021 00:00:00 +0000

Veel websites hebben een slider (of carousel). De meeste in de header. De grote vraag is: Moet ik wel een carousel aan mijn Hugo-website toevoegen? Dat kan ik niet voor je beslissen. Besluit je dat je er een nodig hebt, dan heb ik een nette versie toegevoegd onder Uitbreidingen > Slider/carousel in het hoofdmenu. Hieronder zie je een demo:

‹

›

De carousel is gebaseerd op een carousel met CSS scroll snap die ik eerder maakte. Op desktop kun je de pijlen en de bolletjes gebruiken, op mobiel kun je swipen. Deze carousel ondersteunt native lazy loading en ‘pauzeert’ als je er met de muis overheen gaat. Hij werkt zelfs een beetje zonder Javascript. Deze carousel weegt maar 3kb (ongecomprimeerd). Dat is 50 keer minder dan het JS-bestand van 150kb dat je moet laden voor zoiets als SwiperJS (dat overigens fantastische functies heeft).

Fotogalerij toegevoegd

Sun, 20 Jun 2021 00:00:00 +0000

Ik heb de fotogalerij van Jekyll Codex naar Hugo Codex overgezet. Een heel leuk proces, omdat Hugo de afbeeldingen zelf kan verkleinen, zonder derde partij. Ik heb twee manieren toegevoegd om de fotogalerij op te nemen: als shortcode en als partial (om in de layout te gebruiken). Ik hoop dat je hem leuk vindt, ik in ieder geval wel.

Drieënhalf jaar later

Sun, 06 Jun 2021 00:00:00 +0000

Ik vertelde je al dat migreren van Jekyll naar Hugo een stuk lastiger was dan ik dacht. Maar ik had niet verwacht dat ik daarna nog 3,5 jaar niet meer naar Hugo zou omkijken.

Wat is er veranderd?

Om te beginnen ging CloudCannon Hugo-websites bouwen, terwijl Forestry daarmee stopte. Ik ben een groot fan van CloudCannon, ze hebben me gevraagd blogposts voor ze te schrijven en ik sta op hun website, dus ik wilde Hugo absoluut een keer uitproberen op hun infrastructuur. Ten tweede had ik een paar websites die door hun groeiende omvang behoorlijk traag werden. Jekyll heeft zijn snelheid de laatste jaren flink verbeterd, maar bouwtijden van 20+ seconden waren nog steeds normaal voor mijn grotere websites (3.000+ pagina’s). Ik begon te experimenteren met GoJekyll en werd enthousiast van de bouwtijden van 1,4 seconde. Maar ik stuitte meteen op een paar bugs in GoJekyll en op wat beperkingen in blackfriday (de Markdown-converter van GoJekyll). Ook viel me op dat zowel Netlify als CloudCannon overstapten op een prijsmodel waarbij je voor bouwminuten betaalt. Dat snap ik… maar het gaf Hugo wel een extra voorsprong op Jekyll, want Hugo bouwt 20 keer zo snel (en dus goedkoper). Daardoor ging ik met nieuwe ogen naar Hugo kijken. Een enorm populair en volwassen project met ruim 50k sterren op Github.

Aan de slag met Hugo

Tue, 02 Jan 2018 00:00:00 +0000

Stap 1. Maak een basiswebsite

Een website bestaat meestal uit een paar onderdelen. De header met een menu, een sidebar, de content en de footer. Vroeger gebruikten we frames om deze componenten samen te voegen. Tegenwoordig gebruiken we includes. Voor die includes heb je een programmeertaal nodig, zoals PHP. Maar het gebruik van PHP introduceert een hoop kwetsbaarheden. Wat als we dat door het ontwerp konden voorkomen? Nou… met Hugo kan dat…

Migreren van Jekyll naar Hugo

Sun, 10 Dec 2017 00:00:00 +0000

Laat ik eerlijk zijn. Migreren van Jekyll naar Hugo was niet zo makkelijk als ik dacht.

Het eerste probleem was het begrijpen van de mappenstructuur. De handleiding van Hugo was niet erg duidelijk over de beste aanpak. Ik ben erachter gekomen dat je minstens drie bestanden nodig hebt. Je hebt een ‘home.html’ nodig voor de voorpagina, die je in je ’layouts’ map moet zetten. Daarnaast heb je daarin een ‘page.html’ en een ’list.html’ bestand nodig. Hun naam vertelt je wat ze doen: de inhoud van een specifiek content type (sectie) tonen in een lijst en één enkel contentbestand weergeven. Wil je een afwijkende lijstweergave voor ‘posts’ (of voor een ander content type, ook wel ‘sectie’ genoemd), maak dan gewoon een map aan in je ’layouts’ map met de naam van je content type, in dit geval ‘posts’.

1. Hugo installeren

Mon, 01 Jan 0001 00:00:00 +0000

Er zijn heel veel manieren om Hugo te installeren. Het mooie aan Hugo is dat installeren heel simpel is/kan zijn. Het komt eigenlijk allemaal op hetzelfde neer:

Op Windows download je de Windows-versie (tar.gz), pak je hem uit in je projectmap en start je ‘hugo server’ vanaf de command line. Op een Mac download je de MacOS-versie (tar.gz), pak je hem uit in je projectmap en start je ‘hugo server’ vanaf de command line. Op een Linux-machine installeer je Hugo door ‘sudo apt install hugo’ te typen. Ga daarna naar je projectmap en start ‘hugo server’ vanaf de command line. Wil je de nieuwste versie, dan kun je het .deb-bestand downloaden en met hetzelfde commando installeren (vervang ‘hugo’ door de naam van je .deb-bestand).

2. Wat HTML maken

Mon, 01 Jan 0001 00:00:00 +0000

Nu Hugo geïnstalleerd is, beginnen we met een hele simpele webpagina. Eerst moet je twee bestanden maken. Maak eerst een leeg bestand met de naam ‘hugo.yaml’. Maak daarna een bestand met de naam ‘home.html’ met wat simpele HTML:

<html>
<head></head>
<body>
    Dit is een hele simpele webpagina
</body>
</html>

Het bestand ‘hugo.yaml’ zet je in de root van je project en het bestand ‘home.html’ in een map met de naam ’layouts’. Je project ziet er nu zo uit:

3. Je eerste content toevoegen

Mon, 01 Jan 0001 00:00:00 +0000

Nu we een ‘index.html’ bestand hebben, gaan we de code van de content scheiden. Hugo gebruikt hiervoor Markdown. Alle content wordt opgeslagen in ‘.md’ (Markdown) bestanden in een map ‘content’ in de root van je project. Maak een Markdown-bestand met de naam ‘_index.md’ dat er zo uitziet:

---
title: Mijn eerste contentbestand
---
Mijn eerste alinea in Markdown

Sla het bestand op in de map ‘content’. Pas nu je ‘/layouts/home.html’ bestand aan, zodat het er zo uitziet:

4. Je eerste partials gebruiken

Mon, 01 Jan 0001 00:00:00 +0000

Een website bestaat meestal uit een paar onderdelen die op elke pagina terugkomen, zoals een header met een menu en een footer. In plaats van die aan elke pagina toe te voegen, kun je een ‘partial’ gebruiken. Partials moeten opgeslagen worden in de map ‘/layouts/_partials’.

Maak een bestand ‘header.html’ dat er zo uitziet:

<html>
<head></head>
<body>

Maak een bestand ‘footer.html’ dat er zo uitziet:

</body>
</html>

Sla beide bestanden op in de map ‘/layouts/_partials’. Werk nu je ‘/layouts/home.html’ bestand bij en zorg dat het er zo uitziet (vervang de code door links naar de partials):

5. Nog een contentbestand toevoegen

Mon, 01 Jan 0001 00:00:00 +0000

Onze website begint vorm te krijgen ;-). Maar we missen nog een nette contactpagina. Om die te maken, maken we een bestand ‘/content/contact.md’. Dat bestand ziet er zo uit:

---
title: Contactpagina
---
Stuur me een e-mail op joost@vdschee.nl

We hadden al een layoutbestand (home.html), maar dat bestand gold alleen voor de homepage. Daarom hebben we nu een tweede bestand nodig. Dat bestand mag een exacte kopie van ‘home.html’ zijn en moet je ‘page.html’ noemen. Dit bestand sla je op in de map ‘/layouts/’.

6. Een blog toevoegen

Mon, 01 Jan 0001 00:00:00 +0000

Elke website heeft een nieuwssectie of een blog. Daarom gaan we een map ‘posts’ aan onze contentmap toevoegen. In deze nieuwe map maken we een markdown-bestand met de naam ‘hello-world.md’, ons eerste bericht. Dat bestand ziet er zo uit:

---
title: Hallo wereld
date: 2016-02-01 10:00:00
---
Dit is mijn eerste blogbericht

De datum moet de huidige datum zijn. De tijd is optioneel. Daarnaast gaan we een (nieuw) layoutbestand toevoegen voor ons blogoverzicht (een lijstweergave van onze berichten). Hugo eist dat je dit bestand ‘section.html’ noemt en in de map ’layouts’ opslaat. Dit bestand ziet er zo uit:

Afrekenen

Mon, 01 Jan 0001 00:00:00 +0000

Voornaam

Achternaam

E-mailadres

Adres

Postcode

Plaats

Verzending

Land

Cadeauverpakking Geen cadeauverpakking Cadeauverpakking (+ € 2.00)

Bericht

terug naar winkelwagen

Totaalbedrag

Winkelwagen: € 0.00

Betalingen zijn 100% veilig en worden afgehandeld door de betaalpagina van Usecue. Op het volgende scherm kun je met een QR-code, iDEAL of creditcard betalen.

Automatisch inklappend menu

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Veel websites gebruiken automatisch inklappende menu’s met geneste pagina’s. Dat is een prima manier om veel content gestructureerd te tonen, maar het vraagt wel om een hiërarchisch overzicht van al je pagina’s. Dit is een genest menu dat je met een simpele include kunt toevoegen. Wil je het in actie zien, bekijk dan de demo.

Hoe het werkt

Dit script leest de mappen in je sectie en maakt daar automatisch een inklappend, genest menu van. Let op: je mag GEEN ‘index.md’ bestand in je mappen gebruiken. Je hebt WEL een _index.md nodig in een map die andere pagina’s bevat. Kijk voor de duidelijkheid naar de mappenstructuur van de demo.

Betalen

Reading time: {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}

Hoe het werkt

Dit script herkent externe links en pdf’s. Het voegt automagisch ’target="_blank"’ aan deze links toe. Dat gebeurt met de volgende code.

[expand]

{{ $link := .Destination }}
{{ $isRemote := (or (strings.HasPrefix $link "http") (in (lower $link) ".pdf")) }}
{{- if not $isRemote -}}
  {{ $url := urls.Parse .Destination }}
  {{- if $url.Path -}}
    {{ $fragment := "" }}
    {{- with $url.Fragment }}
      {{ $fragment = printf "#%s" . }}
    {{ end -}}
    {{- with .Page.GetPage $url.Path }}
      {{ $link = printf "%s%s" .RelPermalink $fragment }}
    {{ end }}
  {{ end -}}
{{- end -}}
<a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isRemote }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

[/expand]

Over Hugo Codex

Mon, 01 Jan 0001 00:00:00 +0000

“Hugo Codex wil het je makkelijker maken om in je volgende project voor Hugo te kiezen.”

Voor front-end developers

Hugo Codex is gemaakt door Fenix en Joost om het collega front-end developers makkelijker te maken om in hun volgende project voor statische webtechnologie te kiezen. Met de startersgids begin je helemaal vanaf nul. Wil je meer over Hugo weten, kijk dan in de officiële Hugo documentatie. De link staat in het menu bovenaan.

Privacyverklaring

Mon, 01 Jan 0001 00:00:00 +0000

Hosting bij Leaseweb

Deze website wordt gehost op servers van Leaseweb. Usecue CMS wordt gebruikt als extern CMS. Leaseweb kan (zoals elke hostingpartij) volledig inzicht hebben in bezoekersgegevens, zoals IP-adressen die verbinding maken, bezochte pagina’s, enzovoort. Er zijn overigens geen aanwijzingen dat Leaseweb bezoekers actief profileert. Met een VPN kun je dit (proberen te) voorkomen!

Google Analytics

Deze website gebruikt Google Analytics. We hebben echter alles gedaan wat we konden om de macht van Google te beperken. We hebben Google Analytics zo ingesteld dat IP-adressen geanonimiseerd worden en dat er altijd SSL gebruikt wordt, en we hebben een verwerkersovereenkomst met Google gesloten. Deze maatregelen komen voort uit een richtlijn van het CBP (het Nederlandse College bescherming persoonsgegevens) uit 2018 over hoe je Google Analytics zonder expliciete toestemming rechtmatig kunt gebruiken.

Slider/Carrousel

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Deze carrousel is gebaseerd op een carrousel met CSS scroll snap. Deze carrousel weegt maar 3kb (ongecomprimeerd). Op desktop bedien je hem met de pijlen en de bolletjes, op mobiel kun je swipen. Hij werkt min of meer zonder Javascript. Deze carrousel ondersteunt native lazy loading (omdat hij gewone image-tags gebruikt in plaats van achtergrondafbeeldingen). Je kunt meerdere carrousels op één pagina zetten en de carrousel ‘pauzeert’ als je er met de muis overheen gaat.

Slider/Carrousel (handmatig)

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Winkelwagen

Mon, 01 Jan 0001 00:00:00 +0000

			Aantal	Prijs
Je winkelwagen is nog leeg.

€ 0.00

Winkelwagen
Afrekenen
Betalen

Youtube shortcode

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Zoeken

Mon, 01 Jan 0001 00:00:00 +0000

Hieronder kun je deze site doorzoeken met het hele simpele Google-zoekvak. Deze zoekfunctie gebruikt de cache van Google om de pagina’s te vinden. Wil je dit ook gebruiken, zorg dan dat je een XML-sitemap hebt. Dat helpt Google om de nieuwste toevoegingen aan je website te vinden.

Zoeken

Mon, 01 Jan 0001 00:00:00 +0000

Hieronder kun je deze site doorzoeken met Lunr.js. Deze zoekfunctie gebruikt een eigen index om de pagina’s te vinden.

Zoeken met Google

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Moderne websites hebben een zoekbalk waarmee je binnen de site naar specifieke content zoekt. Die zoekvelden doorzoeken vaak realtime de database. Dat kan niet binnen een statische website. Daarom moet er een andere oplossing komen.

Hoe het werkt

Deze zoekfunctie leunt op de index van Google. Hij bevraagt de zoekmachine van Google rechtstreeks. De resultaten worden binnen de interface van Google getoond (op een nieuwe pagina), maar zijn beperkt tot de site die jij opgeeft.

Zoeken met Lunr.js

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Hoe het werkt

Deze zoekfunctie leunt op een lokale index. Hij gebruikt het script Lunr.js om te zoeken. Dat script heeft geen jQuery nodig. Eerst wordt er een lokale index opgebouwd met de variabele documents. Daarna wordt de code van Lunr.js aangeroepen. Ten slotte zet een zelfgemaakte functie (genaamd ’lunr_search’) de resultaten in een Google-achtige stijl op het scherm.