Pro Yearly is on sale from $80 to $50! »

Dynamic Static Site Strategies from Smashing Conf NY

Dynamic Static Site Strategies from Smashing Conf NY

Are we over-engineering? What is the real effort in developing, hosting and maintaining sites which have many moving parts? The cost of serving static sites has never been lower. And front-end development practices have never been richer. Couldn't we harness this better and make life simpler without dumbing down?

In this talk we'll explore some unexpected capabilities and characteristics of "static" sites. We'll look at ways to use emerging tools and services to create robust, high performance websites which can be more dynamic than some of their heavier and more costly brothers and sisters.

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

June 15, 2016
Tweet

Transcript

  1. DYNAMIC STATIC SITE STRATEGIES (AND OTHER TONGUE TWISTERS) 7 7

    @PHILHAWKSWORTH
  2. PHILHAWKSWORTH

  3. @philhawksworth BRENDAN DAWES, 9:28 TODAY …THE COMBINATION OF MANY MUNDANE

    THINGS TO CREATE SOMETHING INTERESTING
  4. @philhawksworth STATIC SITES

  5. @philhawksworth DYNAMIC STATIC SITE STRATEGIES

  6. @philhawksworth SSG

  7. @philhawksworth SSGEEWIZZ

  8. @philhawksworth SSGEEWIZZ @philhawksworth

  9. @philhawksworth STATIC SITES GO ALL HOLLYWOOD

  10. @philhawksworth BRIGHT COLOURS

  11. @philhawksworth BIG FONTS

  12. @philhawksworth BIG FONTS & BRIGHT COLOURS

  13. @philhawksworth PREVIOUS RANTS 7 7

  14. @philhawksworth I LOVE THE WEB 7 7

  15. AITCH TEE TEE PEE DOUBLE MEH – Alex Sexton 7

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

    7 @philhawksworth
  17. @philhawksworth http foobar. http ://

  18. @philhawksworth http ://

  19. @philhawksworth KICKING UP A STINK CMS about 7 7

  20. @philhawksworth BUILDING FOR THE WEB CAN BE HARD 7 7

  21. @philhawksworth OMFG DEVICES

  22. None
  23. @philhawksworth OF TOOLS AND COMPLEXITY A FULL STACK FROM FRONT

    END TO BACK END there is a
  24. @philhawksworth MAKE THE STACK can we SHORTER?

  25. @philhawksworth COMPLEXITY 7 7

  26. @philhawksworth REMOVING OBSTRUCTIONS TO QUALITY 7 7

  27. @philhawksworth REMOVING OBSTRUCTIONS TO LONGEVITY 7 7

  28. @philhawksworth

  29. @philhawksworth SIMPLICITY 7 7

  30. @philhawksworth BAKE, DON’T FRY – Aaron Swartz

  31. @philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER,

    POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
  32. @philhawksworth BEST FIT 7 7

  33. @philhawksworth FEW WRITES MANY READS

  34. @philhawksworth SIMPLICITY 7 7

  35. @philhawksworth

  36. @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
  37. @philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7

  38. @philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7 WHAT MATTERS

    IT LETS US FOCUS on 7 7
  39. @philhawksworth A MOMENT ABOUT BENEFITS 7 7

  40. @philhawksworth CHEAPER, SIMPLER HOSTING FEWER POINTS OF FAILURE FEWER VULNERABILITIES

    EASIER COMPLIANCE GREATER PORTABILITY SANDBOXED ENVIRONMENTS
  41. @philhawksworth

  42. @philhawksworth

  43. @philhawksworth

  44. @philhawksworth ?

  45. @philhawksworth CREDENCE 7 7

  46. @philhawksworth CONTRIBUTE.BARACKOBAMA.COM

  47. None
  48. @philhawksworth BAKED WITH JEKYLL LARGE AUDIENCE RAPID ITERATIONS SERVED STATICALLY

  49. @philhawksworth GOOGLE YEAR IN SEARCH

  50. None
  51. @philhawksworth LARGE AUDIENCE INFREQUENTLY UPDATED LONG LIFE

  52. @philhawksworth 40 STORIES 52 LANGUAGES 2.6B SOCIAL IMPRESSIONS

  53. @philhawksworth CONTENT ABSTRACTED BAKED WITH SSG SERVED STATIC BY GOOGLE

  54. @philhawksworth STATIC SITES 7 7 are ALREADY MAINSTREAM

  55. @philhawksworth MANY, MANY CLIENTS BUT I NEED SOMETHING MORE POWERFUL

    FOR MY PROJECT
  56. @philhawksworth BUT DO YOU?

  57. @philhawksworth FEEL MORE DYNAMIC 7 7

  58. @philhawksworth ENABLERS 7 7

  59. @philhawksworth GENERATORS AND TEMPLATING 7 7

  60. STATICSITEGENERATORS.NET

  61. @philhawksworth 435

  62. @philhawksworth

  63. @philhawksworth A LITTLE CAUTION 7 7

  64. @philhawksworth M

  65. TAX @philhawksworth M HIPSTER the

  66. @philhawksworth BAKE A SITE MORE QUICKLY 7 7

  67. @philhawksworth UPDATE A SITE MORE QUICKLY 7 7

  68. @philhawksworth FEEL MORE DYNAMIC 7 7

  69. @philhawksworth SIDE EFFECT as a STYLEGUIDE 7 7

  70. @philhawksworth ARTEFACT as an STYLEGUIDE 7 7

  71. @philhawksworth PROCESS as a STYLEGUIDE 7 7

  72. @philhawksworth STYLEGUIDE BUILD MODULES PRODUCTION TEMPLATES CONTENT SSG OPTIMISATION DEPLOYMENT

  73. @philhawksworth UNLESS IT’S PART OF YOUR BUILD, YOUR STYLEGUIDE IS

    JUST MORE DOCUMENTATION TO MAINTAIN
  74. @philhawksworth IT’S A SYSTEM. A LIVING BREATHING LIBRARY OF COMPONENTS

    ANNA DEBENHAM
  75. @philhawksworth AUTOMATION 7 7

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

    M
  77. @philhawksworth DEPLOY FASTER DEPLOY SAFER 7 7

  78. @philhawksworth UPDATE FASTER 7 7

  79. @philhawksworth FEEL MORE DYNAMIC 7 7

  80. @philhawksworth SURGE.SH

  81. @philhawksworth HIT THE CEILING 7 7

  82. @philhawksworth BECAUSE WE NEED A DEVELOPER MINDSET

  83. @philhawksworth A DEVELOPER MINDSET IS NOT ALWAYS VERY HOLLYWOOD

  84. @philhawksworth WE STILL WANT THE SHIZZLE

  85. @philhawksworth AND WE WANT TO MANAGE CONTENT OURSELVES

  86. @philhawksworth LET’S LOOK AT COMMON COMPLEXITY

  87. DEV ENVIRONMENTS QA ENVIRONMENT STAGING ENVIRONMENT @philhawksworth VIEWS SERVER LOGIC

    DATA CACHE VIEWS SERVER LOGIC USER ADMIN PRODUCTION ENVIRONMENT
  88. @philhawksworth REDUCE COMPLEXITY

  89. @philhawksworth OTHER PEOPLE’S PLUMBING

  90. @philhawksworth USER STATIC PROD ENV ADMIN DEPLOY AAS SSG DEV

    ENVIRONMENTS BUILD CONTENT AAS REPO
  91. @philhawksworth BUT THAT’S NOT SIMPLIFYING!

  92. @philhawksworth IT’S ABOUT SHIFTING COMPLEXITY

  93. @philhawksworth OUTSOURCE COMPLEXITY 7 7

  94. @philhawksworth DISTANCE THE USER FROM THE COMPLEXITY 7 7

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

  96. @philhawksworth CONTENTFUL.COM

  97. @philhawksworth A HOSTED CMS INTERFACE EXPOSES CONTENT VIA AN API

    SUPPORTS TRANSLATIONS USER ROLES AND MANAGEMENT ENVIRONMENTS & VERSIONS
  98. @philhawksworth DECOUPLE THE CONTENT ADMINISTRATION from THE PRODUCTION ENVIRONMENT 7

    7
  99. @philhawksworth USER STATIC PROD ENV ADMIN DEPLOY AAS SSG DEV

    ENVIRONMENTS BUILD CONTENT AAS REPO CONTENTFUL
  100. @philhawksworth

  101. @philhawksworth HOSTING

  102. @philhawksworth “HOSTING PLUS”

  103. @philhawksworth “HOSTING WITH BENEFITS”

  104. NETLIFY NETLIFY.COM

  105. @philhawksworth USER STATIC ADMIN BUILD AND HOSTING AAS SSG DEV

    ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL
  106. @philhawksworth COMMIT HOOKS AND BUILDS

  107. @philhawksworth HOOKS NOTIFICATIONS CONTROL OF HEADERS BASIC AUTH HTTPS

  108. @philhawksworth USER STATIC ADMIN BUILD AND HOSTING AAS SSG DEV

    ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL
  109. @philhawksworth LIMITATIONS

  110. @philhawksworth PERSONALISATION VERY VERY LARGE SITES USER GENERATED CONTENT

  111. @philhawksworth LOCALISATION 7 7

  112. @philhawksworth STATIC SITE GENERATOR CONTENT FEEDS GOOGLE TRANSLATE

  113. @philhawksworth INDICATIVE TRANSLATIONS

  114. @philhawksworth GOOGLE DOCS

  115. @philhawksworth GOOGLE DOCS

  116. @philhawksworth GOOGLE DOCS

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

    source_language, target_language)
  118. @philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

  119. @philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

  120. @philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

  121. @philhawksworth GOOGLE DOCS / GOOGLE TRANSLATE

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

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

  124. @philhawksworth CONVERT TO YAML

  125. @philhawksworth github.com/doowb/grunt-convert

  126. @philhawksworth BAKE AND ENJOY

  127. @philhawksworth GOOGLE DOCS

  128. @philhawksworth GOOGLE DOCS HAWKSWORX.DEV/ES/BLOG

  129. @philhawksworth GOOGLE DOCS HAWKSWORX.DEV/ES/BLOG

  130. @philhawksworth GOOGLE DOCS HAWKSWORX.DEV/FR/BLOG

  131. @philhawksworth GOOGLE DOCS HAWKSWORX.DEV/FR/BLOG

  132. @philhawksworth GOOGLE DOCS HAWKSWORX.DEV/KO/BLOG

  133. @philhawksworth REACT TO CODE CHANGES REACT TO CONTENT CHANGES GENERATE

    STYLEGUIDES & SITES GENERATE LOCALISATIONS POPULATE JS SEARCH COMMENTS AND USER INPUT
  134. @philhawksworth PERCEPTION OF STATIC SITES 7 7

  135. @philhawksworth STATIC FLAT SIMPLE BASIC

  136. @philhawksworth STATIC HOSTED SITES CAN BE AS DYNAMIC AS THE

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

    TOOLS WE USE TO BUILD AND PUBLISH THEM
  138. @philhawksworth TIME TO REBRAND STATIC SITES

  139. @philhawksworth THE JAM STACK JAVASCRIPT / APIS / MARKUP MATHIAS

    BIILMANN, NETLIFY speakerdeck.com/biilmann/the-jam-stack
  140. @philhawksworth I’M A SOFTWARE ENGINEER WHAT LANGUAGE? JAVASCRIPT HA HA

    HA HA...!
  141. @philhawksworth MAKE THE STACK can SHORTER we ?

  142. @philhawksworth MAKE THE STACK can SHORTER we !

  143. @philhawksworth THE SHORT STACK

  144. @philhawksworth WRAPPING UP

  145. @philhawksworth SIMPLIFYING PRODUCTION ENVIRONMENTS IS A WIN PUT DISTANCE BETWEEN

    YOUR USERS AND YOUR COMPLEXITY
  146. @philhawksworth STATIC SITE GENERATORS & BUILD AUTOMATION ARE MATURING POWERFUL

    HOSTED TOOLS WHICH SOLVE COMMON SHORTFALLS ARE AVAILABLE
  147. @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/
  148. THANKS @PHILHAWKSWORTH 7 7