1. Going back to static HTML sites Artem Daniliants / LumoLink
S E M P R O / U K R A I N E
2. CEO at LumoLink 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. LumoLink 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 Were 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
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 campaigns $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 youre 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 15 websites Surreal CMS
See it in action
38. Forestry.io Commits editors 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 clients
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. Thank you! Connect with me on Twitter / LinkedIn /
Email
