En alweer geswitched.. Nu van Wordpress naar Hugo
Gepubliceerd op 16 december 2023 • 7 min leestijd • 1.395 woorden
Ik ben alweer van Wordpress afgestapt. Ik ben nu mijn website aan het omzetten in Hugo , een static page generator gebouwd in Go. Het lijkt alsof ik het veranderen leuker vind dan het schrijven, maar niets is minder waar.
Komt het je bekend voor? Dat zou wel kunnen. Ik heb eerder al eens geschreven Finally, another post (toen dacht ik nog dat posten in het Engels me zou helpen) en Overgestapt van Jekyll naar WordPress .. Alweer.. Ondertussen is er wel een soort van patroon in te herkennen. Ik wil iets makkelijks om in te schrijven, dus installeer ik Wordpress. Wordpress wordt voor mijn gevoel te langzaam, dus schakel ik over op een static page generator, waarbij ik de pagina’s als pure tekst kan typen, zonder rekening te hoeven houden met opmaak.
Ja, A.J., zul je nu wel zeggen, maar da’s met Wordpress toch precies hetzelfde? Je kunt in Wordpress toch tekst schrijven, blokjes maken en dat soort dingen? Daar heb je dan ook geen ongelijk in. Natuurlijk kun je in Wordpress je helemaal focussen op de tekst en al het andere loslaten. Maar voor mij is het schrijven dan toch minder frictieloos, want je moet naar een website, vervolgens inloggen, dan moet je een nieuw artikel maken. Al die stappen gaan langzaam, of, in ieder geval langzamer, dan je edit app te openen op je computer en direct beginnen met typen.
Kenmerken van Hugo
Op de website van Hugo vind je het volgende:
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Eigenlijk zegt dit alles al, maar toch ga ik het nog even wat aandikken.
- Hugo bevat standaard mogelijkheden, zodat je eenvoudig een meertalige website kunt bouwen
- Hugo is snel, want het zijn statische pagina’s. Er hoeft geen data uit een database gehaald te worden
- Hugo is open source, je hoeft niet te betalen voor het gebruik van Hugo
- Je kunt Markdown gebruiken voor het schrijven van je tekst
- Met Hugo maak je snel een meertalige website
Waarom dan overstappen
Maar het zijn niet alleen die kernmerken waarom ik overgestapt ben. Een van de dingen waarom ik overgestapt ben, heb ik al eerder aangegeven: Je kunt je focussen op het schrijven.
Opmaak
Ik ben op dit moment de tekst aan het schrijven in Visual Studio Code, een text only editor. Heerlijk, niet letten op opmaak en dat soort dingen. Natuurlijk wil je wel aangeven of iets een hoofdstukkop heeft of dat je een lijstje wilt maken, maar dat doe je allemaal door gebruik te maken van markdown. Volgens Wikipedia :
Markdown is een lichtgewicht opmaaktaal op basis van platte tekst die zodanig ontworpen is dat het gemakkelijk valt te converteren naar HTML en andere formaten met een applicatie met dezelfde naam. Markdown wordt vaak gebruikt voor de opmaak van projectdocumentatie, eenvoudige CMS-systemen en berichten in online fora.
Om het mooi te laten uitzien heb je dus wel een thema nodig. Deze kun je zelf maken, maar er is ook genoeg mooi spul op internet verkrijgbaar. Let er wel even op dat je de kleine lettertjes leest, want niet alles wat je van internet plukt kun je straffeloos gebruiken. Kijk vooral eens op Hugo Themes .
De basis van Markdown heb je snel onder de knie, dus voor de meest basale dingen hoef je niet na te denken.
Tekst kun je eenvoudig simpel opmaken. Dat ziet er dan zo uit:
*Tekst* kun je ~~eenvoudig~~ **simpel** opmaken.Ook andere dingen als headers en andere dingen als quotes kun je eenvoudig toevoegen, bijvoorbeeld deze quote:
Everything should be made as simple as possible, but not simpler.
Albert Einstein
bereik je eenvoudig door wat opmaak te gebruiken:
> Everything should be made as simple as possible, but not simpler.
>
> *Albert Einstein*
{.blockquote}De eerste alinea, samen met ‘front matter’, datgene wat je pagina definieert, ziet er zo uit:
---
author: A.J.
categories:
- Generic
date: "2023-12-13"
draft: true
tags:
- IT
- Hugo
thumbnail:
url: /images/posts/hugo-logo-wide.png
title: En alweer geswitched.. Nu van Wordpress naar Hugo
url: /alweer-geswitched/
---
Het lijkt alsof ik het veranderen leuker vind dan het schrijven, maar niets is minder waar: Ik ben alweer van [Wordpress](https://wordpres.org) afgestapt. Ik ben nu mijn website aan het omzetten in [Hugo](https://gohugo.io), een static page generator gebouwd in Go.Je ziet dat het er relatief eenvoudig en als tekst uitziet, met in de ‘Front Matter’ (het stukje tussen de —) standaard dingen:
- wie is de schrijver (A.J. in dit geval)
- in welke categorie valt dit artikel (generic)
- op welke datum (2023-12-13)
- welke tags (IT en Hugo)
- welk plaatje er gebruikt moet worden (hugo-logo-wide.png)
- uiteraard welke titel (En alweer geswitched..)
- maar ook welke url gebruikt moet worden (/alweer-geswitched/). Dit laatste is niet verplicht, maar ik hou ervan dat ik exact weet welke url het artikel krijgt.
Snelheid
De snelheid van websites gebaseerd op Hugo is een stuk hoger dan websites in Wordpress. In ieder geval, dat is mijn ervaring. Een Wordpress site is opgebouwd uit stukjes programmacode (PHP) die, op basis van informatie uit een database (MySLQ), een pagina genereert. Dat genereren doet Wordpress iedere keer opnieuw wanneer je de pagina bezoekt. Je kunt dingen aanpassen, zoals een thema voor je website of speciale pagina’s die alleen ingelogde gebruikers kunnen bekijken. Uiteraard zitten in Wordpress wel slimmigheidjes om het wat sneller te maken en zijn er plugins die de gegenereerde pagina’s opslaan/cachen als statische pagina’s. Dit zijn dan de ‘standaard’ HTML-pagina’s die niet wijzigen.
Hugo doet iets soortgelijks, namelijk op basis van invoer en het combineren met een thema, statische pagina’s genereren. Het grote verschil met Wordpress is dat Hugo dat niet doet op het moment dat je de pagina bezoekt, maar lang vóór die tijd. Hugo creëert de statische pagina’s van je ‘broncode’, oftewel de tekst van je artikel door deze op te maken door ze te combineren met een thema. Dit gebeurt allemaal op de computer waar je de artikelen schrijft, of, als je helemaal de ontwikkelaarsmentaliteit aanneemt, op het moment dat je het artikel publiceert. Deze hele actie zorgt ervoor dat je alleen maar statische pagina’s hoeft te uploaden naar je website (of pushen naar je git repository). JavaScript files categoriseer ik voor het gemak ook even als statisch.
Voor een bezoeker van je website betekent dit dat, wanneer die een pagina opvraagt, deze direct voorgeschoteld krijgt. Niets omzetten, converteren, samenstellen uit databases en dat soort dingen.
Veiligheid
Veiligheid is nog zo’n dingetje waarom ik statische pagina’s een prettig idee vind. Op het moment dat je in Wordpress (of soortgelijk systeem) een pagina of artikel wilt maken, moet je dit via internet in de database zien te krijgen. Wordpress heeft hiervoor een editor aan boord. Je kunt in een grafische omgeving je teksten invoeren, inclusief de opmaak, welke daarna in de database wordt opgeslagen.
Nou weet ik wel dat er ook stukken Javascript tussen zitten, waar echt ook wel bugs in kunnen zitten, waardoor er allerlei ongure types dingen met je website kunnen doen die je niet wilt. Aan de andere kant: als er geen database is waar data in vernaggelt kan zijn, is het enige wat je hoeft te doen om de website weer te cleanen een nieuwe push van de artikelen te doen. En uiteraard de Javascript module die lek is te vervangen door iets anders.
Open Eindjes
Natuurlijk zijn er ook nog wel wat open eindjes. Er is nog geen mogelijkheid om te reageren op artikelen, bijvoorbeeld. Aangezien je in principe niet kunt schrijven op een statische site, moet je daar wel wat dingen voor regelen. Je kunt hiervoor gebruik maken van diensten als Discus of een andere service, of je kunt zelf iets hosten. Ik ben aan het kijken om het zelf te hosten. Wanneer je het zelf host heb je controle over alles wat er gebeurt met de data die wordt opgeslagen in je reactiesysteem. Ik mag dit nog gaan uitzoeken, maar ik denk dat ik het zelf ga hosten.
Zelf aan de slag
Denk je nou: “Dat wil ik ook, statische pagina’s en een snelle website, maar hoe begin ik?”. Das positief! Je eerste stap!
In de toekomst zal ik een artikel schrijven over hoe je kunt starten met Hugo. Wil je daar niet op wachten (heel slim), kijk dan eens op de site van Hugo .
