Een voordeel van een blog maken met Hugo is dat het ontzettend makkelijk is om het op te zetten. Na het volgen van een paar simpele stappen heb je binnen no time een website in de lucht. Ondanks dat de documentatie rond het opzetten van een Hugo site je prima op weg helpt bij het opstarten van een website in Hugo, doorloop ik hieronder het opstartproces met wat extra tips en tricks voor het bouwen van een website in macOS of Linux. Informatie voor andere besturingssystemen vind je hier.

Voorwaarden

• Je bent bekend met de Terminal
• Je gebruikt een 64-bit Mac
• Homebrew is geïnstalleerd.

Installeren

Hugo installeren op een Mac is met behulp van Homebrew gedaan met één regel op de Terminal.

brew install hugo

Nu Hugo is geïnstalleerd kun je een website maken. Navigeer in de Terminal naar de map waar je je website wilt maken - voor de website wordt een nieuwe map aangemaakt, dus dat hoef je niet zelf te doen.

hugo new site sitenaam

Templates

De makkelijkste manier om een website te maken is door gebruik te maken van een bestaande template, of theme. Er zijn verschillende sites met gratis templates voor Hugo, bijvoorbeeld op de site van Hugo zelf en op hugothemesfree.com.

Een alternatief is om zelf een template te ontwikkelen. Het voordeel hiervan is dat je zelf helemaal in de hand hebt hoe je website eruit komt te zien en welke functionaliteit deze heeft. Het kost wel veel meer tijd dan een bestaand thema gebruiken, en kennis van HTML, CSS en enige programmeerervaring is erg welkom. Naast dat je veel controle over je website hebt, is het ook erg leuk om zelf een template te maken. Hugo biedt een erg mooi framework en ik heb erg veel plezier in werken met Go Templates.

Een thema voeg je als volgt toe:

Pagina’s toevoegen

Nu de basis staat is het tijd om je website te vullen met content.

hugo new posts/mijn-eerste-post.md

Hiermee voeg je een pagina met de titel mijn-eerste-post toe aan de map posts. Op deze pagina staat afhankelijk van het gekozen template al de Front Matter op basis van het bijbehorende archetype.

Front Matter? Grofweg bestaan Hugo pagina’s uit twee delen: de Front Matter en de content. De Front Matter bevat gestructureerde gegevens over de pagina, bijvoorbeeld de titel, datum en tags. De content bevat de daadwerkelijke inhoud van de pagina.

Je website bekijken

Voer het volgende commando uit in de Terminal om tijdens het bouwen de ontwikkelingen van je website te kunnen bekijken:

hugo server -D

De aanvulling server geeft aan dat, in plaats van de statische website te genereren, Hugo als server moet draaien. Het voordeel hiervan is dat wijzigingen direct zichtbaar worden in de browser. De optie -D geeft aan dat pagina’s met de status draft ook moeten worden weergegeven. Als de Hugo server draait kun je de website bekijken in je browser, standaard via localhost:1313.

Om uiteindelijk de website te bouwen die je kunt publiceren op internet, voer je simpelweg het commando

hugo

in in de Terminal. Je website wordt dan gebouwd in de map public. Het enige dat je dan nog hoeft te doen is ’m publiceren.