Een statische website bouwen met Hugo

gray clock

27 jun 16

comments

geen reactie

author

Xavier

“Everything old is new again” en dat is ook zo met de opmars van de statische website.

Waar in het begin van het internet de meeste pagina’s met de hand werden gebouwd en statisch waren, zijn we door de jaren heen meer dynamisch gaan werken en worden pagina’s vanuit een database opgebouwd.

Dat heeft overduidelijk zijn voordelen maar heeft ook een grote beperking namelijk met betrekking tot snelheid. Gezien dynamische sites code bevat die geinterprerteerd moet worden is er wel altijd een “performance penalty”. En zelf met caching zal een statische site in de meeste gevallen nog altijd enkele malen sneller zijn.

Statische websites hebben naast de snelheid ook het voordeel dat ze minder server resources vragen, sneller door de klant gedownload worden en search robots hen hierdoor ook hogere scores toekennen. Statische sites zijn ook een heel stuk veiliger dan hun dynamische broertjes.

Het heeft echter ook nadelen. Zo moet (bij minder intelligente site generators) heel de site worden heropgebouwd telkenmale we content toevoegen of veranderen. Bij een populaire generator zoals jekyllrb kan dat bij veel pagina’s wel een tijd duren tot op het punt dat het vervelend kan zijn.

Het gegeven dat we zaken niet meer dynamisch kunnen genereren zorgt ervoor dat we voor dynamische elementen eerder naar javascript oplossingen moeten grijpen. Echter in de praktijk valt dit best wel mee en anno 2016 valt Javascript voor dergelijke zaken toch niet meer weg te denken, zelf bij dynamische sites.

Static site generators

Het verschil met vroeger is dat we statische websites niet per sé met de hand moeten bouwen maar we vandaag gebruik kunnen maken van “static site generators”.

Wanneer we gebruik maken van een “static site generator” beschrijven we de inhoud van onze site in simpele tekstbestanden. Een static site generator zal deze dan gebruiken om HTML pagina’s te genereren en onze site op te bouwen.

Veelal maken die tekstbestanden ook gebruik van Markdown. Markdown is een taal die het mogelijk maakt om eenvoudig tekst op te maken.

Bijvoorbeeld

# Titel

## Sub titel

* dit
* is
* een
* lijst

**Dit staat in vet** en *dit in cursief*

> dit is een 
> quote

Een complete lijst van mogelijkheden kan je hier bekijken.

Doordat we gebruik maken van tekstbestanden is het ook mogelijk deze te integreren in een continuous integration opzet. Wat heel vaak gedaan wordt, is dat de artikelen en inhoud naar een ‘git repository’ worden gepushed en dat een jenkins alles in gang zet om een statische versie te bouwen en te plaatsen op een webserver.

Niet enkel voor de kleintjes

Statische websites vinden niet enkel zijn weg bij kleinere sites of spelers. Enkele bedrijven die bijvoorbeeld grijpen naar static site generator:

  • Nest,
  • MailChimp,
  • Google (genereert enkele pagina’s/site’s op een statistische manier)

Het is niet enkel beperkt tot de simpele site met enkele pagina’s of een blog met een handvol artikelen. Een Vox media heeft zelf een compleet publishing systeem gecreëerd rond de static site generator middleman.

Ook met het concept van een headless of decoupled CMS zijn er veel mogelijkheden. Eén van de mogelijkheden is dat je bijvoorbeeld vanuit de API een statische website kan genereren.

Maak kennis met Hugo

Er zijn tientallen static site generators waar jekyllrb of middleman één van de bekenste zijn. Voor dit artikel kies ik echter voor een generator geschreven in golang met de naam Hugo.

De reden vaak de snelheid. Hugo is een heel stuk sneller dan pakweg een jekyllrb. Ik kan mijn eigen persoonlijke blog in minder dan een seconde genereren waar de jekyll versie er toch enkele seconden over deed. Het zorgt ervoor dat ik onmiddellijk feedback heb wanneer ik iets verander en dat is iets waar ik persoonlijk wel waarde aan hecht.

Hugo heeft daarnaast nog handige features:

  • Werkt op nagenoeg elk OS die je kunt voorstellen en is eenvoudig te installeren.
  • Ondersteunt taxonomies, generatie van table of content
  • Ondersteunt aliases, permalinks en de urls zijn dan compleet aanpasbaar
  • Ondersteunt meerdere content types
  • De frontpagina kan compleet aangepast worden
  • Heeft handige functionaliteit o.a. “Minutes to read” en een woord counter.

En dit is nog maar een kleine selectie.

Het grote nadeel vind ik persoonlijk dat op het moment van het schrijven er nog geen mogelijkheid is tot het schrijven van plugins. Functionaliteit toevoegen is nu veelal Hugo aanpassen en opnieuw compileren, afhankelijk van uw kennis is dat relatief eenvoudig of toch iets moeilijker.

Een simpele boardgame website

Eerst en vooral dien je hugo te installeren. Je kunt hugo vinden voor uw OS door de releases pagina te bezoeken en een versie te downloaden die geschikt is voor uw operating system.

Voor dit artikel gaan we een simpele boardgame website bouwen. We starten door volgend commando uit te voeren

hugo new site boardgames

Wanneer alles goed is goed gegaan zul je een melding krijgen van deze aard

Congratulations! Your new Hugo site is created in "/home/glenn/dx/boardgames".

Wanneer we naar deze directory navigeren en de inhoud bekijken zullen we het volgende aantreffen:

.
|-- archetypes
|-- config.toml
|-- content
|-- data
|-- layouts
`-- static
  • config.toml: bevat de configuratie mogelijkheden voor onze site. Hier kunt u o.a. uw base url en titel van de site instellen.
  • content directory: hier zullen we de content van onze site plaatsen
  • data directory: wordt gebruikt door hugo om configuratie bestanden in weg te schrijven
  • layouts: bevat de layout gerelateerde bestanden die nodig is om onze site te bouwen
  • static: bevat al de statische elementen zoals afbeeldingen, javascript, css of andere statische bestanden.
  • archetypes: hier kunnen we extra configuratie plaatsen m.b.t. onze content types (pagina, artikel, muzikant, boardgame, …)

Content toevoegen

Een site is niet echt praktisch zonder content en dus moeten we zelf wat content toevoegen. We kunnen content toevoegen door het hugo new commando uit te voeren.

hugo new post/catan.md

Er wordt nu een bestand gecreëerd in een subfolder posts in onze content folder. In mijn geval:

/home/glenn/dx/boardgames/content/post/catan.md created

Wanneer we deze openen in een tekst editor zullen we volgende aantreffen:

+++
date = "2016-06-12T11:24:31+02:00"
draft = true
title = "catan"
+++

Het gedeelte tussen de +++ is extra configuratie en wat met (yaml) front matter noemt. Het is een standaard manier (die men o.a. ook gebruikt in middleman en jekyll) om zaken met betrekking tot uw content (in dit geval datum, is het een draft en een titel) te configureren.

Laten we nu wat content toevoegen door een beschrijving mee te geven van het boardgame catan

+++
date = "2016-06-12T11:24:31+02:00"
draft = false
title = "The settlers of catan"
+++
The **Settlers of Catan**, sometimes shortened to just Catan, is a multiplayer board game designed by Klaus Teuber and first published in 1995 in Germany by Franckh-Kosmos
Verlag (Kosmos) as Die Siedler von Catan. Players assume the roles of settlers, each attempting to build and develop holdings while trading and acquiring resources. Players
are rewarded points as their settlements grow; the first to reach a set number of points, typically 10, is the winner. The game and its many expansions are also published by
Mayfair Games, Filosofia, Capcom, 999 Games, Κάισσα, and Devir.

Awards:

* 1995: Spiel des Jahres Game of the Year
* 1995: Deutscher Spiele Preis 1st place
* 1995: Essen Feather
* 1995: Meeples' Choice Award
* 1996: Origins Award for Best Fantasy or Science Fiction Board Game[13]
* 2004: Hra roku
* 2005: Games Magazine Hall of Fame
* 2005: Gra Roku Game of the Year
* 2015: GamesCon Vegas Game of the Century

source: https://en.wikipedia.org/wiki/Catan

Een thema installeren

In de meeste gevallen zal je zelf een thema bouwen willen bouwen, echter voor dit artikel gaan we gebruik maken van een van de beschikbare thema’s.

Navigeer naar onze themes folder en voer volgende opdracht uit

glenn@glenn-linux:~/dx/boardgames/themes$ git clone https://github.com/Zenithar/hugo-theme-bleak.git

De site testen

Ga naar de root directory van uw hugo installatie en voer volgend commando uit

hugo server --theme=hugo-theme-bleak 

Wanneer alles goed is gegaan krijg je volgende output

1 of 1 draft rendered
0 future content
1 pages created
0 non-page files copied
2 paginator pages created
0 categories created
0 tags created
in 9 ms
Watching for changes in /home/glenn/dx/boardgames/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Wanneer we nu navigeren naar http://localhost:1313/post/catan/ krijgen we volgende scherm te zien. Hugo heeft succesvol onze site gegenereert.

Website

De site bouwen

Het vorige commando genereert echter de site puur in het geheugen en dient om de site te testen. Om een versie te generen die je kunt deployen dien je volgend commando uit te voeren

hugo --theme=hugo-theme-bleak 

Wanneer alles goed is gegaan vind je in de folder public de bestanden die je kunt uploaden naar uw web server.

Dit is natuurlijk een simpel voorbeeld om snel een site te generen. Er zijn nog diverse mogelijkheden en voor dit verwijs ik u heel graag naar de documentatie van hugo.

Loading...

Daag ons uit!

Daag ons uit met jouw project, laat het ons weten!