Dynamic Static Site Strategies from Smashing Conf NY

DYNAMIC STATIC SITE STRATEGIES (AND OTHER TONGUE TWISTERS) 7 7
@PHILHAWKSWORTH

PHILHAWKSWORTH

@philhawksworth BRENDAN DAWES, 9:28 TODAY …THE COMBINATION OF MANY MUNDANE
THINGS TO CREATE SOMETHING INTERESTING

@philhawksworth STATIC SITES

@philhawksworth DYNAMIC STATIC SITE STRATEGIES

@philhawksworth SSG

@philhawksworth SSGEEWIZZ

@philhawksworth SSGEEWIZZ @philhawksworth

@philhawksworth STATIC SITES GO ALL HOLLYWOOD

@philhawksworth BRIGHT COLOURS

@philhawksworth BIG FONTS

@philhawksworth BIG FONTS & BRIGHT COLOURS

@philhawksworth PREVIOUS RANTS 7 7

@philhawksworth I LOVE THE WEB 7 7

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

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

@philhawksworth http foobar. http ://

@philhawksworth http ://

@philhawksworth KICKING UP A STINK CMS about 7 7

@philhawksworth BUILDING FOR THE WEB CAN BE HARD 7 7

@philhawksworth OMFG DEVICES

@philhawksworth OF TOOLS AND COMPLEXITY A FULL STACK FROM FRONT
END TO BACK END there is a

@philhawksworth MAKE THE STACK can we SHORTER?

@philhawksworth COMPLEXITY 7 7

@philhawksworth REMOVING OBSTRUCTIONS TO QUALITY 7 7

@philhawksworth REMOVING OBSTRUCTIONS TO LONGEVITY 7 7

@philhawksworth

@philhawksworth SIMPLICITY 7 7

@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

@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 DUMBING DOWN SIMPLIFYING is not 7 7

@philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7 WHAT MATTERS
IT LETS US FOCUS on 7 7

@philhawksworth A MOMENT ABOUT BENEFITS 7 7

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

@philhawksworth

@philhawksworth ?

@philhawksworth CREDENCE 7 7

@philhawksworth CONTRIBUTE.BARACKOBAMA.COM

@philhawksworth BAKED WITH JEKYLL LARGE AUDIENCE RAPID ITERATIONS SERVED STATICALLY

@philhawksworth GOOGLE YEAR IN SEARCH

@philhawksworth LARGE AUDIENCE INFREQUENTLY UPDATED LONG LIFE

@philhawksworth 40 STORIES 52 LANGUAGES 2.6B SOCIAL IMPRESSIONS

@philhawksworth CONTENT ABSTRACTED BAKED WITH SSG SERVED STATIC BY GOOGLE

@philhawksworth STATIC SITES 7 7 are ALREADY MAINSTREAM

@philhawksworth MANY, MANY CLIENTS BUT I NEED SOMETHING MORE POWERFUL
FOR MY PROJECT

@philhawksworth BUT DO YOU?

@philhawksworth FEEL MORE DYNAMIC 7 7

@philhawksworth ENABLERS 7 7

@philhawksworth GENERATORS AND TEMPLATING 7 7

STATICSITEGENERATORS.NET

@philhawksworth 435

@philhawksworth

@philhawksworth A LITTLE CAUTION 7 7

@philhawksworth M

TAX @philhawksworth M HIPSTER the

@philhawksworth BAKE A SITE MORE QUICKLY 7 7

@philhawksworth UPDATE A SITE MORE QUICKLY 7 7

@philhawksworth SIDE EFFECT as a STYLEGUIDE 7 7

@philhawksworth ARTEFACT as an STYLEGUIDE 7 7

@philhawksworth PROCESS as a STYLEGUIDE 7 7

@philhawksworth STYLEGUIDE BUILD MODULES PRODUCTION 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 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

DEV ENVIRONMENTS QA ENVIRONMENT STAGING ENVIRONMENT @philhawksworth 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!

@philhawksworth IT’S ABOUT SHIFTING COMPLEXITY

@philhawksworth OUTSOURCE COMPLEXITY 7 7

@philhawksworth DISTANCE THE USER FROM THE COMPLEXITY 7 7

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

@philhawksworth CONTENTFUL.COM

@philhawksworth A HOSTED CMS INTERFACE EXPOSES CONTENT VIA AN API
SUPPORTS TRANSLATIONS USER ROLES AND MANAGEMENT ENVIRONMENTS & VERSIONS

@philhawksworth DECOUPLE THE CONTENT ADMINISTRATION from THE PRODUCTION ENVIRONMENT 7
7

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

@philhawksworth

@philhawksworth HOSTING

@philhawksworth “HOSTING PLUS”

@philhawksworth “HOSTING WITH BENEFITS”

NETLIFY NETLIFY.COM

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

@philhawksworth COMMIT HOOKS AND BUILDS

@philhawksworth HOOKS NOTIFICATIONS CONTROL OF HEADERS BASIC AUTH HTTPS

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

@philhawksworth LIMITATIONS

@philhawksworth PERSONALISATION VERY VERY LARGE SITES USER GENERATED CONTENT

@philhawksworth LOCALISATION 7 7

@philhawksworth STATIC SITE GENERATOR CONTENT FEEDS GOOGLE TRANSLATE

@philhawksworth INDICATIVE TRANSLATIONS

@philhawksworth GOOGLE DOCS

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE =GoogleTranslate(source!A2, “en", "es") =GoogleTranslate(text,
source_language, target_language)

@philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

@philhawksworth CONSUME FEEDS https://docs.google.com/spreadsheets/d/ <key> /export ?gid=<gid> &format=csv

@philhawksworth CONSUME FEEDS https://docs.google.com/spreadsheets/d/ 13tr8nOZNbmA0Fr…p7MnuALmk /export ?gid=143780363 &format=csv

@philhawksworth CONVERT TO YAML

@philhawksworth github.com/doowb/grunt-convert

@philhawksworth BAKE AND ENJOY

@philhawksworth GOOGLE DOCS

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/ES/BLOG

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/FR/BLOG

@philhawksworth GOOGLE DOCS HAWKSWORX.DEV/KO/BLOG

@philhawksworth REACT TO CODE CHANGES REACT TO CONTENT CHANGES GENERATE
STYLEGUIDES & SITES GENERATE LOCALISATIONS POPULATE JS SEARCH COMMENTS AND USER INPUT

@philhawksworth PERCEPTION OF STATIC SITES 7 7

@philhawksworth STATIC FLAT SIMPLE BASIC

@philhawksworth STATIC HOSTED SITES CAN BE AS DYNAMIC AS THE
TOOLS WE USE TO BUILD AND PUBLISH THEM

@philhawksworth TIME TO REBRAND STATIC SITES

@philhawksworth THE JAM STACK JAVASCRIPT / APIS / MARKUP MATHIAS
BIILMANN, NETLIFY speakerdeck.com/biilmann/the-jam-stack

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

@philhawksworth MAKE THE STACK can SHORTER we ?

@philhawksworth MAKE THE STACK can SHORTER we !

@philhawksworth THE SHORT STACK

@philhawksworth WRAPPING UP

@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 LINKS http://www.netlify.com https://www.staticgen.com http://jekyllrb.com http://roots.cx https://gohugo.io http://www.contentful.com https://github.com/dommmel/jekyll-contentful https://www.google.com/2014
http://wercker.com https://speakerdeck.com/biilmann/the-jam-stack https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

THANKS @PHILHAWKSWORTH 7 7

Dynamic Static Site Strategies from Smashing Conf NY

Dynamic Static Site Strategies from Smashing Conf NY

More Decks by Phil Hawksworth

Other Decks in Technology

Featured

Transcript