Static Sites Can be the Solution

Presentation on "Static Sites Can be the Solution" from Scotch on the Rocks 2014 #sotr14

1. @hpoom Static Sites Can be the Solution By Simon Wood 1 Scotch on the Rocks 2014 #sotr14
2. / @hpoom About me Head of Technology and Innovation Holiday Extras Simon Wood 2
3. / @hpoom 3 Holiday Extras
4. / @hpoom 4 @hpoom
5. / @hpoom 5 What I am going to cover
6. / @hpoom Dynamic sites don’t work 5 What I am going to cover
7. / @hpoom Dynamic sites don’t work 5 Static Site Generators What I am going to cover
8. / @hpoom Dynamic sites don’t work 5 Static Site Generators Flat file CMS What I am going to cover
9. / @hpoom Static does not mean static 6 Static Site != Static Content
10. / @hpoom Static does not mean static 7 Static Site == Static Architecture
11. @hpoom Things are not working now 8
12. ” @hpoom WordPress is used by more than 22% of the top 10 million websites as of August 2013 Wikipedia "WordPress Pencil and Pins-07" by Christopher Ross. Licensed under Creative Commons.- https://flic.kr/p/a688WQ
13. @hpoom Databases don’t scale 10
14. @hpoom cache Queries 11
15. @hpoom Front Side Cache 12
16. ” @hpoom Some websites are fried up for the user every time. But others are baked once and served up again and again. Aaron Swartz http://bit.ly/bake-fry "Boston Wiki Meetup" by Sage Ross. Licensed under Creative Commons.- https://flic.kr/p/6QVV36
17. @hpoom WYSIWYG FAIL 14
18. / @hpoom Problems with CMS 15
19. / @hpoom Problems with CMS 15 Security
20. / @hpoom Problems with CMS 15 Portability Security
21. / @hpoom Problems with CMS 15 Portability Reliability Security
22. @hpoom The web has Evolved 16
23. @hpoom Site Speed is important 17
24. / @hpoom 500ms 18 Google 20% revenue
25. / @hpoom 19 Amazon 100ms 1% revenue
26. / @hpoom 20 Yahoo 400ms 9% traffic
27. / @hpoom Medium medium.com Less is Less 21 Gov UK www.gov.uk/transformation
28. ” @hpoom The web's moved beyond the desktop, and it's not looking back. The number of devices we're designing for is growing just as quickly as mobile traffic. Ethan Marcotte "Device lab" by Jeremy Keith. Licensed under Creative Commons.- https://flic.kr/p/kj1Dm7
29. / @hpoom 23 CSS Pre-compilers
30. / @hpoom 24 Javascript Proliferation
31. / @hpoom good tooling 25
32. / @hpoom 26 client side Widgets
33. @hpoom Static Site Generators 27
34. / @hpoom History of SSG 28
35. / @hpoom History of SSG 28 Moveable Type 13 years old
36. / @hpoom History of SSG 28 nanoc 7 years old Moveable Type 13 years old
37. / @hpoom History of SSG 28 nanoc 7 years old jekyll 6 years old Moveable Type 13 years old
38. @hpoom Example SSG Built Sites 29
39. / @hpoom Zurb Foundation assemble foundation.zurb.com
40. / @hpoom Mozilla WebFWD Stacey webfwd.org
41. / @hpoom GitHub Training Jekyll training.github.com
42. / @hpoom 33 staticsitegenerators.net 278
43. / @hpoom 33 staticsitegenerators.net 278
44. / @hpoom 34 @hpoom
45. / @hpoom Lots of choice 35 assemble Cactus DocPad Dropplets Hexo Hugo Hyde Jekyll metalsmith Middleman Octopress Pelican Stacey Wintersmith GO JavaScript PHP Python Ruby
46. @hpoom 36 Content Templates Sass HTML CSS Publish
47. @hpoom Markdown 37
48. / @hpoom Markdown is the future 38 "Markdown is the Future of Writing" by Robby Ingebretsen. - http://bit.ly/mdfuture ## A Little Markdown Example Markdown is **awesome** because: - it’s easy to *write* - it’s easy to *read* - it keeps you in the *moment* A LITTLE MARKDOWN EXAMPLE Markdown is awesome because: • it’s easy to write • it’s easy to read • it keeps you in the moment
49. ” @hpoom If your app has text fields that can be formatted, and you're using your own janky custom markup instead of Markdown, you're doing it wrong. Ernie Miller "Old school (9/365)" by Jinny. Licensed under Creative Commons.- https://flic.kr/p/7uELQN
50. / @hpoom content is versioned 40
51. / @hpoom Web Editor dillinger.io Markdown Tools 41 Mac Editor mouapp.com Books gitbook.io
52. @hpoom 42 FRONT MATTER
53. @hpoom 43 --- layout: post title: Bloggling like a pro tags: ['baby', 'startup', 'prediction'] created: '2014-03-17T22:24:18+00:00' --- *content goes here*
54. @hpoom 44 Templates
55. @hpoom 45 <!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> </head> <body> {{content}} </body> </html>
56. / @hpoom Template Engines 46 Eco Haml Handlebars Jade Mustache Twig CoffeeScript JavaScript PHP Ruby
57. @hpoom Pre-compilers and tooling 47
58. @hpoom Hosting 48
59. / @hpoom GitHub Pages
60. / @hpoom AWS S3
61. / @hpoom BitBalloon
62. @hpoom Why so many? 52
63. ” @hpoom I believe that writing a static site generator is the new "Hello World". It is stupidly trivial to write a basic one. Timo Zimmermann http://bit.ly/ssghello "printf("hello, world\n");" by isipeoria. Licensed under Creative Commons.- https://flic.kr/p/bcgZ5g
64. @hpoom ROLL YOUR OWN SSG 54
65. @hpoom Terminal driven 55
66. @hpoom Flat File CMS 56
67. @hpoom Example Flat FILE CMS Sites 57
68. / @hpoom asana statamic asana.com
69. / @hpoom World Backup Day Kirby worldbackupday.com
70. / @hpoom Some Flat File CMS 60 Kirby statamic Pico Stacey Cockpit Monstra razorCMS
71. / @hpoom statamic 61
72. ” @hpoom A flat-file CMS is a content management system that stores content in files and folders rather than in a DB like a traditional CMS Jeremiah Shoaf http://bit.ly/FlatCMS "P1040010" by Mike Linksvayer. Licensed under Creative Commons.- https://flic.kr/p/dYKSNz
73. @hpoom Dynamic Elements with Javascript 63
74. / @hpoom My blog needs comments 64
75. / @hpoom My blog needs comments 64
76. / @hpoom My blog needs comments 64
77. / @hpoom My blog needs comments 64
78. / @hpoom Bells & whistles 65
79. / @hpoom Bells & whistles 65 Surveys
80. / @hpoom Bells & whistles 65 Surveys Video
81. / @hpoom Bells & whistles 65 Surveys Video Charts
82. / @hpoom Client side JS can do a lot 66 Web Sockets WebRTC Canvas WebGL Local Storage Animation Video Audio Shadow DOM
83. @hpoom Summary 67
84. @hpoom Where it is not Suitable 68
85. @hpoom Not non-tech accessible 69
86. @hpoom not a solution to everything 70
87. @hpoom Requires a Rethink 71
88. @hpoom Other options 72
89. / @hpoom 73 I can’t change my CMS
90. / @hpoom Boost 73 I can’t change my CMS
91. / @hpoom Boost 73 WP-Super Cache I can’t change my CMS
92. / @hpoom Boost 73 WP-Super Cache I can’t change my CMS Buster
93. / @hpoom Mixture mixture.io Alternatives 74 Hammer hammerformac.com Cactus cactusformac.com
94. @hpoom All else fails then VARNISH 75
95. @hpoom The Benefits 76
96. @hpoom SPEED 77
97. @hpoom Security 78
98. @hpoom Simple Cheap Hosting 79
99. @hpoom Revision Control 80
100. @hpoom Portability 81
101. @hpoom SIMPLICITY 82
102. @hpoom Generate once 83
103. @hpoom Thank you please contact me if you have any questions Twitter: @hpoom Links: http://bit.ly/SOTR2014 logo 84 By Simon Wood Scotch on the Rocks 2014 #sotr14