Website met Hugo - Deel 1 - Hugo installeren en een website maken

calendar 26-5-2022 · 4 min. lezen · Hugo  ·
Delen op: linkedin copy

Een eigen blog website starten kan natuurlijk gemakkelijk met Wordpress. Dat is één van de meest gangbare manieren om een website te starten. Echter, Wordpress heeft nadelen. Bijvoorbeeld de gevoeligheid voor securityproblemen en het gebrek aan performance als dit CMS niet goed wordt getuned. Meestal heb je niet eens al die toeters en bellen nodig die worden meegeïnstalleerd. Sterker nog, dynamische websites genereren over het algemeen vaak dezelfde content, steeds opnieuw.

Het kan anders. Tegenwoordig zijn statische website generators hot. Deze tools helpen je lokaal op je laptop, met het bijhouden van je website. Je schrijft bijvoorbeeld je blog post lokaal in een folder met alle bestanden van je website. Ben je klaar, dan geef je de tool opdracht om van de aanpassingen een website te genereren. Je kunt bijvoorbeeld je blog-post schrijven in Markdown-formaat waarna de generator er HTML van maakt.

Security

Veel grote bedrijven maken daar tegenwoordig gebruik van. Een groot voordeel is dat het in met name voorkomt dat er beveiligingsgaten in de website worden misbruikt. Omdat de site slechts uit statische content bestaat, valt er veel minder te manipuleren door hackers. Daarnaast wordt bij elke grotere of kleinere wijziging, de gehele website opnieuw gepubliceerd. Eventuele malafide modificaties zijn dan direct verdwenen en vervangen.

Performance

Een trage site betekent minder bezoekers omdat die sneller afhaken. De oplossing met Hugo lost dat probleem op. Een dergelijke website is supersnel. Deze website, tonsnoei.nl, draait ook met behulp van Hugo. Via PageSpeed Insights kun je testen hoe snel je website is. tonsnoei.nl kan niet sneller. Scoort voor mobiel 99% en voor desktop bezoek 100%!. Test dat bijvoorbeeld eens met je eigen Wordpress website.

In deze blog post laat ik zien hoe je de statische website generator Hugo kunt gebruiker. Het is niet al te ingewikkeld als je een klein beetje technisch onderlegd bent.

Installeer Hugo

  • Mac / Linux:
1brew install hugo
  • Windows:
1choco install hugo -confirm

Zie ook Hugo website

Een nieuwe website aanmaken

We gaan een website maken met de naam mijnmooiesite_nl

  1. Open de terminal.
  2. Ga naar een directory waar je jouw website wilt aanmaken: Bijv. cd Documents
  3. Maak je website aan:
1hugo new site mijnmooiesite_nl
2cd mijnmooiesite_nl

Er wordt nu een nieuwe directory gecreeerd met initiële content van de website.

Theme toevoegen

Nu de nieuwe site is gecreëerd zijn we er nog niet. Er moet een thema (layout) worden toegevoegd voordat de site een echte site is geworden. Om dit te kunnen doen is het handig om de directory om te zetten naar een git repository. Hiermee kunnen we gemakkelijk het theme toevoegen en updaten als er een update is.

  1. Voer uit
1git init
  1. Nu kun je een theme uitzoeken op de theme site van Hugo. Wij kiezen voor het "Clarity" theme in dit voorbeeld.
  2. Voer uit:
1git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity

Het theme wordt nu via GitHub als git submodule aan je website toegevoegd.

  1. Om demo content te downloaden doe je het volgende:
1cp -a themes/hugo-clarity/exampleSite/* . && rm -f config.toml
  1. Alles is klaar. Tijd om de website te bekijken. Doe het volgende:
1hugo server
  1. Open nu je browser en gebruik de url http://localhost:1313. Je website is nu zichtbaar in de browser.

De hugo server wordt opgestart. Deze zorgt ervoor dat je de website kunt bekijken en tijdens het bewerken van je site kunt zien hoe wijzigingen er uit komen te zien (door middel van hot-reload). Elke wijziging is na het opslaan direct zichtbaar op je lokale site.

Je kunt wijzigingen maken door bestanden in de content directory toe te voegen of aan te passen. Dankzij bovenstaande manier van installeren staan er een aantal voorbeeldbestanden die ook al zichtbaar zijn op je site.

  1. Als je site helemaal naar wens is, kun je de statische HTML genereren. Voer het volgende commando uit:
1hugo

In de public directory wordt de hele website als statische HTML-pagina's met CSS, plaatjes en alles wat daarbij hoort opgebouwd. Je kunt de content uploaden naar je webserver (als je die hebt) en je website is klaar.

Hoe verder?

Een website maken en uploaden naar je webserver zou voldoende kunnen zijn. Maar elke wijziging is wel weer wat handmatig werk. Je moet met Hugo de wijzigingen bouwen en daarna je website via FTP of SCP uploaden. Dat kan makkelijker.

In het volgende deel van deze set artikelen over Hugo, leg ik uit hoe je het publiceren van je website kunt automatiseren met behulp van git en Gitlab Continues Integration & Delivery. Het resultaat is dat na een commit in git de website automatisch wordt gepubliceerd.