Hugo, statische websites
Bye bye Wordpress

LUG 073

Op 1 december 2015 was ik bij de Linux User Group in Den Bosch. Danny (zonder achternaam) gaf een presentatie over het genereren van statische websites met Hugo. De presentatie staat helaas niet online, maar was zeker inspirerend om zelf aan de slag te gaan met Hugo.

Wordpress eruit, Hugo erin

Afgelopen jaren is Wordpress natuurlijk heel populair geworden. Niet voor niks, want het is makkelijk om een eigen website bij te houden. Vrijwel iedereen kan een Wordpress-site gebruiken. Er zijn echter ook nadelen aan Wordpress:

  • veel aanvallen op Wordpress-sites door hackers
  • plugins maken de site extra kwetsbaar
  • site kan langzaam worden doordat deze dynamisch is

Om deze redenen heb ik ervoor gekozen een statische site te gaan bouwen met Hugo.

Hugo en andere tools

Voor mijn site heb ik gebruik gemaakt van de volgende tools:

Hugo thema’s

Er zijn voor Hugo een aantal thema’s beschikbaar, zie themes.gohugo.io. Maar het is ook eenvoudig om zelf een thema te maken.

Markdown

Posts (of pages of wat dan ook) schrijven in Hugo gaat met behulp van Markdown.

Een voorbeeld wat kan met markdown:

## Hello world
you can write text [with links](http://example.com)  
1. _italic_  
2. __bold__

En dat levert dan het volgende resultaat op:

Hello world

you can write text with links

  1. italic
  2. bold

Highlighting

Door gebruik van de Highlighting JavaScript is het mogelijk om code mooi weer te geven. Een voorbeeld met html-code:

<!DOCTYPE html>
<html>
 <body style="background-color:lightgrey;">
   <div span class="example">
     <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  </div>
</body>
</html>

Op highlight.js zijn alle talen en stijlen te bekijken.

Hugo installeren

Dat is eenvoudig op Linux:

sudo apt-get install hugo
mkdir ~/hugo
cd ~/hugo
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Hugo is geen ‘linux-only’ tool, maar is ook beschikbaar voor Windows.

Hugo als webserver draaien

Tijdens het werken aan de site is het mogelijk om hugo als een webserver te draaien. Zodra de server draait, ‘kijkt’ deze naar wijzigingen in de bestanden, waardoor de website meteen bijgewerkt wordt. De site is op dat moment te bezoeken via http://localhost:1313/

$ hugo server -w
0 draft content
0 future content
2 pages created
10 paginator pages created
4 tags created
4 categories created
in 39 ms
Watching for changes in /home/donux/hugo/{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Zodra een wijziging ontstaat, verschijnt het volgende bericht:

Change detected, rebuilding site
2015-12-28 17:17 +0100
0 draft content
0 future content
2 pages created
10 paginator pages created
4 tags created
4 categories created
in 36 ms

De browser ververst zichzelf meteen en de site is weer actueel.

Site online plaatsen

Om de uiteindelijke statische site te genereren is het voldoende om het commando ‘hugo’ in te voeren.

$ hugo
0 draft content
0 future content
2 pages created
10 paginator pages created
4 tags created
4 categories created
in 46 ms

De directory ~/hugo/public/ bevat nu alle bestanden die nodig zijn om de site op de server te plaatsen. Dat kan bijvoorbeeld met behulp van ftp.