Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dynamic Static Site Strategies

Dynamic Static Site Strategies

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 sites which can be more dynamic than some of their heavier and more costly brothers and sisters.

#ssgeewizz

Phil Hawksworth

February 14, 2014
Tweet

More Decks by Phil Hawksworth

Other Decks in Technology

Transcript

  1. > {} st DYNAMIC STATIC SITE STRATEGIES @PHILHAWKSWORTH OPPORTUNITIES FOR

    SSGs & WAYS THEY CAN BE MORE POWERFUL
  2. >< {}\ stu @PHILHAWKSWORTH STATIC SITE GENERATION

  3. >< {}\ stu @PHILHAWKSWORTH SSGEEWIZZ

  4. >< {}\ tu }\ SSGEEWIZZ

  5. >< {}\ stu @PHILHAWKSWORTH A QUICK INTRO

  6. < }\ stu {}\ PHILHAWKSWORTH @

  7. >< {}\ stu @PHILHAWKSWORTH CLIENTS

  8. >< {}\ stu @PHILHAWKSWORTH FRONT END

  9. >< {}\ stu @PHILHAWKSWORTH I’M A SOFTWARE ENGINEER WHAT LANGUAGE?

    JAVASCRIPT HA HA HA HA...!
  10. >< {}\ stu @PHILHAWKSWORTH F#@!!!

  11. >< {}\ stu @PHILHAWKSWORTH TOOLS ENGINEERING o

  12. >< {}\ stu @PHILHAWKSWORTH M

  13. >< {}\ stu @PHILHAWKSWORTH M HIPSTER TAX the

  14. >< {}\ stu @PHILHAWKSWORTH STATIC SITE GENERATION

  15. >< {}\ stu @PHILHAWKSWORTH THE GOOD OL’ DAYS

  16. >< {}\ stu @PHILHAWKSWORTH ~/htdocs

  17. >< {}\ stu @PHILHAWKSWORTH http://aston.ac.uk/~hawkswpn

  18. >< {}\ stu @PHILHAWKSWORTH http://aston.ac.uk/~hawkswpn 404

  19. >< {}\ stu @PHILHAWKSWORTH WRITE TEXT SAVE REFRESH REPEAT REJOICE

  20. >< {}\ stu @PHILHAWKSWORTH SOPHISITICATION

  21. >< {}\ stu @PHILHAWKSWORTH YOU NEED A SIEGEY BIN MY

    BUDDY AT UNI
  22. >< {}\ stu @PHILHAWKSWORTH cgi-bin

  23. >< {}\ stu @PHILHAWKSWORTH PERL

  24. >< {}\ stu @PHILHAWKSWORTH Q PLUMBING & INFRASTRUCTURE

  25. >< {}\ stu @PHILHAWKSWORTH A RETURN TO SIMPLICITY

  26. >< {}\ stu @PHILHAWKSWORTH THE CHALLENGE

  27. >< {}\ stu @PHILHAWKSWORTH THE {CLIENT} NEEDS A BEAUTIFUL SITE

    CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
  28. >< {}\ stu @PHILHAWKSWORTH A MOBILE FIRST RESPONSIVE WEB APP

    BUZZWORD ALERT k k
  29. >< {}\ stu @PHILHAWKSWORTH AMOBILEFIRSTRESPONSIVEWEBAPP #

  30. >< {}\ stu @PHILHAWKSWORTH A WEB SITE

  31. >< {}\ stu @PHILHAWKSWORTH THE {CLIENT} NEEDS A BEAUTIFUL SITE

    CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
  32. >< {}\ stu @PHILHAWKSWORTH IS THIS ONLY POSSIBLE WITH A

    DYNAMIC SERVER ARCHITECTURE?
  33. < }\ stu {}\ NO

  34. >< {}\ stu @PHILHAWKSWORTH STATIC ARCHITECTURE DYNAMIC FEATURES for

  35. >< {}\ stu @PHILHAWKSWORTH WHAT DOES DYNAMIC MEAN?

  36. >< {}\ stu @PHILHAWKSWORTH PERSONALISED CONTENT

  37. >< {}\ stu @PHILHAWKSWORTH USER GENERATED CONTENT

  38. >< {}\ stu @PHILHAWKSWORTH TIME TO REFRESH

  39. >< {}\ stu @PHILHAWKSWORTH  !60hz

  40. >< {}\ stu @PHILHAWKSWORTH { PUBLISH to TIME

  41. >< {}\ stu @PHILHAWKSWORTH KEEP IT FRESH?

  42. >< {}\ stu @PHILHAWKSWORTH CODE DEPLOYMENT CONTENT DEPLOYMENT

  43. >< {}\ stu @PHILHAWKSWORTH THE OPPORTUNITY

  44. >< {}\ stu @PHILHAWKSWORTH CONSIDER HONEST USE CASES

  45. >< {}\ stu @PHILHAWKSWORTH MANY TYPES OF SITES

  46. >< {}\ stu @PHILHAWKSWORTH READ ONLY

  47. >< {}\ stu @PHILHAWKSWORTH TARGETED CONTENT

  48. >< {}\ stu @PHILHAWKSWORTH WE CAN MAKE EVERYTHING FASTER

  49. >< {}\ stu @PHILHAWKSWORTH BAKE, DON’T FRY

  50. >< {}\ stu @PHILHAWKSWORTH GROUND BREAKING NEW APPROACH 6 2002

  51. >< {}\ stu @PHILHAWKSWORTH BAKE, DON’T FRY AARON SWARTZ

  52. >< {}\ stu @PHILHAWKSWORTH WEBMAKE A PERL CMS

  53. >< {}\ stu @PHILHAWKSWORTH

  54. >< {}\ stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO

    MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002
  55. >< {}\ stu @PHILHAWKSWORTH REDUCE COMPLEXITY

  56. >< {}\ stu @PHILHAWKSWORTH EASE OF DEVELOPEMENT

  57. >< {}\ stu @PHILHAWKSWORTH INCREASED PORTABILITY

  58. >< {}\ stu @PHILHAWKSWORTH

  59. >< {}\ stu @PHILHAWKSWORTH

  60. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

  61. >< {}\ stu @PHILHAWKSWORTH ENTERPRISE COMPLIANCE

  62. >< {}\ stu @PHILHAWKSWORTH ENTERPRISE COMPLIANCE

  63. >< {}\ stu @PHILHAWKSWORTH SECURITY AUDIT PENETRATION TESTING LOAD TESTING

  64. >< {}\ stu @PHILHAWKSWORTH NOT ABOUT PERFORMANCE

  65. >< {}\ stu @PHILHAWKSWORTH SOME CHEAP PERFORMANCE GAINS EXIST but

  66. >< {}\ stu @PHILHAWKSWORTH FILE BASED ARCHITECTURE

  67. >< {}\ stu @PHILHAWKSWORTH RAPID REQUEST RESPONSE

  68. >< {}\ stu @PHILHAWKSWORTH COSTS

  69. >< {}\ stu @PHILHAWKSWORTH HOSTING

  70. >< {}\ stu @PHILHAWKSWORTH “JUST A FEW PERSONAL SITES”

  71. >< {}\ stu @PHILHAWKSWORTH NOW I’M SAVING $40 A MONTH

    @ANDYSHORA
  72. >< {}\ stu @PHILHAWKSWORTH AT SCALE, THIS CAN BE BIG

  73. >< {}\ stu @PHILHAWKSWORTH MAINTENANCE

  74. >< {}\ stu @PHILHAWKSWORTH LESS INFRASTRUCTURE FEWER SERVERS LESS PRODUCTION

    CODE
  75. >< {}\ stu @PHILHAWKSWORTH PORTABILITY

  76. >< {}\ stu @PHILHAWKSWORTH FILES CAN GO ANYWHERE

  77. >< {}\ stu @PHILHAWKSWORTH AVAILABILITY OF SKILLS

  78. >< {}\ stu @PHILHAWKSWORTH FOCUS

  79. >< {}\ stu @PHILHAWKSWORTH INCREASED TALENT POOL

  80. >< {}\ stu @PHILHAWKSWORTH ARCHITECTURAL COMPLEXITY

  81. >< {}\ stu @PHILHAWKSWORTH DEVELOPMENT COSTS

  82. >< {}\ stu @PHILHAWKSWORTH CONFIDENCE

  83. >< {}\ stu @PHILHAWKSWORTH TOOLS & ENABLERS

  84. >< {}\ stu @PHILHAWKSWORTH EASIER ITERATION DYNAMIC through

  85. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  86. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  87. >< {}\ stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY

    DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  88. >< {}\ stu @PHILHAWKSWORTH STATICSITEGENERATORS.NET DOCPAD / AUTOMATED / 224

    SSGs
  89. >< {}\ stu @PHILHAWKSWORTH 224

  90. >< {}\ stu @PHILHAWKSWORTH M HIPSTER TAX the

  91. >< {}\ stu @PHILHAWKSWORTH JEKYLL

  92. >< {}\ stu @PHILHAWKSWORTH }\ }\

  93. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK

  94. >< {}\ stu @PHILHAWKSWORTH The one problem with the “bake”

    philosophy is dependencies. It’s difficult to keep track of which pages depend on which others and regenerate them correctly when they change.
  95. >< {}\ stu @PHILHAWKSWORTH The one problem with the “bake”

    philosophy is dependencies. It’s difficult to keep track of which pages depend on which others and regenerate them correctly when they change. SOLVED
  96. >< {}\ stu @PHILHAWKSWORTH RICH TEMPLATING ENGINES PARTIALS INHERITANCE LOGIC

  97. >< {}\ stu @PHILHAWKSWORTH DEPENDENCIES

  98. >< {}\ stu @PHILHAWKSWORTH $ npm install

  99. >< {}\ stu @PHILHAWKSWORTH $ npm isntall

  100. >< {}\ stu @PHILHAWKSWORTH BIG STACK TINY STACK SMALL STACK

  101. >< {}\ stu @PHILHAWKSWORTH HARPJS

  102. >< {}\ stu @PHILHAWKSWORTH HARPJS PREPROCESSING EJS, SWIG SASS, LESS

    COFFEESCRIPT
  103. >< {}\ stu @PHILHAWKSWORTH LESS BLOGGY MOAR DATA OBJECTS

  104. >< {}\ stu @PHILHAWKSWORTH RAPID & POWERFUL SITE GENERATION SOLVED

  105. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  106. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \

  107. >< {}\ stu @PHILHAWKSWORTH d

  108. >< {}\ stu @PHILHAWKSWORTH

  109. >< {}\ stu @PHILHAWKSWORTH AUTOMATION REPEATABLE PREDICATABLE LOW FRICTION

  110. >< {}\ stu @PHILHAWKSWORTH FABRIC

  111. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH

  112. >< {}\ stu @PHILHAWKSWORTH GRUNT GULP BRUNCH BELCH BURP COUGH

    HICCUP M M M
  113. >< {}\ stu @PHILHAWKSWORTH GENERATORS AUTOMATION HOSTING

  114. >< {}\ stu @PHILHAWKSWORTH SITE44

  115. >< {}\ stu @PHILHAWKSWORTH  3 3 3 \ \

  116. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES

  117. >< {}\ tu }\ BITBALLOON

  118. >< {}\ tu }\ HOSTING & OPTIMISATION AS A SERVICE

    AUTOMATIC CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  119. >< {}\ stu @PHILHAWKSWORTH AMAZON S3 GITHUB PAGES DROPBOX STATIC

    HOSTING AAS
  120. >< {}\ stu @PHILHAWKSWORTH AMAZON S3 GITHUB PAGES DROPBOX STATIC

    HOSTING AAS ANY WEBSERVER
  121. >< {}\ stu @PHILHAWKSWORTH PUSH IT

  122. >< {}\ stu @PHILHAWKSWORTH EXAMPLES

  123. < }\ stu {}\ BEERCLUB SIMPLEST EXAMPLE SIMPLEST WORKFLOW POWERED

    BY NERDS
  124. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED HOSTING

  125. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES

  126. >< {}\ stu @PHILHAWKSWORTH GITHUB PAGES x

  127. >< {}\ stu @PHILHAWKSWORTH $ git push origin gh-pages

  128. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED VERSION CONTROL

  129. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED SITE GENERATION

  130. >< {}\ stu @PHILHAWKSWORTH OUTSOURCED DEPLOYMENT

  131. >< {}\ stu @PHILHAWKSWORTH {{ site.data.drops }}

  132. >< {}\ stu @PHILHAWKSWORTH {{ site.data.FILENAME }}

  133. >< {}\ stu @PHILHAWKSWORTH TOTALLY FORKED SIMPLEST EXAMPLE SIMPLEST WORKFLOW

    NOT POWERED BY NERDS
  134. >< {}\ stu @PHILHAWKSWORTH SIMPLIFYING DUMBING DOWN is not

  135. >< {}\ stu @PHILHAWKSWORTH LIMITATIONS & WORKAROUNDS

  136. >< {}\ stu @PHILHAWKSWORTH SEARCH & COMMENTS

  137. >< {}\ stu @PHILHAWKSWORTH SEARCH

  138. >< {}\ stu @PHILHAWKSWORTH SIMPLE INDEX JAVASCRIPT PROGRESSIVE ENHANCEMENT A

    JEKYLL EXAMPLE
  139. >< {}\ stu @PHILHAWKSWORTH --- --- { "posts" : [

    {% for item in site.posts %} { "title" : "{{ item.title }}", "url" : "{{ item.url }}", "date" : "{{ item.date | date_to_long_string }}", "words" : "{{ item.content | strip_html | wordmap }}" } {% if forloop.last != true %},{% endif %} {% endfor %} ]} SRC/SEARCH.JSON
  140. >< {}\ stu @PHILHAWKSWORTH { !"posts" : [ !{ !!"title"

    : "TF;DR - Too funky; Didn't read.", !!"url" : "/blog/too-funky-didnt-read", !!"date" : "06 January 2014", !!"words" : "observations web excess trend for 'parallax' order keep down just 77mb (big low typical single embark my usual rants bloated pages require loadin recently said? curious hear regardless implementat !}, ... SITE/SEARCH.JSON
  141. >< {}\ stu @PHILHAWKSWORTH LOAD ASYNCHRONOUSLY AFTER PAGE CACHED AND

    STATIC CONTEXTUAL LOAD PAGE WEIGHT?
  142. < }\ stu {}\

  143. >< {}\ stu @PHILHAWKSWORTH COMMENTS

  144. >< {}\ stu @PHILHAWKSWORTH FIRST!! WHAT ABOUT COMMENTS? DAMMIT I

    THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG
  145. >< {}\ stu @PHILHAWKSWORTH HOW TIMELY SHOULD COMMENTS BE? REAL

    TIME OR MODERATED?
  146. >< {}\ stu @PHILHAWKSWORTH COMMENT APPROVAL WORKFLOW

  147. >< {}\ tu }\ BITBALLOON

  148. >< {}\ tu }\ BITBALLOON

  149. >< {}\ tu }\ “OTHER FUNKY SHIZZLE” BITBALLOON

  150. >< {}\ tu }\ BITBALLOON API

  151. >< {}\ stu @PHILHAWKSWORTH <form name="signup" action="thank-you.html"> First Name: <input

    type="text" name="first_name"> Email: <input type="email" name="email"> <button>Sign me up</button> </form>
  152. >< {}\ stu @PHILHAWKSWORTH DATA HANDLING API ENDPOINT EMAIL NOTIFICATIONS

    INTEGRATIONS WITH OTHER SERVICES
  153. >< {}\ stu @PHILHAWKSWORTH GET DATA BUILD as part of

    the
  154. >< {}\ stu @PHILHAWKSWORTH CALL TO ARMS

  155. >< {}\ stu @PHILHAWKSWORTH SEEK OUT CHANCES TO SIMPLIFY

  156. >< {}\ stu @PHILHAWKSWORTH CHALLENGE THE NEED FOR COMPLEXITY

  157. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF FASTER

  158. >< {}\ stu @PHILHAWKSWORTH MAKE STUFF GO FASTER

  159. >< {}\ stu @PHILHAWKSWORTH SPEND LESS

  160. < }\ stu {}\ THANKS FONTS LINKS BATTLESHIP - www.flickr.com/photos/swfphotos/8075999488

    COMPLIANCE - www.flickr.com/photos/aorr/1229272894 SALTNPEPPER - www.flickr.com/photos/camknows/4595655917 JEKYLL - jekyllrb.com HARP - harpjs.com, harp.io SSGS - staticsitegenerators.net HEXO - zespia.tw/hexo BAKE, DON’T FRY - www.aaronsw.com/weblog/000404 BITBALLOON - www.bitballoon.com BITBALLOON API - github.com/BitBalloon/bitballoon-api PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD
  161. < }\ stu {}\ THANKS! PHILHAWKSWORTH @