A presentation at Fronteers Workshop: Netlify & Static Site Generators in in Utrecht, Netherlands by Phil Hawksworth
STATIC SITE GENERATORS AND NETLIFY PHIL HAWKSWORTH
netlify Fronteers Workshop January 2019 @philhawksworth NEED TO SET UP GITHUB? 👉 findthat.at/setup
STATIC SITE GENERATORS AND NETLIFY PHIL HAWKSWORTH
netlify Fronteers Workshop January 2019 @philhawksworth PHIL HAWKSWORTH HEAD OF DEVELOPER RELATIONS, NETLIFY
netlify Fronteers Workshop January 2019 @philhawksworth @ PHIL HAWKSWORTH HEAD OF DEVELOPER RELATIONS, NETLIFY
netlify Fronteers Workshop CONCEPT January 2019 @philhawksworth EXAMPLE EXERCISE
netlify Fronteers Workshop January 2019 @philhawksworth BEFORE WE BEGIN GITHUB ACCOUNT / GIT INSTALLED / NODE INSTALLED / YARN INSTALLED
netlify Fronteers Workshop January 2019 @philhawksworth ! s i h t o d s ’ t le
netlify Fronteers Workshop January 2019 @philhawksworth ECOSYSTEM CONTENT / ASSETS / AUTHENTICATION / E-COMMERCE / SEARCH
netlify Fronteers Workshop January 2019 @philhawksworth BROWSERS EVERGREEN / RICH APIS / OFFLINE / PERFORMANCE / STANDARDISATION
netlify Fronteers Workshop January 2019 @philhawksworth INFRASTRUCTURE TOOLING / CDN / CI/CD / AUTOMATION / TRIGGERS / EVENTS
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth RENDERING SOMEWHERE SERVER RENDER / CLIENT RENDER / PRE-RENDER
netlify Fronteers Workshop January 2019 @philhawksworth s v PRE-RENDERED STATIC
netlify Fronteers Workshop January 2019 @philhawksworth vs STATIC DYNAMIC
netlify Fronteers Workshop c i m a n y d c i t a st January 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify Fronteers Workshop January 2019 @philhawksworth STATIC s n ea m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN
netlify Fronteers Workshop January 2019 @philhawksworth k c a t s m ja
netlify Fronteers Workshop January 2019 @philhawksworth JAMSTACK ENABLERS
netlify Fronteers Workshop January 2019 @philhawksworth ECOSYSTEM CONTENT / ASSETS / AUTHENTICATION / E-COMMERCE / SEARCH
netlify Fronteers Workshop January 2019 @philhawksworth BROWSERS EVERGREEN / RICH APIS / OFFLINE / PERFORMANCE / STANDARDISATION
netlify Fronteers Workshop January 2019 @philhawksworth INFRASTRUCTURE c TOOLING / CDN / CI/CD / AUTOMATION / TRIGGERS / EVENTS
netlify Fronteers Workshop OUR FOCUS January 2019 @philhawksworth WORKING WITH SSGs WORKING WITH NETLIFY
netlify Fronteers Workshop January 2019 @philhawksworth SSG
netlify Fronteers Workshop January 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN
netlify Fronteers Workshop January 2019 @philhawksworth ! s k n a th
netlify Fronteers Workshop January 2019 @philhawksworth HOW TO CHOOSE? t h g i r e h t SSG
netlify Fronteers Workshop STATICGEN.COM January 2019 @philhawksworth
netlify Fronteers Workshop January 2019 @philhawksworth LANGUAGE WORKFLOW PERFORMANCE ARCHITECTURE OUTPUT CONTROL ADOPTION
netlify Fronteers Workshop January 2019 @philhawksworth JEKYLL HUGO GATSBY NEXT NUXT VUEPRESS
netlify Fronteers Workshop January 2019 @philhawksworth OUR SSG FOR TODAY ELEVENTY 👋
netlify Fronteers Workshop January 2019 @philhawksworth WHY ELEVENTY? LOGICAL ARCHITECTURE FLEXIBLE TEMPLATING NOTHING YOU DON’T ASK FOR JAVASCRIPT ALL THE WAY DOWN
netlify Fronteers Workshop January 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth GIT-BASED DEPLOYMENTS
netlify Fronteers Workshop January 2019 @philhawksworth NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD
netlify Fronteers Workshop January 2019 @philhawksworth EXAMPLE First look at Eleventy site structure
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE First build, then first deploy
netlify Fronteers Workshop January 2019 @philhawksworth MINIMUM VIABLE SITE 👉 findthat.at/repo
netlify Fronteers Workshop January 2019 @philhawksworth ABOUT THE FOLDERS
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth ATOMIC DEPLOYS
netlify Fronteers Workshop January 2019 @philhawksworth IMMUTABLE DEPLOYS
netlify Fronteers Workshop January 2019 @philhawksworth ADDRESSABLE DEPLOYS
netlify Fronteers Workshop January 2019 @philhawksworth EXAMPLE Add pages, edit navigation
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE Modify site , deploy, rollback
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth DATA ABSTRACTION
netlify Fronteers Workshop January 2019 @philhawksworth CONTENT APIS NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD
netlify Fronteers Workshop January 2019 @philhawksworth EXAMPLE add medium, local seed, targets
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE add medium, local seed, targets
netlify Fronteers Workshop January 2019 @philhawksworth DATA TO/FROM NETLIFY
netlify Fronteers Workshop January 2019 @philhawksworth FORMS
netlify Fronteers Workshop January 2019 @philhawksworth EXAMPLE propose meet up form
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE add a form and some entries
netlify Fronteers Workshop January 2019 @philhawksworth NETLIFY API 👉 findthat.at/api
netlify Fronteers Workshop January 2019 @philhawksworth AUTH AND ENVIRONMENT VARIABLES
netlify Fronteers Workshop January 2019 @philhawksworth EXAMPLE get proposal data from API
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE create auth tokens, get proposal data from API locally and in prod
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth EVENTS AND WEBHOOKS ARE WHERE THE FUN IS!
AUTOMATION AND LOW FRICTION
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
WEBSTASK.IO
WEBSTASK.IO
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE make form submissions trigger a rebuild
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER
netlify Fronteers Workshop January 2019 @philhawksworth SERVERLESS TO THE RESCUE
netlify Fronteers Workshop January 2019 FUNCTIONS AS A SERVICE @philhawksworth NO AWS CONFIGURATION INSTANT PROVISIONING API GATWEAY & URLS IMMUTABLE VERSIONS SITE SYNCHRONICITY
netlify Fronteers Workshop January 2019 @philhawksworth NETLIFY LAMBDA 👉 findthat.at/lambda
netlify Fronteers Workshop January 2019 @philhawksworth FUNCTIONS PLAYGROUND 👉 findthat.at/playground
netlify Fronteers Workshop January 2019 @philhawksworth EXAMPLE add a delete button
netlify Fronteers Workshop January 2019 @philhawksworth EXERCISE add a delete button and trigger a redeploy
netlify Fronteers Workshop January 2019 @philhawksworth (FOLDER 5) ADD NETLIFY-LAMBDA AND REQUEST USE NETLIFY LAMBDA IN BUILD STEP HELLO WORLD EXPOSE THE SUBMISSION ID IN PROPOSAL DATA ADD DELETE BUTTON TO THE PROPOSAL LISTINGS
netlify Fronteers Workshop January 2019 @philhawksworth FUNCTIONS CAN BE TRIGGERED BY EVENTS 👉 findthat.at/eventdriven
netlify Fronteers Workshop January 2019 @philhawksworth CONCEPT
netlify Fronteers Workshop January 2019 @philhawksworth REDIRECTS API (AT THE EDGE) 👉 findthat.at/redirects
netlify Fronteers Workshop January 2019 @philhawksworth REDIRECTS ANY HTTP RESPONSE CODE PROXYING CUSTOM 404s COUNTRY LANGUAGE ROLE
THANKS QUESTIONS? @PHILHAWKSWORTH
This workshop aims to put more web development power back into your hands. We’ll look at how the Static Site Generator landscape has evolved over the last few years, and at how SSGs can be used in concert with the right tools and services to create web experiences which are far from “static”.
Combining an examination of the underlying principles and technical architectures, with practical exercises and examples, together we will explore the kinds of a sites and experience possible, and build examples which demonstrate some key principles.
