JAMstack And Netlify - Getting Started. And Levelling Up.

JAMSTACK AND NETLIFY WORKSHOP PHIL HAWKSWORTH

HELLO

@ PHIL HAWKSWORTH

STATIC / PRE-RENDERED / JAMSTACK

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

k c a t s m ja JAVASCRIPT / API / MARKUP

STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /

! h h h h h s I SOMETIMES BUILT LAMP STACK SITES ON A MAC, AND I DIDN’T ALWAYS USE MYSQL

STATIC

STATIC

STATIC

STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.

STATIC ARCHITECTURE? or RESULT?

STATIC ARCHITECTURE? or EXPERIENCE?

STATIC VIRTUE a as

STATIC / DYNAMIC STATIC

c i m a n y d c i t a st CDN LOAD BALANCER WEB SERVERS DB SERVERS

STATIC s n ea m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN

STATIC s n ea m NO WORK TO BE DONE AT REQUEST TIME

STATIC s n ea m A FAR SMALLER ATTACK SURFACE TO SECURE AND PROTECT

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

GET TO THE CHOPPER CDN

NETLIFY LOCAL STATIC SERVER BUILD CDN

BUILD AUTOMATION TESTS / CONTENT GATHERING / SITE GENERATION / OPTIMSATION / DEPLOY

NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD

DATA / CONTENT SOURCES

CONTENT APIS NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

A BIT OF A TOUR THE NETLIFY ADMIN CONTINUOUS INTEGRATION ENVIRONMENT VARIABLES DEPLOY HOOKS NOTIFICATIONS DEPLOYS AND ROLLBACKS PROVISION UNLIMITED ENVIRONMENTS PREVIEW BUILDS FORM HANDLING A/B TESTING

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

LOW FRICTION

SETYOURWATCHBY.NETLIFY.COM

SETYOURWATCHBY.NETLIFY.COM

SETYOURWATCHBY.NETLIFY.COM

SETYOURWATCHBY.NETLIFY.COM

SETYOURWATCHBY.NETLIFY.COM

WEBSTASK.IO

WEBSTASK.IO

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

COMMENTS ENGINE DEMO or NETLIFY DEV?

FINDTHAT.AT / DEV

POSSIBILITIES

REACTJS.ORG STATIC

VUEJS.ORG STATIC

YARNPKG.COM STATIC

BUT ALSO

SMASHINGMAGAZINE.COM STATIC

STATIC SITE GENERATORS staticgen.com NETLIFY www.netlify.com NETLIFY DEV www.netlify.com/products/dev SET YOUR WATCH - FRICTION FREE DEPLOYMENTS https://www.netlify.com/blog/2018/08/02/exploring-the-potential-of-friction-free-deployments/ ONE-CLICK TEMPLATES templates.netlify.com

THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS

THANKS QUESTIONS? @PHILHAWKSWORTH

JAMSTACK AND NETLIFY WORKSHOP PHIL HAWKSWORTH