SlideShare a Scribd company logo
@hpoom
Static Sites Can
be the Solution
By 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 Site
Generators
What I am going to cover
5
/
@hpoom
Dynamic sites
don’t work
Static Site
Generators
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 2013
Wikipedia
"WordPress Pencil and Pins-07" by Christopher Ross. Licensed under Creative Commons.- https://flic.kr/p/a688WQ9
@hpoom
Databases
don’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
WYSIWYG
FAIL
14
/
@hpoom
Problems with CMS
15
/
@hpoom
Problems with CMS
Security
15
/
@hpoom
Problems with CMS
PortabilitySecurity
15
/
@hpoom
Problems with CMS
Portability ReliabilitySecurity
15
@hpoom
The web has
Evolved
16
@hpoom
Site Speed
is important
17
/
@hpoom
500ms
Google
20%
revenue 18
/
@hpoom
Amazon
100ms 1%
revenue 19
/
@hpoom
Yahoo
400ms 9%
traffic 20
/
@hpoom
Medium
medium.com
Less is Less
Gov UK
www.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 Site
Generators
27
/
@hpoom
History of SSG
28
/
@hpoom
History of SSG
Moveable Type
13 years old
28
/
@hpoom
History of SSG
nanoc
7 years old
Moveable Type
13 years old
28
/
@hpoom
History of SSG
nanoc
7 years old
jekyll
6 years old
Moveable Type
13 years old
28
@hpoom
Example
SSG Built Sites
29
/
@hpoom
Zurb Foundation assemble
foundation.zurb.com
30
/
@hpoom
Mozilla WebFWD Stacey
webfwd.org
31
/
@hpoom
GitHub Training Jekyll
training.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 Editor
dillinger.io
Markdown Tools
Mac Editor
mouapp.com
Books
gitbook.io
41
@hpoom
FRONT MATTER
42
@hpoom
---
layout: post
title: Bloggling like a pro
tags: ['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 Haml
Handlebars Jade
Mustache Twig
CoffeeScript JavaScript PHP Ruby
46
@hpoom
Pre-compilers
and tooling
47
@hpoom
Hosting
48
/
@hpoom
GitHub Pages
49
/
@hpoom
AWS S3
50
/
@hpoom
BitBalloon
51
@hpoom
Why so
many?
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, worldn");" by isipeoria. Licensed under Creative Commons.- https://flic.kr/p/bcgZ5g53
@hpoom
ROLL YOUR
OWN SSG
54
@hpoom
Terminal
driven
55
@hpoom
Flat File
CMS
56
@hpoom
Example Flat
FILE CMS Sites
57
/
@hpoom
asana statamic
asana.com
58
/
@hpoom
World Backup Day Kirby
worldbackupday.com
59
/
@hpoom
Some Flat File CMS
Kirby statamic
Pico Stacey Cockpit
Monstra razorCMS
60
/
@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 Shoaf
http://bit.ly/FlatCMS
"P1040010" by Mike Linksvayer. Licensed under Creative Commons.- https://flic.kr/p/dYKSNz62
@hpoom
Dynamic Elements
with 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
Surveys
65
/
@hpoom
Bells & whistles
Surveys Video
65
/
@hpoom
Bells & whistles
Surveys Video Charts
65
/
@hpoom
Client side JS can do a lot
Web Sockets WebRTC Canvas
WebGL Local Storage
Animation Video Audio Shadow DOM
66
@hpoom
Summary
67
@hpoom
Where it is
not Suitable
68
@hpoom
Not non-tech
accessible
69
@hpoom
not a solution
to everything
70
@hpoom
Requires
a Rethink
71
@hpoom
Other
options
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
Buster
73
/
@hpoom
Mixture
mixture.io
Alternatives
Hammer
hammerformac.com
Cactus
cactusformac.com
74
@hpoom
All else fails
then VARNISH
75
@hpoom
The Benefits
76
@hpoom
SPEED
77
@hpoom
Security
78
@hpoom
Simple Cheap
Hosting
79
@hpoom
Revision
Control
80
@hpoom
Portability
81
@hpoom
SIMPLICITY
82
@hpoom
Generate
once 83
@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

More Related Content

PPTX
Web scraping 101 with goutte
KEY
Ruby - Behind the Scenes
PDF
PPTX
Put the romance back into rome
ODP
Polyglot polywhat polywhy
PDF
Structuring Data from Unstructured Things. Sean Lorenz
PDF
Exploring Open Date with BigQuery: Jenny Tong
Web scraping 101 with goutte
Ruby - Behind the Scenes
Put the romance back into rome
Polyglot polywhat polywhy
Structuring Data from Unstructured Things. Sean Lorenz
Exploring Open Date with BigQuery: Jenny Tong

Viewers also liked (19)

PDF
SMX 2010 Summary of Hot Topics from SEO Track
PDF
Holiday Extras
ODP
Apache Cordova, Hybrid Application Development
PDF
Presentation Hassle Free Anna
PDF
Osservatorio congressuale Torino 2014 2015
PDF
How to set your ADI business profile
PDF
Surviving the enterprise storm - @RianVDM
PDF
Break away old
PDF
Role of Cognitive Analytics in a era of Industry 4.0
PPT
Online Presence
PDF
BreakAway
PDF
Design+Startup 2013
PPT
Hotleads:upsell
PDF
Get to know Holiday Extras 2011
PDF
How to get started with Roadio in under 60 seconds
KEY
Access to iDevices
PDF
Cinematic UX, Brad Weaver
PDF
Scottish Communicators Network - 22 October 2014 - People Make Glasgow
PDF
How to manage your payments
SMX 2010 Summary of Hot Topics from SEO Track
Holiday Extras
Apache Cordova, Hybrid Application Development
Presentation Hassle Free Anna
Osservatorio congressuale Torino 2014 2015
How to set your ADI business profile
Surviving the enterprise storm - @RianVDM
Break away old
Role of Cognitive Analytics in a era of Industry 4.0
Online Presence
BreakAway
Design+Startup 2013
Hotleads:upsell
Get to know Holiday Extras 2011
How to get started with Roadio in under 60 seconds
Access to iDevices
Cinematic UX, Brad Weaver
Scottish Communicators Network - 22 October 2014 - People Make Glasgow
How to manage your payments
Ad

Similar to Static Sites Can be the Solution (Simon Wood) (20)

PPTX
Three site speed optimisation tips to make your website REALLY fast - Brighto...
PDF
International Site Speed Tweaks - ISS 2017 Barcelona
PDF
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
PPTX
improve website performance
PDF
Using VIM for PHP/Symfony development
PDF
Building Web Mobile App that don’t suck - FITC Web Unleashed - 2014-09-18
PDF
InterPlanetary Wayback: Peer-To-Peer Permanence of Web Archives
PDF
The latest in site speed: advanced #webperf 2018
PDF
Let's go HTTPS-only! - More Than Buying a Certificate
ODP
A Holistic View of Website Performance
PDF
Pragmatic Hypermedia REST APIs
PDF
Fluent 2018: Tracking Performance of the Web with HTTP Archive
PDF
15年前に作ったアプリを現在に蘇らせてみた話
PDF
Angular js活用事例:filydoc
PPT
Microformats
PDF
Guideline paper@rpi full_stack_python_arch
PDF
Basic docker for developer
PDF
Migration Best Practices - SMX West 2019
PDF
Tracing python applications
PPTX
High-Speed HTML5
Three site speed optimisation tips to make your website REALLY fast - Brighto...
International Site Speed Tweaks - ISS 2017 Barcelona
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
improve website performance
Using VIM for PHP/Symfony development
Building Web Mobile App that don’t suck - FITC Web Unleashed - 2014-09-18
InterPlanetary Wayback: Peer-To-Peer Permanence of Web Archives
The latest in site speed: advanced #webperf 2018
Let's go HTTPS-only! - More Than Buying a Certificate
A Holistic View of Website Performance
Pragmatic Hypermedia REST APIs
Fluent 2018: Tracking Performance of the Web with HTTP Archive
15年前に作ったアプリを現在に蘇らせてみた話
Angular js活用事例:filydoc
Microformats
Guideline paper@rpi full_stack_python_arch
Basic docker for developer
Migration Best Practices - SMX West 2019
Tracing python applications
High-Speed HTML5
Ad

More from Future Insights (20)

PDF
The Human Body in the IoT. Tim Cannon + Ryan O'Shea
PDF
Pretty pictures - Brandon Satrom
PDF
Putting real time into practice - Saul Diez-Guerra
PDF
A Universal Theory of Everything, Christopher Murphy
PDF
Horizon Interactive Awards, Mike Sauce & Jeff Jahn
PDF
Reading Your Users’ Minds: Empiricism, Design, and Human Behavior, Shane F. B...
PDF
Front End Development Transformation at Scale, Damon Deaner
PDF
The Future is Modular, Jonathan Snook
PDF
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
PDF
Accessibility Is More Than What Lies In The Code, Jennison Asuncion
PDF
Sunny with a Chance of Innovation: A How-To for Product Managers and Designer...
PDF
Designing for Dyslexia, Andrew Zusman
PDF
Beyond Measure, Erika Hall
PDF
Real Artists Ship, Haraldur Thorleifsson
PDF
Ok Computer. Peter Gasston
PDF
Digital Manuscripts Toolkit, using IIIF and JavaScript. Monica Messaggi Kaya
PPTX
How to Build Your Future in the Internet of Things Economy. Jennifer Riggins
PDF
The Wordpress Game Changer. Jenny Wong
PDF
A behind the-scenes look at cross-browser testing with web driver, Adrian Bat...
PDF
Angular Performance: Then, Now and the Future. Todd Motto
The Human Body in the IoT. Tim Cannon + Ryan O'Shea
Pretty pictures - Brandon Satrom
Putting real time into practice - Saul Diez-Guerra
A Universal Theory of Everything, Christopher Murphy
Horizon Interactive Awards, Mike Sauce & Jeff Jahn
Reading Your Users’ Minds: Empiricism, Design, and Human Behavior, Shane F. B...
Front End Development Transformation at Scale, Damon Deaner
The Future is Modular, Jonathan Snook
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Accessibility Is More Than What Lies In The Code, Jennison Asuncion
Sunny with a Chance of Innovation: A How-To for Product Managers and Designer...
Designing for Dyslexia, Andrew Zusman
Beyond Measure, Erika Hall
Real Artists Ship, Haraldur Thorleifsson
Ok Computer. Peter Gasston
Digital Manuscripts Toolkit, using IIIF and JavaScript. Monica Messaggi Kaya
How to Build Your Future in the Internet of Things Economy. Jennifer Riggins
The Wordpress Game Changer. Jenny Wong
A behind the-scenes look at cross-browser testing with web driver, Adrian Bat...
Angular Performance: Then, Now and the Future. Todd Motto

Static Sites Can be the Solution (Simon Wood)