Static sites go all Hollywood

Static sites go all Hollywood

The popularity of building web sites with static site generators is on the rise. Their reduced complexity, easier compliance, cheaper hosting, and other benefits are getting people’s attention, but they do have limits.

This talk will explore how we can break through some of those limits with the use of a new breed of hosted tools and services. We’ll look at practical examples of how a static site generator can help deliver a modern web development workflow, support a living styleguide, and also pack the kind of dynamic punch that you’d only think possible from bigger application stacks.

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

September 22, 2015
Tweet

Transcript

  1. STATIC SITES GO ALL HOLLYWOOD 7 7 @PHILHAWKSWORTH FRONTEERS, AMSTERDAM,

    2015
  2. PHILHAWKSWORTH @ QUESTIONS SUGGESTIONS ARGUMENTS COMMENTS

  3. @philhawksworth PREVIOUS RANTS

  4. @philhawksworth I LOVE THE WEB

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

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

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

  8. @philhawksworth http ://

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

  10. @philhawksworth ALL FINE NOW

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

  12. @philhawksworth OMFG DEVICES

  13. None
  14. @philhawksworth REMOVING OBSTRUCTIONS TO QUALITY 7 7

  15. @philhawksworth REMOVING OBSTRUCTIONS TO LONGEVITY 7 7

  16. @philhawksworth

  17. @philhawksworth SIMPLICITY 7 7

  18. BAKE, DON’T FRY @philhawksworth

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

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

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

  22. @philhawksworth FEW WRITES MANY READS

  23. @philhawksworth SIMPLICITY 7 7

  24. @philhawksworth HOLLYWOOD not very

  25. @philhawksworth DUMBING DOWN SIMPLIFYING is not 7 7

  26. @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
  27. @philhawksworth

  28. None
  29. PLEASE DON'T TAKE MY FLASH AWAY FROM ME! – My

    buddy, Steve
  30. None
  31. @philhawksworth DUMBING DOWN. SIMPLIFYING IT LET’S US FOCUS is not

    ON WHAT MATTERS
  32. @philhawksworth A MOMENT ABOUT THE BENEFITS 7 7

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

    EASIER COMPLIANCE GREATER PORTABILITY SANDBOXED ENVIRONMENTS ATTRITION AVOIDANCE
  34. None
  35. None
  36. @philhawksworth CREDENCE 7 7

  37. @philhawksworth

  38. @philhawksworth BAKED WITH JEKYLL LARGE AUDIENCE RAPID ITERATIONS HOSTED STATICALLY

  39. @philhawksworth GOOGLE WEB FUNDAMENTALS

  40. @philhawksworth DEVELOPERS.GOOGLE.COM/WEB/FUNDAMENTALS

  41. @philhawksworth CONTENT ON GITHUB BAKED WITH JEKYLL SERVED STATIC BY

    GOOGLE
  42. @philhawksworth REDUCED RISK 7 7

  43. @philhawksworth GOOGLE YEAR IN SEARCH

  44. @philhawksworth

  45. @philhawksworth LARGE AUDIENCE INFREQUENTLY UPDATED LONG LIFE

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

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

  48. @philhawksworth STATIC SITES 7 7 are ALREADY MAINSTREAM

  49. @philhawksworth ENABLERS 7 7

  50. @philhawksworth FRONT END TOOLING 7 7

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

    HA HA...!
  52. @philhawksworth GENERATORS AND TEMPLATING 7 7

  53. @philhawksworth STATICSITEGENERATORS.NET

  54. @philhawksworth 393

  55. @philhawksworth TAX M HIPSTER the

  56. @philhawksworth SIDE EFFECT as a STYLEGUIDE 7 7

  57. @philhawksworth ARTEFACT as an STYLEGUIDE 7 7

  58. @philhawksworth PROCESS as a STYLEGUIDE 7 7

  59. @philhawksworth

  60. @philhawksworth STYLEGUIDE BUILD MODULES PRODUCTION SITE TEMPLATES CONTENT SSG OPTIMISATION

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

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

    ANNA DEBENHAM
  63. @philhawksworth AUTOMATION 7 7

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

    M
  65. @philhawksworth DEPLOY FASTER DEPLOY SAFER 7 7

  66. @philhawksworth UPDATE FASTER 7 7

  67. @philhawksworth FEEL MORE DYNAMIC 7 7

  68. @philhawksworth SURGE.SH

  69. @philhawksworth HIT THE CEILING 7 7

  70. @philhawksworth BECAUSE WE NEED A DEVELOPER MINDSET

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

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

  73. @philhawksworth WE STILL WANT THE SHIZZLE

  74. @philhawksworth AND WE WANT TO MANAGE CONTENT OURSELVES

  75. @philhawksworth LET’S LOOK AT COMMON COMPLEXITY

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

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

  78. @philhawksworth OTHER PEOPLE’S PLUMBING

  79. @philhawksworth OTHER PEOPLE’S PLUMBING

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

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

  82. @philhawksworth IT’S ABOUT SHIFTING COMPLEXITY 7 7

  83. @philhawksworth OUTSOURCE COMPLEXITY 7 7

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

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

  86. @philhawksworth JEKYLL DATA

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

  88. @philhawksworth CONTENTFUL.COM

  89. @philhawksworth DECOUPLES THE CONTENT ADMINISTRATION from THE PRODUCTION ENVIRONMENT

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

    ENVIRONMENTS BUILD CONTENT AAS REPO CONTENTFUL
  91. @philhawksworth

  92. @philhawksworth ROOTS ROOTS.CX

  93. @philhawksworth HOSTING

  94. @philhawksworth “HOSTING PLUS” 7 7

  95. @philhawksworth “HOSTING WITH BENEFITS” 7 7

  96. @philhawksworth NETLIFY.COM

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

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

    ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL
  99. FORMERLY BITBALLOON 7 7

  100. @philhawksworth http://www.netlify.com

  101. COMMIT HOOKS AND BUILDS

  102. @philhawksworth http://www.netlify.com

  103. COMMAND LINE INTERFACE

  104. @philhawksworth WEB HOOKS NOTIFICATIONS CONTROL OF HEADERS BASIC AUTH

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

    ENVIRONMENTS BUILD CONTENT AAS REPO NETLIFY CONTENTFUL
  106. @philhawksworth LIMITATIONS 7 7

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

  108. @philhawksworth WHY DO WE HAVE A SITE AND HOW DO

    WE USE IT? LISA WELCHMAN
  109. @philhawksworth BEST FIT 7 7

  110. @philhawksworth

  111. @philhawksworth IT DEPENDS

  112. @philhawksworth WRAPPING UP 7 7

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

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

    HOSTED TOOLS WHICH SOLVE COMMON SHORTFALLS ARE AVAILABLE
  115. @philhawksworth JOB INTERVIEWS AT R/GA ARE UNLIKE THOSE IN SWORDFISH

  116. @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
  117. THANKS @PHILHAWKSWORTH 7 7