Wat? Geen Umbraco website?!

Tijd voor wat nieuws

Na 3 jaar Umbraco 7 te hebben gedraaid, besloot de hosting partij de kosten van het Windows hostingpakket met 125% te verhogen. Ik was al een langere tijd niet geheel tevreden met deze hosting partij, dus dit was een goede reden om mijn contract op te zeggen en ook meteen de website zelf onder handen te nemen. De site verhuizen naar Umbraco Cloud of Microsoft Azure dan maar? Dit is natuurlijk de perfecte gelegenheid om zojuist gereleasde versie 8.1.5 van Umbraco uit te proberen. Dacht ik een paar weken geleden. Heb ik eigenlijk wel een uitgebreid CMS nodig voor een handje vol blog posts en de enkele profielupdates die ik per jaar doe? Waarom zou ik workflows, templating, gebruikers authorisatie willen hebben voor een simpele site als deze? Een online wysiwyg editor is handig om online content te kunnen aanpassen, maar voor mij als ontwikkelaar is markdown eigenlijk ook prima werkbaar.

Een oplossing op maat

Ik vind Umbraco een prachtig CMS maar voor een site als deze heeft het een boel functionaliteit die ik niet gebruik. Ik ben immers de enige gebruiker, ik update de informatie maar een paar keer jaar en ik schrijf af en toe een blogpost. Daarnaast zit mijn agenda momenteel bomvol met opdrachten en wil ik me eigenlijk niet druk maken over updates en security patches van mijn website.

Mijn keuze is gevallen voor het gebruik van JAMstack met behulp van een static site generator genaamd Jekyll. JAMstack is een architectuur met als doel het bouwen van websites te versimpelen. JAM staat voor Javascript, API’s en Markup. Door alleen deze 3 componenten te gebruiken, ben je niet langer afhankelijk van een webserver die server side rendering doet en kan je je website vanuit een CDN draaien. Met een static site generator genereer je offline html files op basis voorgedefinieerde templates in combinatie met content in (bijvoorbeeld) markdown.

Een aantal voordelen van een statische website:

  • Minder foutgevoelig, geen dynamische code of database
  • Snelheid, de server hoeft alleen de html files te serveren
  • Veilig, ik hoef me niet meer druk te maken over security patches en updates
  • Kosten, de gebruikte tools zijn gratis en webhosting voor statische files hoeft niet duur te zijn

Workflow

Omdat ik graag met markdown wil werken voor het schrijven van content is mijn keuze gevallen op Jekyll. Een van de meest bekende static site generators van dit moment. Voor het beheren van mijn files gebruik ik Gitlab. Ik heb voor Gitlab gekozen omdat ik hier gratis privé repositories kan aanmaken. Ik wil een privé repository omdat ik een template voor deze site gebruik die niet open source is. Voor het automatiseren van de build pipeline gebruik ik Netlify. Netlify is tevens een hosting platform voor statische files en faciliteert een gratis SSL certificaat.

Jekyll + Gitlab + Netlify

Jekyll

Wanneer je gebruik maakt van een static site generator, plaats je de inhoud van bijvoorbeeld een blogpost in als een tekst file (in het geval van Jekyll in markdown formaat) in een je webproject. Je kan deze file voorzien van meta data door er eigenschappen aan toe te kennen. Met de layout eigenschap vertel je Jekyll dat de pagina binnen een bepaalde layout gerenderd moet worden. Lokaal kan je je website bekijken door middel van het commando jekyll serve, dit commando start een lokale webserver en genereert automatisch nieuwe html files bij het wijzigen van een bestand. Als je tevreden bent over de gegenereerde website, zet je de bestanden door naar een git repository.

Gitlab

Gitlab slaat de zojuist gepushte files op in een privé repository en geeft een signaal aan Netlify dat er een wijziging gedaan is.

Netlify

Netlify haalt de files op en genereert eenmalig op basis van de bestanden zelf de html files en brengt deze vervolgens online.

Content creëren in de nieuwe workflow

  • Je maakt een nieuwe text file aan met je favoriete editor en schrijft met behulp van het markdown formaat een nieuwe post
  • Controleer lokaal doormiddel van jekyll serve de door Jekyll gegenereerde files
  • Als alles naar wens doe je een git add, git commit en git push van de gewijzigde files naar een git repository
  • Netlify is gekoppeld aan de git repository en zorgt er automatisch voor dat er op de server nieuwe files gecreëerd worden en dat de post online beschikbaar komt

Kostenplaatje

Oude situatie

Domein: € 9,95
SSL certificaat: € 14,95
Webhosting: 12 * € 7,95
Totaal: € 120,30

Oude situatie met het nieuwe tarief

Domein: € 9,95
SSL certificaat: € 14,95
Webhosting: 12 * € 17,95
Totaal: € 240,30

Nieuwe situatie:

Domein: € 4,95
SSL certificaat: gratis
Webhosting: gratis
Totaal: € 4,95

Dit is dus op basis van 2019 een besparing van meer dan 115 euro per jaar en in het geval van 2020 een besparing van ruim 235 euro per jaar.

De domein kosten zijn verlaagd omdat ik mijn domein bij een andere partij heb onder gebracht. De hosting en SSL certificaat kosten komen te vervallen omdat Netlify gratis hosting aanbiedt en een gratis Let’s Encrypt certificaat koppelt.

Nadelen?

Klinkt mooi allemaal natuurlijk maar wat zijn de nadelen van deze verandering?

  • Geen Wysiwyg editor *
  • Ik kan niet meer snel inloggen op de pc van iemand anders en online even wat gegevens wijzigingen *
  • De dynamische elementen die ik vroeger gebruikte in de oude site zullen anders opgelost moeten worden *

* Netlify ondersteunt deze features out of the box met NetlifyCMS en Netlify Forms maar deze heb ik momenteel nog niet toegepast op deze site.

Vragen? Opmerkingen?

Heb je opmerkingen of mocht je meer willen weten, laat gerust een berichtje achter hieronder.