Презентация c конференции SEMPRO 2017 на тему "Going back to static html sites". Спикер: Artem Daniliants / Helsinki Компания: LumoSpark Сайт: https://www.lumospark.com/

1. Going back to static
HTML sites
Artem Daniliants / LumoSpark
S E M P R O / U K R A I N E

2. CEO
at LumoSpark
Static site
generators
evangelist
13+ years
experience in
web development
10+ years
experience in
search engine
optimization
Serial entrepreneur
with companies in
four countries

3. LumoSpark
2010 4
20 3
Founded
In
Offices
in the world
People
personnel
Language
proficiency

4. GoogleAdWords
&YandexDirect
CertifiedPartner

5. Finland
Russia
Estonia
Ukraine
Oulu and Helsinki
Saint-Peterburg
Tallinn
Kharkiv
We’re global

6. Our services
Digital Marketing Development
• AdWords
• Facebook
• YouTube
• LinkedIn
• Search engine optimisation
• Web development
• Mobile apps
• eCommerce

7. Agenda
° Static site basics
° Disadvantages of content
management systems
° Making a good
static site
° JAMstack

8. What is a static site?
HTTP Request
HTTP Response

9. All websites were
static once...

10. CNN Year in Review website
from 1996
Loads in under 30 ms
Page size: 74 kB
22 requests
Website
Speed test

11. Era of content
management systems
(CMS)

12. CMS-powered
websites are dynamic
HTTP Request Server-side processing
HTTP Response

13. Complexity
Typical Wordpress server stack for medium-sized
CMS installations
Webserver (Nginx)
Cache server (Varnish)
Object cache (Memcached)
Database server (MySQL)
Logic layer (PHP)
CMS (Wordpress)

14. Complexity
Hard to scale

15. Complexity
Security vulnerabilities

16. Complexity
Time-consuming
maintenance

17. Static websites are
coming back bigtime

18. Meet the Obama campaign’s
$250M fundraising platform
4,276,463 donations
81,548,259 pageviews
17,807,917 unique visitors
Static HTML pages generated
by Jekyll
Served by Akamai CDN
Hosted on Amazon S3
Version control with GitHub
Case study

19. Why?
Easier to develop
Easy to scale
Secure by default
Cheap to host
Quick to load
Application layer moving to the front-end

20. What are good
static sites
made of?

21. Staticsite
generator(SSG)
If you’re unsure, start with
Jekyll, Hugo or Hexo
See the most popular static site generators
Your
computer
The
interwebs
Content
Static Site Generator
Server
Browser
CSS HTML
Template

22. Version
control
Bitbucket allows
unlimited private
repositories for small
teams

23. Hosting

24. Options for hosting static files
Cloud file
storage
Static file
hosting
providers
Traditional
hosting
Examples
Amazon S3
Google Cloud Storage
Rackspace Cloud
Microsoft Azure
Examples
Netlify
Forge
GitHub
Surge.sh
Any traditional hosting
provider
See other options

25. Static sites can
have dynamic
functionality

26. Site search

27. Pros
+ Free
+ Quick to implement
Cons
– Not very user friendly
Pros
+ Starts at $100/year
+ Quick to implement
+ Works on any site
Cons
– Not very pretty
– Minimal customization
options
Pros
+ Starts at $29/month
+ Quick to implement
+ Very user friendly
+ Works on any site
Cons
– Can be expensive if
you add extra features
Pros
+ Free
+ Highly customizable
Cons
– Can be time consuming
to integrate
Google search
using site:
operator
Google
CSE
AddSearch DYI options
(e.g., Lunr and Bleve)
Search SaaS providers

28. Blog comments with
Disqus

29. Static websites
can also have
webshops

30. Pros
+ Free tier available
+ Supports many gateways
+ Products are managed over
at Ecwid
+ Supports many payment
methods
Cons
– Only partially multilingual
Pros
+ Developer oriented
+ Easy to customize
+ Multilingual
+ Products defined in SSG
+ SEO friendly
Cons
– High transaction fees
Pros
+ Leverage existing CMS
plugins
+ Separate subdomain for the
shop
Cons
– Brings back CMS-related
issues
Ecwid Snipcart Your old CMS
Shopping carts for your static site

31. Forms

32. See other options
Pros
+ Free to get started
+ Very easy to implement
Cons
– Limited functionality
Pros
+ Free
+ Easy to implement
Cons
– Minimal customization
options
Pros
+ Free to get started
+ Simple form designer
+ Allows payment
collection
+ Works on any site
Cons
– Limited functionality
Pros
+ Free to get started
+ Good usability
+ Supports integration
with Hugo
Cons
– Interactive forms could
be off-putting to some
Formspree
Google
Forms
Wufoo Typeform
Web forms SaaS providers

33. When in doubt, use CloudFlare or Netlify
Content delivery
networks

34. Secure Sockets Layer
(SSL)
CloudFlare and Netlify provide free SSL

35. Prerendering for
search engines
Learn more about prerendering

36. Static sites can be
easy to manage

37. Surreal CMS
Allows editing on almost any simple
static site
Easy to integrate
Offered as a white-label solution
Supports displaying Google Analytics
inside CMS
Supports versioning
Connects to any FTP/SFTP server
Costs $10/month for 1–5 websites
Surreal CMS
See it in action

38. Forestry.io
Commits editor’s changes back to
Git
Paid plans provide hosting
Supports publishing to Amazon
S3, FTP, SFTP, GitHub Pages
Free tier available
Suitable for advanced content
editors
Forestry io
See it in action

39. Prose.io
Allows editing and previewing
Markdown files
Only supports GitHub
Free
Only suitable for technical content
editors
Prose io
See it in action

40. The future of the web
JAMstack

41. Modern web development architecture based on client-side
JavaScript, reusable APIs, and prebuilt Markup
J
JavaScript
A
APIs
M
Markup
Any dynamic programming
during the request/response
cycle is handled by JavaScript,
which runs entirely on the client’s
side.This could be any front-end
framework, library, or even vanilla
JavaScript.
All server-side processes
or database actions are
abstracted into reusable APIs
and accessed over HTTP
with JavaScript.These can
be custom built, or they can
leverage third-party services.
Templated markup should
be pre-built at the time of
deployment, usually using a site
generator for content sites or a
build tool for web apps.
More info about JAMstack

42. Our JAMstack
All of this for $0/month for small websites
Managing content
Additional functionality
Interactivity and data
persistence
Server infrastructure
Generating the site
Forestry
Ember.js (interactivity)
Netlify (CI, SSL, CDN)
Hugo (static site generator)
Cloudant
GitHub
GULP JSlint SASS Bower
PouchDB
Formspree Lunr Migadu (email) Disqus
CouchDB

43. ŌuraRing
Fromdynamictostatic
$ 651 803 raised
on Kickstarter.
Selling all over
the world
Ring-sized wellness
computer that tracks
your sleep, activity, body
temperature and heart
rate
Raised over
2 million eurofrom
different investors

44. Wordpress
WooCommerce
Average loading time 3 - 5 seconds
Currentwebsite
Ōura Ring going static
Hosting and CDN by Netlify
SSL
Shop moved to subdomain
HTTP2
Average loading time 1 - 1,5 seconds
from anywhere in the world
Ourawebsite2.0VS
Case Study

45. Thank you!
Connect with me on
Twitter / LinkedIn / Email