JAMstack websites zijn hip. Mijn eigen website heb ik op deze manier opgebouwd. Ik gebruik Jekyll Eleventy, Github en Netlify. Voor mij werkt het erg fijn. Voordeel van pushen naar Github is dat ik een back-up heb van mijn site.
Volgens Phil Hawksworth zijn git based deployments de toekomst.
Maar voor de duidelijkheid zal ik uitleggen waar JAMStack voor staat, namelijk JavaScript, API's, Markup.
Voordeel van JAMstack websites is dat de rendering van de site/pagina geen tijd in beslag neemt, dit gebeurt door een build proces voor die tijd. Het opvragen van een website kost veel minder tijd. In de 'oude' manier gebeurt het builden van de site op het moment dat je via de webbrowser de website aanvraagt, dan wordt er gekeken wat je nodig hebt en wordt dat geserveerd.
Bij een JAMstack website gaat het om client-render en pre-render.
Een website in de JAMStack wordt een Static site genoemd, maar een betere naam is Pre-rendered website. Dit verwoordt namelijk het proces.
Een ander voordeel van een JAMstack website is dat deze makkelijker te beveiligen is, omdat je alleen te maken hebt met een server voor static-bestanden hoef je alleen deze te beveiligen.
Vrijdag 25 januari ben ik bij de JAMStack and Netlify workshop georganiseerd door Fronteers en Phil Hawksworth als workshop leider geweest. Interessante dag. Meer inzicht gekregen wat JAMStack is en welke rol Netlify hier in heeft en wat er kan met Netlify.
Netlify
Voor JAMstack websites is een hosting oplossing zoals Netlify erg makkelijk. Netlify haalt de code uit Github en verzorgt dan een build proces om de website daarna op een Netlify url live te zetten. Elk build proces wordt gestimuleerd door een push naar Github. Elke build blijft staan in het Netlify dashboard en is weer terug te zetten als de live website.
Met Netlify kan je ook een eigen domein koppelen aan je website, met de mogelijkheid van gratis https. En dat werkt makkelijk.
API's
API keys die verborgen moeten blijven voor de buitenwereld kan je installeren in Netlify. Ze kunnen dan door elke site die in je Netlify account staat gebruikt worden.
Forms
Via het dashboard van Netlify kan je een webformulier aanmaken en die gebruiken in je website. Hierdoor kan je een contactformulier op je website zetten. Hiervoor heb je anders bijvoorbeeld PHP nodig die het versturen van de ingevulde data voor je regelt. Zo'n formulier kan je ook gebruiken als comment formulier. Door deze te koppelen met webhooks in je Dashboard van Netlify wordt er een build getriggerd en kan je de comment bekijken op de website. Of een inlogformulier maken voor een website met inlog mogelijkheden zoals een webwinkel. Hiervoor kan je Identity in het dashboard van Netlify gebruiken. Met Identity kan je rollen aanmaken of een welkomsmail genereren.
Redirect
Via een netlify.toml bestand kan je redirects in je website aanbrengen. Zo kan verwijzen naar een andere url of een 404 pagina aanmaken.
Serverless
Een term die samenhangt met JAMstack is serverless. Serverless is gelijk aan functions as a service. Je kan deze functies gebruiken in of met je Pre-rendered website. Serverless en JAMStack vullen elkaar goed aan.
Meer info kan je vinden op:
Interessante artikelen
- Why you should be using JAMstack
- Netlify Functions for Sending Emails
- How to Choose the Best Static Site Generator for Your 2019 Project
Conferenties
Handige links
- EleventyOne - Eleventy starter template van Phil Hawksworth
- A List of Static Site Generators for JAMstack Sites
- A List of Content Management Systems for JAMstack Sites
- Case studie over Smashing Magazine's overgang naar de JAMstack