Static sites go all Hollywood

STATIC SITES GO ALL HOLLYWOOD 7 7 @PHILHAWKSWORTH FRONTEERS, AMSTERDAM,
2015

PHILHAWKSWORTH @ QUESTIONS SUGGESTIONS ARGUMENTS COMMENTS

@philhawksworth PREVIOUS RANTS

@philhawksworth I LOVE THE WEB

AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7
7 http://domain.com/path?query=lovely#hash @philhawksworth

AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7
7 @philhawksworth

@philhawksworth http foobar.com http ://

@philhawksworth http ://

@philhawksworth KICKING UP A STINK CMS about 7 7

@philhawksworth ALL FINE NOW

@philhawksworth BUILDING FOR THE WEB CAN BE HARD 7 7

@philhawksworth OMFG DEVICES

@philhawksworth REMOVING OBSTRUCTIONS TO QUALITY 7 7

@philhawksworth REMOVING OBSTRUCTIONS TO LONGEVITY 7 7

@philhawksworth

@philhawksworth SIMPLICITY 7 7

BAKE, DON’T FRY @philhawksworth

@philhawksworth BAKE, DON’T FRY – Aaron Swartz

@philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER,
POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002

@philhawksworth BEST FIT 7 7

@philhawksworth FEW WRITES MANY READS

@philhawksworth SIMPLICITY 7 7

@philhawksworth HOLLYWOOD not very

@philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7

@philhawksworth Empire State Building  New York Jim Mao Building  Shanghai
Sears Tower  Chicago Petronas Towers Huala Lumpur Tapei 101 Taipei The size and lag of your parallax page

@philhawksworth

PLEASE DON'T TAKE MY FLASH AWAY FROM ME! – My
buddy, Steve

@philhawksworth DUMBING DOWN. SIMPLIFYING IT LET’S US FOCUS is not
ON WHAT MATTERS

@philhawksworth A MOMENT ABOUT THE BENEFITS 7 7

@philhawksworth CHEAPER, SIMPLER HOSTING FEWER POINTS OF FAILURE FEWER VULNERABILITIES
EASIER COMPLIANCE GREATER PORTABILITY SANDBOXED ENVIRONMENTS ATTRITION AVOIDANCE

@philhawksworth CREDENCE 7 7

@philhawksworth

@philhawksworth BAKED WITH JEKYLL LARGE AUDIENCE RAPID ITERATIONS HOSTED STATICALLY

@philhawksworth GOOGLE WEB FUNDAMENTALS

@philhawksworth DEVELOPERS.GOOGLE.COM/WEB/FUNDAMENTALS

@philhawksworth CONTENT ON GITHUB BAKED WITH JEKYLL SERVED STATIC BY
GOOGLE

@philhawksworth REDUCED RISK 7 7

@philhawksworth GOOGLE YEAR IN SEARCH

@philhawksworth

@philhawksworth LARGE AUDIENCE INFREQUENTLY UPDATED LONG LIFE

@philhawksworth 40 STORIES 52 LANGUAGES 2.6B SOCIAL IMPRESSIONS

@philhawksworth CONTENT ABSTRACTED BAKED WITH “GORO” SERVED STATIC BY GOOGLE

@philhawksworth STATIC SITES 7 7 are ALREADY MAINSTREAM

@philhawksworth ENABLERS 7 7

@philhawksworth FRONT END TOOLING 7 7

@philhawksworth I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA
HA HA...!

@philhawksworth GENERATORS AND TEMPLATING 7 7

@philhawksworth STATICSITEGENERATORS.NET

@philhawksworth 393

@philhawksworth TAX M HIPSTER the

@philhawksworth SIDE EFFECT as a STYLEGUIDE 7 7

@philhawksworth ARTEFACT as an STYLEGUIDE 7 7

@philhawksworth PROCESS as a STYLEGUIDE 7 7

@philhawksworth

@philhawksworth STYLEGUIDE BUILD MODULES PRODUCTION SITE TEMPLATES CONTENT SSG OPTIMISATION
DEPLOYMENT

@philhawksworth UNLESS IT’S PART OF YOUR BUILD, YOUR STYLEGUIDE IS
JUST MORE DOCUMENTATION TO MAINTAIN

@philhawksworth IT’S A SYSTEM. A LIVING BREATHING LIBRARY OF COMPONENTS
ANNA DEBENHAM

@philhawksworth AUTOMATION 7 7

@philhawksworth GRUNT GULP BRUNCH BELCH BURP COUGH SNEEZE M M
M

@philhawksworth DEPLOY FASTER DEPLOY SAFER 7 7

@philhawksworth UPDATE FASTER 7 7

@philhawksworth FEEL MORE DYNAMIC 7 7

@philhawksworth SURGE.SH

@philhawksworth HIT THE CEILING 7 7

@philhawksworth BECAUSE WE NEED A DEVELOPER MINDSET

@philhawksworth A DEVELOPER MINDSET IS NOT ALWAYS VERY HOLLYWOOD

@philhawksworth WE STILL WANT THE SHIZZLE

@philhawksworth AND WE WANT TO MANAGE CONTENT OURSELVES

@philhawksworth LET’S LOOK AT COMMON COMPLEXITY

@philhawksworth DEV ENVIRONMENTS QA ENVIRONMENT STAGING ENVIRONMENT VIEWS SERVER LOGIC
DATA CACHE VIEWS SERVER LOGIC USER ADMIN PRODUCTION ENVIRONMENT

@philhawksworth REDUCE COMPLEXITY

@philhawksworth OTHER PEOPLE’S PLUMBING

@philhawksworth USER STATIC PROD ENV ADMIN DEPLOY AAS SSG DEV
ENVIRONMENTS BUILD CONTENT AAS REPO

@philhawksworth BUT THAT’S NOT SIMPLIFYING! 7 7

@philhawksworth IT’S ABOUT SHIFTING COMPLEXITY 7 7

@philhawksworth OUTSOURCE COMPLEXITY 7 7

@philhawksworth DISTANCE THE USER FROM THE COMPLEXITY 7 7

@philhawksworth SOURCE CONTENT AT BUILD TIME (NOT EXECUTION TIME)

@philhawksworth JEKYLL DATA

@philhawksworth {{ site.data.FILENAME.object }}

@philhawksworth CONTENTFUL.COM

@philhawksworth DECOUPLES THE CONTENT ADMINISTRATION from THE PRODUCTION ENVIRONMENT

ENVIRONMENTS BUILD CONTENT AAS REPO CONTENTFUL

@philhawksworth

@philhawksworth ROOTS ROOTS.CX

@philhawksworth HOSTING

@philhawksworth “HOSTING PLUS” 7 7

@philhawksworth “HOSTING WITH BENEFITS” 7 7

@philhawksworth NETLIFY.COM

ENVIRONMENTS BUILD CONTENT AAS REPO CONTENTFUL

@philhawksworth USER STATIC ADMIN BUILD AND HOSTING AAS SSG DEV
ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL

FORMERLY BITBALLOON 7 7

@philhawksworth http://www.netlify.com

COMMIT HOOKS AND BUILDS

@philhawksworth http://www.netlify.com

COMMAND LINE INTERFACE

@philhawksworth WEB HOOKS NOTIFICATIONS CONTROL OF HEADERS BASIC AUTH

@philhawksworth USER STATIC ADMIN BUILD AND HOSTING AAS SSG DEV
ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL

@philhawksworth LIMITATIONS 7 7

@philhawksworth PERSONALISATION VERY VERY LARGE SITES USER GENERATED CONTENT

@philhawksworth WHY DO WE HAVE A SITE AND HOW DO
WE USE IT? LISA WELCHMAN

@philhawksworth BEST FIT 7 7

@philhawksworth

@philhawksworth IT DEPENDS

@philhawksworth WRAPPING UP 7 7

@philhawksworth SIMPLIFYING PRODUCTION ENVIRONMENTS IS A WIN PUT DISTANCE BETWEEN
YOUR USERS AND YOUR COMPLEXITY

@philhawksworth STATIC SITE GENERATORS & BUILD AUTOMATION ARE MATURING POWERFUL
HOSTED TOOLS WHICH SOLVE COMMON SHORTFALLS ARE AVAILABLE

@philhawksworth JOB INTERVIEWS AT R/GA ARE UNLIKE THOSE IN SWORDFISH

@philhawksworth LINKS http://www.netlify.com https://www.staticgen.com http://jekyllrb.com http://roots.cx http://surge.sh https://gohugo.io http://www.contentful.com https://github.com/dommmel/jekyll-contentful
https://www.google.com/2014 https://developers.google.com/web/fundamentals http://wercker.com http://viewportify.hawksworx.com

THANKS @PHILHAWKSWORTH 7 7

Static sites go all Hollywood

Static sites go all Hollywood

More Decks by Phil Hawksworth

Other Decks in Programming

Featured

Transcript