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

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 @