HUGO is een statische site generator waarmee je snel en veilig websites kunt bouwen. In deze handleiding installeren we HUGO lokaal op een Arch Linux systeem, inclusief Node.js en NPM voor front-end tooling. Tot slot laten we zien hoe je wijzigingen met rsync naar de webserver verstuurt.

Benodigdheden

• Een (lokaal) systeem met Arch Linux of een afgeleide (zoals EndeavourOS of Manjaro)
• Een domeinnaam
• DNS ingesteld naar het IP-adres van de server
• Een werkende webserver (NGINX) die verzoeken voor jouw domein verwerkt
• Rechten als su of sudo om opdrachten als root uit te voeren

Voorbereiding

Zorg dat het systeem up-to-date is voordat je HUGO installeert.

1. Open een terminal.
2. Werk de pakketbron en geïnstalleerde pakketten bij.

sudo pacman -Syu

HUGO installeren

Op Arch Linux is HUGO beschikbaar in de officiële repositories.

1. Installeer HUGO met pacman.

sudo pacman -S hugo

2. Controleer de versie om te verifiëren dat HUGO correct is geïnstalleerd.

hugo version

Node.js en NPM installeren

Voor veel thema’s en build-processen zijn Node.js en NPM nodig.

1. Installeer Node.js en NPM.

sudo pacman -S nodejs npm

2. Controleer of beide beschikbaar zijn.

node -v
npm -v

Nieuwe HUGO site maken

In dit voorbeeld maken we een testsite in de map ~/sites/voorbeeld.nl.

1. Maak een map aan voor je sites en ga ernaartoe.

mkdir -p ~/sites/voorbeeld.nl
cd ~/sites/voorbeeld.nl

2. Initialiseer een nieuwe HUGO site.

hugo new site .

3. Voeg een thema toe (voorbeeld met een willekeurig thema via Git).

git init
git submodule add https://github.com/thema/voorbeeld-thema.git themes/voorbeeld-thema

4. Stel het thema in in config.toml.

nano config.toml

Voeg of wijzig de regel:

theme = "voorbeeld-thema"

Testsite lokaal draaien

Tijdens het bouwen en testen kun je HUGO als lokale webserver gebruiken.

1. Start de ontwikkelserver.

hugo server -D

2. Open een browser en ga naar:

http://localhost:1313

Je zou nu de HUGO site lokaal moeten kunnen bekijken. Wijzigingen in content en templates worden automatisch herladen zolang de server draait.

Productiebuild maken

Voor de definitieve versie op de webserver heb je een statische build nodig in de public/ map.

1. Stop de ontwikkelserver (CTRL + C).
2. Maak een productiebuild.

hugo

De gegenereerde site staat nu in de map:

./public/

Wijzigingen uploaden met rsync

Om de site online te zetten of bij te werken, gebruiken we rsync om de public/ map naar de webserver te kopiëren.

1. Zorg dat je SSH-toegang hebt tot de server, bijvoorbeeld:

ssh gebruiker@server

2. Voer op je lokale machine het volgende commando uit om de build over te zetten:

rsync -avz --delete ./public/ gebruiker@server:/var/www/voorbeeld.nl/public/

Na het uitvoeren van dit commando staat de nieuwste versie van je HUGO site op de server. Open de browser en ga naar jouw domein (bijvoorbeeld https://voorbeeld.nl) om de live site te bekijken.