Websitemigratie @ Sweet Mustard : een ontdekkingstocht voor gevorderden 13 Sep 2017

Websitemigratie @ Sweet Mustard : een ontdekkingstocht voor gevorderden 13 Sep 2017

Banner

Wat vooraf ging…

Ik ben Kevin Baes, student Toegepaste Informatica aan Howest, campus Rijselstraat. Met wat geluk startte ik eind juli een vakantiejob bij Sweet Mustard, een joint venture tussen TVH Group en De Cronos Groep. Een maand lang zou ik er aan de slag gaan als website ontwikkelaar. En toch heeft het niet veel gescheeld.

Een docent hoorde mij vertellen dat ik een job in een supermarkt had gevonden. Aangezien ik geen vacatures vond in de IT-sector had ik weinig andere keuze. Mijn docent bracht redding. Hij vond het niet kunnen dat ik geen IT-gerelateerde job deed en bracht mij in contact met Sam Bambust, Managing Partner bij de Cronos Groep. Enkele telefoontjes later maakte ik kennis met Mike Seghers, Technology Coach bij Sweet Mustard. Een boeiend, vrij informeel solicitatiegesprek resulteerde in een concrete job: de huidige website migreren naar hun eigen server.

Wat te gebruiken om de website te maken?

Eén van de belangrijkste requirements voor de nieuwe website: de inhoud van de website moest relatief gemakkelijk aangepast kunnen worden, zonder al te veel technische kennis. Daarnaast moesten bepaalde onderdelen, zoals de nieuwsartikelen, als blogposts beheerd kunnen worden. Ten slotte moest er ook een backend voorzien worden die e-mails kan versturen. Een static site generator leek mij de beste optie.

Het begin van een grote zoektocht, want er zijn tientallen mogelijkheden. Uiteindelijk viel de keuze op Hexo, een framework dat in javascript wordt geschreven. Een ander voordeel is dat we, doordat we in node werken, alle npm packages kunnen gebruiken die we willen.

Terug naar de jaren 90

De e-mails die door MailChimp uitgestuurd worden de huisstijl meegeven was het minste werk, dus begon ik daarmee. Hierbij werd al snel duidelijk dat het stijlen van e-mails een iets andere aanpak vergt dan het stijlen van webpagina’s. Alles moet met tabellen gebeuren, stijlen dienen in de webpagina opgenomen te worden. Meer dan 15 e-mails moesten gestijld worden, voortdurend stijlen kopiëren was bijgevolg geen optie. De oplossing was een gulp taak opzetten, die met behulp van een npm package de stijlen uit het apart bestand naar het HTML-bestand kopieert. Eerste opdracht achter de rug, tijd voor het echte werk: de Hexo website maken.

Ontwikkeling van de Hexo site

Het was even zoeken om alle mogelijkheden van Hexo te ontdekken. De documentatie is bij momenten vrij beperkt, dus een ‘trial-and-error’ proces was noodzakelijk. Eens ik geleerd had hoe ik een eenvoudige website bestaande uit 1 pagina kon maken, was het tijd voor een volgende stap. De Sweet Mustard website heeft meerdere pagina’s, waar ook blogposts op gepubliceerd worden. De tools om dit alles te kunnen maken zijn niet volledig geïmplementeerd in het framework of als plugin, dus ik heb zelf een kleine uitbreiding moeten schrijven.

De uiteindelijke uitbreiding bevat maar een vijftigtal lijnen code, maar doordat de documentatie niet gedetailleerd genoeg is, heb ik soms wat broncode moeten lezen om te weten wat ik exact kon doen. Het resultaat is een extensie die ervoor zorgt dat je in de markdown van een pagina een aantal configuratie-opties krijgt waardoor elk type pagina kan geconfigureerd worden met een aangepaste template, met blogposts van een bepaald type en met links naar de detailpagina’s van de blogposts.

Voor mezelf is dit het werk waar ik het meeste voldoening uit gehaald heb. Dit proces maakt het immers veel eenvoudiger nieuwe content toe te voegen.

Going live

Het grote moment om de website op de server te krijgen en de productieomgeving op te zetten is aangebroken. De configuratie gaat vrij vlot, en is een goeie opfrissing van mijn kennis van linuxcommando’s en configuratiebestanden. Uiteindelijk heb ik een server waarop nginx requests doorspeelt naar een express webapp.

De express webapp gebruikt de statisch gegenereerde pagina’s van Hexo en verwerkt de formulieren van sollicitanten. Op de server draait tevens een SMTP-server waar alleen de express backend aankan zodat er automatische mails naar de verantwoordelijken bij Sweet Mustard gezonden kunnen worden. Om een nieuwe versie van de website live te krijgen hoeft de ontwikkelaar louter de code te pushen naar de server, waar dan automatisch de statische website opnieuw wordt gegenereerd.

Terugblik op een leerrijke periode

Ik had verwacht voornamelijk in ondersteuning te werken van andere IT’ers. Ik ben tenslotte een student zonder een gigantische bagage aan ervaring. Toch werd het snel duidelijk dat ik veel vertrouwen en verantwoordelijkheid zou krijgen. Iets wat ervoor gezorgd heeft dat ik nog gemotiveerder was dan voordien. De technische beslissingen gebeurden in samenspraak met Mike. Daarna voerde ik alles uit.

Resultaat: een boeiende, leerrijke maand, waarin ik heel veel ervaring heb kunnen opdoen. Niet alleen over het technische aspect, maar ook over efficiënt en gedetailleerd werken. Een vijftal weken leek mij heel erg veel voor de taak die ik had gekregen. Toch bleek dat als je de puntjes op de i wil zetten de tijd heel erg vlug voorbij gaat.

Ik heb van Sweet Mustard de kans gekregen om in een maand iets te maken waar ik trots op ben en waar ik mijn naam op kan zetten, waar ik zeer dankbaar voor ben. Desondanks het feit dat Mike drukbezet was, kreeg ik altijd snel feedback wanneer die nodig was. Dankzij Mike ben ik ook een aantal keer in contact gekomen met mij volledig onbekende technieken en frameworks. Kortom, een ongelooflijk leerzame periode.

Kevin Baes