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.
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.
Statische websites vinden niet enkel zijn weg bij kleinere sites of spelers. Enkele bedrijven die bijvoorbeeld grijpen naar static site generator:
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.
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:
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.
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
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
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
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.
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.
Vorig artikel:
7 redenen om Symfony te ontdekkenVolgend artikel:
Automatiseren van serverside website
