static sites can be the solution (simon wood)
DESCRIPTION
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."TRANSCRIPT
@hpoom
Static Sites Can be the SolutionBy Simon Wood London Web - July 2014
1
/
@hpoom
About me
Head of Technology and Innovation
Holiday Extras
Simon Wood
2
/
@hpoom
Holiday Extras
3
/
@hpoom@hpoom 4
/
@hpoom
What I am going to cover
5
/
@hpoom
Dynamic sites don’t work
What I am going to cover
5
/
@hpoom
Dynamic sites don’t work
Static SiteGenerators
What I am going to cover
5
/
@hpoom
Dynamic sites don’t work
Static SiteGenerators
Flat file CMS
What I am going to cover
5
/
@hpoom
Static does not mean static
Static Site != Static Content
6
/
@hpoom
Static does not mean static
Static Site == Static Architecture
7
@hpoom
Things are not working now
8
”
@hpoom
WordPress is used by more than 22%
of the top 10 million websites as of
August 2013Wikipedia
"WordPress Pencil and Pins-07" by Christopher Ross. Licensed under Creative Commons.- https://flic.kr/p/a688WQ9
@hpoom
Databasesdon’t scale
10
@hpoom
cache Queries
11
@hpoom
Front Side Cache
12
”
@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
@hpoom
WYSIWYGFAIL
14
/
@hpoom
Problems with CMS
15
/
@hpoom
Problems with CMS
Security15
/
@hpoom
Problems with CMS
PortabilitySecurity15
/
@hpoom
Problems with CMS
Portability ReliabilitySecurity15
@hpoom
The web hasEvolved
16
@hpoom
Site Speedis important
17
/
@hpoom
500ms
20%revenue
18
/
@hpoom
Amazon
100ms 1%revenue
19
/
@hpoom
Yahoo
400ms 9%traffic
20
/
@hpoom
Medium medium.com
Less is Less
Gov UKwww.gov.uk/transformation 21
”
@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
/
@hpoom
CSS Pre-compilers
23
/
@hpoom
Javascript Proliferation
24
/
@hpoom
good tooling
25
/
@hpoom
client side Widgets
26
@hpoom
Static SiteGenerators
27
/
@hpoom
History of SSG
28
/
@hpoom
History of SSG
Moveable Type13 years old
28
/
@hpoom
History of SSG
nanoc7 years old
Moveable Type13 years old
28
/
@hpoom
History of SSG
nanoc7 years old
jekyll6 years old
Moveable Type13 years old
28
@hpoom
ExampleSSG Built Sites
29
/
@hpoom
Zurb Foundation assemblefoundation.zurb.com
30
/
@hpoom
Mozilla WebFWD Staceywebfwd.org
31
/
@hpoom
GitHub Training Jekylltraining.github.com
32
/
@hpoom
staticsitegenerators.net 287
33
/
@hpoom
staticsitegenerators.net 287
33
/
@hpoom@hpoom 34
/
@hpoom
Lots of choice
assemble Cactus DocPad Dropplets
Hexo Hugo Hyde Jekyll metalsmith Middleman Octopress
Pelican Stacey Wintersmith
GO JavaScript PHP Python Ruby
35
@hpoom
Content
Templates
Sass
HTML
CSS
Publish
36
@hpoom
Markdown
37
/
@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
”
@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
/
@hpoom
content is versioned
40
/
@hpoom
Web Editordillinger.io
Markdown Tools
Mac Editormouapp.com
Booksgitbook.io
41
@hpoom
FRONT MATTER
42
@hpoom
---layout: posttitle: Bloggling like a protags: ['baby', 'startup', 'prediction']created: '2014-03-17T22:24:18+00:00'---
*content goes here*
43
@hpoom
Templates
44
@hpoom
<!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> </head> <body> {{content}} </body> </html>
45
/
@hpoom
Template Engines
Eco HamlHandlebars JadeMustache Twig
CoffeeScript JavaScript PHP Ruby
46
@hpoom
Pre-compilersand tooling
47
@hpoom
Hosting
48
/
@hpoom
GitHub Pages
49
/
@hpoom
AWS S3
50
/
@hpoom
BitBalloon
51
@hpoom
Why somany?
52
”
@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/bcgZ5g53
@hpoom
ROLL YOUROWN SSG
54
@hpoom
Terminaldriven
55
@hpoom
Flat FileCMS
56
@hpoom
Example FlatFILE CMS Sites
57
/
@hpoom
asana statamicasana.com
58
/
@hpoom
World Backup Day Kirbyworldbackupday.com
59
/
@hpoom
Some Flat File CMS
Kirby statamicPico Stacey Cockpit
Monstra razorCMS60
/
@hpoom
statamic
61
”
@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 Shoafhttp://bit.ly/FlatCMS
"P1040010" by Mike Linksvayer. Licensed under Creative Commons.- https://flic.kr/p/dYKSNz62
@hpoom
Dynamic Elementswith Javascript
63
/
@hpoom
My blog needs comments
64
/
@hpoom
My blog needs comments
64
/
@hpoom
My blog needs comments
64
/
@hpoom
My blog needs comments
64
/
@hpoom
Bells & whistles
65
/
@hpoom
Bells & whistles
Surveys65
/
@hpoom
Bells & whistles
Surveys Video65
/
@hpoom
Bells & whistles
Surveys Video Charts65
/
@hpoom
Client side JS can do a lot
Web Sockets WebRTC Canvas WebGL Local Storage
Animation Video Audio Shadow DOM66
@hpoom
Summary
67
@hpoom
Where it isnot Suitable
68
@hpoom
Not non-tech accessible
69
@hpoom
not a solution to everything
70
@hpoom
Requiresa Rethink
71
@hpoom
Otheroptions
72
/
@hpoom
I can’t change my CMS
73
/
@hpoom
Boost
I can’t change my CMS
73
/
@hpoom
Boost WP-Super Cache
I can’t change my CMS
73
/
@hpoom
Boost WP-Super Cache
I can’t change my CMS
Buster73
/
@hpoom
Mixturemixture.io
Alternatives
Hammerhammerformac.com
Cactuscactusformac.com
74
@hpoom
All else fails then VARNISH
75
@hpoom
The Benefits
76
@hpoom
SPEED
77
@hpoom
Security
78
@hpoom
Simple CheapHosting
79
@hpoom
RevisionControl
80
@hpoom
Portability
81
@hpoom
SIMPLICITY
82
@hpoom
Generate
once83
@hpoom
Thank youplease contact me if you have any questions
Twitter: @hpoomLinks: http://bit.ly/LW-July
logo
By Simon Wood London Web - July 2014
84