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.

Transcript

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

   View Slide

2. PHILHAWKSWORTH
   

   View Slide

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

   View Slide

4. @philhawksworth
   STATIC SITES
   

   View Slide

5. @philhawksworth
   DYNAMIC STATIC
   SITE STRATEGIES
   

   View Slide

6. @philhawksworth
   SSG
   

   View Slide

7. @philhawksworth
   SSGEEWIZZ
   

   View Slide

8. @philhawksworth
   SSGEEWIZZ
   @philhawksworth
   

   View Slide

9. @philhawksworth
   STATIC SITES
   GO ALL
   HOLLYWOOD
   

   View Slide

10. @philhawksworth
    BRIGHT
    COLOURS
    

    View Slide

11. @philhawksworth
    BIG FONTS
    

    View Slide

12. @philhawksworth
    BIG FONTS
    &
    BRIGHT COLOURS
    

    View Slide

13. @philhawksworth
    PREVIOUS RANTS
    7
    7
    

    View Slide

14. @philhawksworth
    I LOVE THE WEB
    7
    7
    

    View Slide

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

    View Slide

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

    View Slide

17. @philhawksworth
    http foobar.
    http ://
    

    View Slide

18. @philhawksworth
    http ://
    

    View Slide

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

    View Slide

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

    View Slide

21. @philhawksworth
    OMFG
    DEVICES
    

    View Slide

22. View Slide

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

    View Slide

24. @philhawksworth
    MAKE THE STACK
    can we
    SHORTER?
    

    View Slide

25. @philhawksworth
    COMPLEXITY
    7
    7
    

    View Slide

26. @philhawksworth
    REMOVING
    OBSTRUCTIONS
    TO QUALITY
    7
    7
    

    View Slide

27. @philhawksworth
    REMOVING
    OBSTRUCTIONS
    TO LONGEVITY
    7
    7
    

    View Slide

28. @philhawksworth
    

    View Slide

29. @philhawksworth
    SIMPLICITY
    7
    7
    

    View Slide

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

    View Slide

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

    View Slide

32. @philhawksworth
    BEST FIT
    7
    7
    

    View Slide

33. @philhawksworth
    FEW WRITES MANY READS
    

    View Slide

34. @philhawksworth
    SIMPLICITY
    7
    7
    

    View Slide

35. @philhawksworth
    

    View Slide

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
    

    View Slide

37. @philhawksworth
    DUMBING DOWN
    SIMPLIFYING
    is not
    7
    7
    

    View Slide

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

    View Slide

39. @philhawksworth
    A MOMENT
    ABOUT BENEFITS
    7
    7
    

    View Slide

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

    View Slide

41. @philhawksworth
    

    View Slide

42. @philhawksworth
    

    View Slide

43. @philhawksworth
    

    View Slide

44. @philhawksworth
    ?
    

    View Slide

45. @philhawksworth
    CREDENCE
    7
    7
    

    View Slide

46. @philhawksworth
    CONTRIBUTE.BARACKOBAMA.COM
    

    View Slide

47. View Slide

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

    View Slide

49. @philhawksworth
    GOOGLE
    YEAR IN SEARCH
    

    View Slide

50. View Slide

51. @philhawksworth
    LARGE AUDIENCE
    INFREQUENTLY UPDATED
    LONG LIFE
    

    View Slide

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

    View Slide

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

    View Slide

54. @philhawksworth
    STATIC SITES
    7
    7
    are
    ALREADY MAINSTREAM
    

    View Slide

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

    View Slide

56. @philhawksworth
    BUT DO YOU?
    

    View Slide

57. @philhawksworth
    FEEL MORE DYNAMIC
    7
    7
    

    View Slide

58. @philhawksworth
    ENABLERS
    7
    7
    

    View Slide

59. @philhawksworth
    GENERATORS AND
    TEMPLATING
    7
    7
    

    View Slide

60. STATICSITEGENERATORS.NET
    

    View Slide

61. @philhawksworth
    435
    

    View Slide

62. @philhawksworth
    

    View Slide

63. @philhawksworth
    A LITTLE CAUTION
    7
    7
    

    View Slide

64. @philhawksworth
    M
    

    View Slide

65. TAX
    @philhawksworth
    M
    HIPSTER
    the
    

    View Slide

66. @philhawksworth
    BAKE A SITE
    MORE QUICKLY
    7
    7
    

    View Slide

67. @philhawksworth
    UPDATE A SITE
    MORE QUICKLY
    7
    7
    

    View Slide

68. @philhawksworth
    FEEL MORE DYNAMIC
    7
    7
    

    View Slide

69. @philhawksworth
    SIDE EFFECT
    as a
    STYLEGUIDE
    7
    7
    

    View Slide

70. @philhawksworth
    ARTEFACT
    as an
    STYLEGUIDE
    7
    7
    

    View Slide

71. @philhawksworth
    PROCESS
    as a
    STYLEGUIDE
    7
    7
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

75. @philhawksworth
    AUTOMATION
    7
    7
    

    View Slide

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

    View Slide

77. @philhawksworth
    DEPLOY FASTER
    DEPLOY SAFER
    7
    7
    

    View Slide

78. @philhawksworth
    UPDATE FASTER
    7
    7
    

    View Slide

79. @philhawksworth
    FEEL MORE DYNAMIC
    7
    7
    

    View Slide

80. @philhawksworth
    SURGE.SH
    

    View Slide

81. @philhawksworth
    HIT THE CEILING
    7
    7
    

    View Slide

82. @philhawksworth
    BECAUSE WE NEED A
    DEVELOPER MINDSET
    

    View Slide

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

    View Slide

84. @philhawksworth
    WE STILL WANT
    THE SHIZZLE
    

    View Slide

85. @philhawksworth
    AND WE WANT TO
    MANAGE CONTENT
    OURSELVES
    

    View Slide

86. @philhawksworth
    LET’S LOOK AT
    COMMON
    COMPLEXITY
    

    View Slide

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

    View Slide

88. @philhawksworth
    REDUCE COMPLEXITY
    

    View Slide

89. @philhawksworth
    OTHER PEOPLE’S
    PLUMBING
    

    View Slide

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

    View Slide

91. @philhawksworth
    BUT THAT’S NOT
    SIMPLIFYING!
    

    View Slide

92. @philhawksworth
    IT’S ABOUT
    SHIFTING
    COMPLEXITY
    

    View Slide

93. @philhawksworth
    OUTSOURCE
    COMPLEXITY
    7
    7
    

    View Slide

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

    View Slide

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

    View Slide

96. @philhawksworth
    CONTENTFUL.COM
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

100. @philhawksworth
     

     View Slide

101. @philhawksworth
     HOSTING
     

     View Slide

102. @philhawksworth
     “HOSTING PLUS”
     

     View Slide

103. @philhawksworth
     “HOSTING WITH BENEFITS”
     

     View Slide

104. NETLIFY
     NETLIFY.COM
     

     View Slide

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

     View Slide

106. @philhawksworth
     COMMIT HOOKS
     AND BUILDS
     

     View Slide

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

     View Slide

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

     View Slide

109. @philhawksworth
     LIMITATIONS
     

     View Slide

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

     View Slide

111. @philhawksworth
     LOCALISATION
     7
     7
     

     View Slide

112. @philhawksworth
     STATIC SITE GENERATOR
     CONTENT FEEDS
     GOOGLE TRANSLATE
     

     View Slide

113. @philhawksworth
     INDICATIVE TRANSLATIONS
     

     View Slide

114. @philhawksworth
     GOOGLE DOCS
     

     View Slide

115. @philhawksworth
     GOOGLE DOCS
     

     View Slide

116. @philhawksworth
     GOOGLE DOCS
     

     View Slide

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

     View Slide

118. @philhawksworth
     GOOGLE DOCS / GOOGLE TRANSLATE
     

     View Slide

119. @philhawksworth
     GOOGLE DOCS / GOOGLE TRANSLATE
     

     View Slide

120. @philhawksworth
     GOOGLE DOCS / GOOGLE TRANSLATE
     

     View Slide

121. @philhawksworth
     GOOGLE DOCS / GOOGLE TRANSLATE
     

     View Slide

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

     View Slide

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

     View Slide

124. @philhawksworth
     CONVERT TO YAML
     

     View Slide

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

     View Slide

126. @philhawksworth
     BAKE AND ENJOY
     

     View Slide

127. @philhawksworth
     GOOGLE DOCS
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

134. @philhawksworth
     PERCEPTION
     OF STATIC SITES
     7
     7
     

     View Slide

135. @philhawksworth
     STATIC
     FLAT
     SIMPLE
     BASIC
     

     View Slide

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

     View Slide

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

     View Slide

138. @philhawksworth
     TIME TO REBRAND
     STATIC SITES
     

     View Slide

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

     View Slide

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

     View Slide

141. @philhawksworth
     MAKE THE STACK
     can
     SHORTER
     we
     ?
     

     View Slide

142. @philhawksworth
     MAKE THE STACK
     can
     SHORTER
     we
     !
     

     View Slide

143. @philhawksworth
     THE SHORT STACK
     

     View Slide

144. @philhawksworth
     WRAPPING UP
     

     View Slide

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

     View Slide

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

     View Slide

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/
     

     View Slide

148. THANKS
     @PHILHAWKSWORTH
     7
     7
     

     View Slide