Static Sites Can be the Solution (Simon Wood)

2,110 views

Published on

Taken from this month's (17th July) London Web meet-up (http://londonweb.org) - we were joined by Simon Wood. Based in Kent, Simon is a passionate tech/geek and is currently Head of Technology and Innovation at the Shortbreaks and New Ventures division of Holiday Extras, a travel technology company. Simon is also acting CTO for miDrive an in-house Start Up incubator.

Simon's session description for Static Sites Can be the Solution:

"We build complex dynamic websites as a first port of call but these are slow, have issues with scaling and can be complex to host. I believe we should more often look to static sites first. I will demonstrate why static sites are such a good choice and show you how you can build static sites, using tools like Jekyll and other static site generators. We will cover how they can be hosted on S3 and GitHub pages and talk about how they can be frequently updated with the correct workflow even though they are static. You can have a blog on a static site and still make regular new blog posts and have dynamic content."

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,110
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Static Sites Can be the Solution (Simon Wood)

  1. 1. @hpoom Static Sites Can be the Solution By Simon Wood London Web - July 2014 1
  2. 2. / @hpoom About me Head of Technology and Innovation Holiday Extras Simon Wood 2
  3. 3. / @hpoom Holiday Extras 3
  4. 4. / @hpoom@hpoom 4
  5. 5. / @hpoom What I am going to cover 5
  6. 6. / @hpoom Dynamic sites don’t work What I am going to cover 5
  7. 7. / @hpoom Dynamic sites don’t work Static Site Generators What I am going to cover 5
  8. 8. / @hpoom Dynamic sites don’t work Static Site Generators Flat file CMS What I am going to cover 5
  9. 9. / @hpoom Static does not mean static Static Site != Static Content 6
  10. 10. / @hpoom Static does not mean static Static Site == Static Architecture 7
  11. 11. @hpoom Things are not working now 8
  12. 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/a688WQ9
  13. 13. @hpoom Databases don’t scale 10
  14. 14. @hpoom cache Queries 11
  15. 15. @hpoom Front Side Cache 12
  16. 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/6QVV3613
  17. 17. @hpoom WYSIWYG FAIL 14
  18. 18. / @hpoom Problems with CMS 15
  19. 19. / @hpoom Problems with CMS Security 15
  20. 20. / @hpoom Problems with CMS PortabilitySecurity 15
  21. 21. / @hpoom Problems with CMS Portability ReliabilitySecurity 15
  22. 22. @hpoom The web has Evolved 16
  23. 23. @hpoom Site Speed is important 17
  24. 24. / @hpoom 500ms Google 20% revenue 18
  25. 25. / @hpoom Amazon 100ms 1% revenue 19
  26. 26. / @hpoom Yahoo 400ms 9% traffic 20
  27. 27. / @hpoom Medium medium.com Less is Less Gov UK www.gov.uk/transformation 21
  28. 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/kj1Dm722
  29. 29. / @hpoom CSS Pre-compilers 23
  30. 30. / @hpoom Javascript Proliferation 24
  31. 31. / @hpoom good tooling 25
  32. 32. / @hpoom client side Widgets 26
  33. 33. @hpoom Static Site Generators 27
  34. 34. / @hpoom History of SSG 28
  35. 35. / @hpoom History of SSG Moveable Type 13 years old 28
  36. 36. / @hpoom History of SSG nanoc 7 years old Moveable Type 13 years old 28
  37. 37. / @hpoom History of SSG nanoc 7 years old jekyll 6 years old Moveable Type 13 years old 28
  38. 38. @hpoom Example SSG Built Sites 29
  39. 39. / @hpoom Zurb Foundation assemble foundation.zurb.com 30
  40. 40. / @hpoom Mozilla WebFWD Stacey webfwd.org 31
  41. 41. / @hpoom GitHub Training Jekyll training.github.com 32
  42. 42. / @hpoom staticsitegenerators.net 287 33
  43. 43. / @hpoom staticsitegenerators.net 287 33
  44. 44. / @hpoom@hpoom 34
  45. 45. / @hpoom Lots of choice assemble Cactus DocPad Dropplets Hexo Hugo Hyde Jekyll metalsmith Middleman Octopress Pelican Stacey Wintersmith GO JavaScript PHP Python Ruby 35
  46. 46. @hpoom Content Templates Sass HTML CSS Publish 36
  47. 47. @hpoom Markdown 37
  48. 48. / @hpoom Markdown is the future "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 38
  49. 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/7uELQN39
  50. 50. / @hpoom content is versioned 40
  51. 51. / @hpoom Web Editor dillinger.io Markdown Tools Mac Editor mouapp.com Books gitbook.io 41
  52. 52. @hpoom FRONT MATTER 42
  53. 53. @hpoom --- layout: post title: Bloggling like a pro tags: ['baby', 'startup', 'prediction'] created: '2014-03-17T22:24:18+00:00' --- *content goes here* 43
  54. 54. @hpoom Templates 44
  55. 55. @hpoom <!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> </head> <body> {{content}} </body> </html> 45
  56. 56. / @hpoom Template Engines Eco Haml Handlebars Jade Mustache Twig CoffeeScript JavaScript PHP Ruby 46
  57. 57. @hpoom Pre-compilers and tooling 47
  58. 58. @hpoom Hosting 48
  59. 59. / @hpoom GitHub Pages 49
  60. 60. / @hpoom AWS S3 50
  61. 61. / @hpoom BitBalloon 51
  62. 62. @hpoom Why so many? 52
  63. 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, worldn");" by isipeoria. Licensed under Creative Commons.- https://flic.kr/p/bcgZ5g53
  64. 64. @hpoom ROLL YOUR OWN SSG 54
  65. 65. @hpoom Terminal driven 55
  66. 66. @hpoom Flat File CMS 56
  67. 67. @hpoom Example Flat FILE CMS Sites 57
  68. 68. / @hpoom asana statamic asana.com 58
  69. 69. / @hpoom World Backup Day Kirby worldbackupday.com 59
  70. 70. / @hpoom Some Flat File CMS Kirby statamic Pico Stacey Cockpit Monstra razorCMS 60
  71. 71. / @hpoom statamic 61
  72. 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/dYKSNz62
  73. 73. @hpoom Dynamic Elements with Javascript 63
  74. 74. / @hpoom My blog needs comments 64
  75. 75. / @hpoom My blog needs comments 64
  76. 76. / @hpoom My blog needs comments 64
  77. 77. / @hpoom My blog needs comments 64
  78. 78. / @hpoom Bells & whistles 65
  79. 79. / @hpoom Bells & whistles Surveys 65
  80. 80. / @hpoom Bells & whistles Surveys Video 65
  81. 81. / @hpoom Bells & whistles Surveys Video Charts 65
  82. 82. / @hpoom Client side JS can do a lot Web Sockets WebRTC Canvas WebGL Local Storage Animation Video Audio Shadow DOM 66
  83. 83. @hpoom Summary 67
  84. 84. @hpoom Where it is not Suitable 68
  85. 85. @hpoom Not non-tech accessible 69
  86. 86. @hpoom not a solution to everything 70
  87. 87. @hpoom Requires a Rethink 71
  88. 88. @hpoom Other options 72
  89. 89. / @hpoom I can’t change my CMS 73
  90. 90. / @hpoom Boost I can’t change my CMS 73
  91. 91. / @hpoom Boost WP-Super Cache I can’t change my CMS 73
  92. 92. / @hpoom Boost WP-Super Cache I can’t change my CMS Buster 73
  93. 93. / @hpoom Mixture mixture.io Alternatives Hammer hammerformac.com Cactus cactusformac.com 74
  94. 94. @hpoom All else fails then VARNISH 75
  95. 95. @hpoom The Benefits 76
  96. 96. @hpoom SPEED 77
  97. 97. @hpoom Security 78
  98. 98. @hpoom Simple Cheap Hosting 79
  99. 99. @hpoom Revision Control 80
  100. 100. @hpoom Portability 81
  101. 101. @hpoom SIMPLICITY 82
  102. 102. @hpoom Generate once 83
  103. 103. @hpoom Thank youplease contact me if you have any questions Twitter: @hpoom Links: http://bit.ly/LW-July logo By Simon Wood London Web - July 2014 84

×