krebos.nl
Featured image of post Een nieuwe vormgeving

Een nieuwe vormgeving

Krebos.nl heeft een nieuwe vormgeving gekregen.

Na heel wat jaren toch afscheid genomen van Wordpress. Redenen? Waarom moet je voor een vrij statische blog website een database en een php script taal hebben? Gevoelsmatig zal een Wordpress site derhalve altijd langzamer zijn dan een ‘statische’ HTML website. Tuurlijk met caching kan de boel geoptimaliseerd worden maar alles wat met de database moet werken zal de boel vertragen. de oude wordpress website

Functionaliteit inleveren

In de oude krebos.nl site was het mogelijk om:

  • comments te plaatsen
  • een contact formulier in te vullen
  • via een wysiwyg (what you see, is what you get) editor de blog artikelen te schrijven
  • als gebruiker in te loggen
  • plugins te installeren
  • enz.

Dat zal in de nieuwe opzet allemaal niet meer mogelijk zijn.

Wat is het alternatief dan

In feite wilde ik gewoon een domme, statische HTML site. Maar natuurlijk wel met de mogelijkheid nog nieuwe artikelen toe te voegen. En het liefst zou ik de bestaande (SEO) url’s niet willen kapot maken. En hoe krijg je al je artikelen netjes ‘uit’ Wordpress?

In 1e instantie heb ik wat gestoeid met een flat-file CMS grav. Het lukte me wel om wat pagina’s te maken, maar op layout gebied en archives/tags functionaliteit liep ik vast. Hmmmm, dan maar niet! Het bleek dat ik op zoek was naar een SSG (Static Site Generator) en ik stuitte op hugo.

hugo

Op mijn linux kan je hugo gewoon uit de repository installeren. En m.b.v. de website heb je vrij vlot een demo website gegenereerd. Met de hugo server wordt de content in .md (markdown) bestanden m.b.v. templates en je gekozen theme omgezet naar een public statische website. Als je de server laat draaien en je saved opnieuw je .md bestand, dan wordt de wijziging direct doorgevoerd en zichtbaar.

1
2
3
4
5
6
hugo new site krebos
cd krebos
git init
hugo new theme krebosTheme
hugo server
hugo new content content/posts/2025/nlziet-of-nlziet-niet-deel-1.md

Hoe krijgen we de wordpress posts ge-exporteerd?

httrack, poging 1

Met httrack kan je een gehele website door ‘crawlen’ en lokaal trekken. Dat leek me op zich best een mooie manier. Mijn 1e poging duurde 3 uur en had iets van 8 errors. Maar dit was niet ideaal omdat:

  • er zaten nog calls in naar het echte krebos.nl domein
    • o.a. admin-ajax.php calls
    • en wp-emoji-release.min.js
    • ook bevatte de srcset attribute harde verwijzingen naar krebos.nl

httrack, poging 2

Wellicht is het slimmer om eerst een aantal Wordpress plugins uit te zetten en settings te wijzigen:

  • AuthLDAP, heb ik volgens mij niet geinstalleerd
  • Captcha
  • Contact Form Email
  • via settings de mogelijkheid tot discussie dicht te zetten

Opnieuw 3 uur laten crawlen, daarna met het sed commando het e.e.a. lopen corrigeren. Maar httrack blijkt logischerwijs niet alle image(formaten) gedownload te hebben. Dus heb ik zelf de wp-content/upload directory opgehaald. Naderhand m.b.v. find en sed toch nog het e.e.a. lopen tweaken (googleapis calls en fonts.gstatic.com verwijderd.)

wp2hugo

Op de hugo site worden ook verschillende wordpress -> hugo migratie oplossingen aangedragen. Vanuit Wordpress dus een export van de gehele site gemaakt. Dit bestand vormt de basis voor de wp2hugo conversie. En zowaar dit leverde echt een goed resultaat op.

Dus eigenlijk zo gepiept?

Nou dat hangt er van af? Op zich had ik natuurlijk wel een aantal wensen:

  • het liefst een layout die enigszins lijkt op de oude krebos.nl site
  • de groepering per categorie, een tag wolk, archieven en het liefst een zoekfunctie
  • uiteindelijk gaat het uitzoeken en het verkennen van een theme best wat tijd kosten.
  • na wat omzwervingen bij theme-stack uitgekomen
  • d.m.v. overriding kan je via je eigen layout de gekozen theme toch her en der nog aanpassen
  • wel bleek dat de ene theme kijkt naar cover.image als artikel afbeelding, en een ander theme kijkt weer naar alleen een image
  • dus uiteindelijk heb ik ieder artikel (circa 119 posts) toch moeten corrigeren op het punt van:
    • de image
    • de description, korte beschrijving waar de post over gaat
    • de image galleries in het artikel, Wordpress maakt automatisch van 1 afbeelding direct 6-10 kleinere afbeeldingen, die dan goed scalen bij andere resoluties.
  • m.b.v. een beetje hulp toch een tags cloud pagina kunnen maken.
  • de categories + tags voorzien van aantallen tussen haakjes
  • klein beetje customizen qua styling

Het eindresultaat ziet er nu ongeveer als volgt uit: de nieuwe krebos look

Verschil in omvang

  • de oude www directory van de Wordpress site was zo’n 823 Mb
  • de wordpress database bevatte 65 tabellen met totaal 7553 records, de export van de database is zo’n 5,6 Mb in een *.sql bestand.
  • de huidige www directory van hugo-krebos site is zo’n 257 Mb
Gemaakt met Hugo
Theme Stack ontworpen door Jimmy