Workshop: Netlify & Static Site Generators

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