going back to static html sites - sempro 2017
TRANSCRIPT
![Page 1: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/1.jpg)
Going back to staticHTML sites
Artem Daniliants / LumoLink
S E M P R O / U K R A I N E
![Page 2: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/2.jpg)
CEOat LumoLink
Static sitegeneratorsevangelist
13+ yearsexperience in
web development
10+ yearsexperience insearch engine optimization
Serial entrepreneurwith companies in
four countries
![Page 3: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/3.jpg)
LumoLink
2010 420 3
FoundedIn
Offices in the world
Peoplepersonnel
Languageproficiency
![Page 4: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/4.jpg)
Google AdWords& Yandex DirectCertified Partner
![Page 5: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/5.jpg)
Finland
Russia
Estonia
UkraineOulu and Helsinki
Saint-Peterburg
Tallinn
Kharkiv
We’re global
![Page 6: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/6.jpg)
Our servicesDigital Marketing Development • AdWords• Facebook• YouTube• LinkedIn• Search engine optimisation
• Web development• Mobile apps• eCommerce
![Page 7: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/7.jpg)
Agenda° Static site basics
° Disadvantages of content management systems
° Making a good static site
° JAMstack
![Page 8: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/8.jpg)
What is a static site?
HTTP Request
HTTP Response
![Page 9: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/9.jpg)
All websites were static once...
![Page 10: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/10.jpg)
CNN Year in Review websitefrom 1996
Loads in under 30 ms
Page size: 74 kB
22 requests
WebsiteSpeed test
![Page 11: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/11.jpg)
Era of content management systems (CMS)
![Page 12: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/12.jpg)
CMS-powered websites are dynamic
HTTP Request Server-side processing
HTTP Response
![Page 13: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/13.jpg)
ComplexityTypical Wordpress server stack for medium-sized CMS installations
Webserver (Nginx)Cache server (Varnish)Object cache (Memcached)Database server (MySQL)Logic layer (PHP)CMS (Wordpress)
![Page 14: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/14.jpg)
ComplexityHard to scale
![Page 15: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/15.jpg)
ComplexitySecurity vulnerabilities
![Page 16: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/16.jpg)
ComplexityTime-consuming maintenance
![Page 17: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/17.jpg)
Static websites are coming back big time
![Page 18: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/18.jpg)
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
![Page 19: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/19.jpg)
Why?Easier to developEasy to scaleSecure by defaultCheap to hostQuick to loadApplication layer moving to the front-end
![Page 20: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/20.jpg)
What are good static sites made of?
![Page 21: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/21.jpg)
Static site generator (SSG)
If you’re unsure, start with Jekyll, Hugo or Hexo
See the most popular static site generators
Your com
puterThe
interwebs
Content
Static Site Generator
Server
Browser
CSS HTML
Template
![Page 22: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/22.jpg)
Version controlBitbucket allows unlimited private repositories for small teams
![Page 23: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/23.jpg)
Hosting
![Page 24: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/24.jpg)
Options for hosting static files
Cloud filestorage
Static filehosting
providers
Traditionalhosting
Examples
Amazon S3
Google Cloud Storage
Rackspace Cloud
Microsoft Azure
Examples
Netlify
Forge
GitHub
Surge.sh
Any traditional hosting provider
See other options
![Page 25: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/25.jpg)
Static sites can have dynamic functionality
![Page 26: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/26.jpg)
Site search
![Page 27: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/27.jpg)
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
GoogleCSE AddSearch DYI options
(e.g., Lunr and Bleve)
Search SaaS providers
![Page 29: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/29.jpg)
Static websites can also have webshops
![Page 30: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/30.jpg)
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
![Page 31: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/31.jpg)
Forms
![Page 32: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/32.jpg)
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 GoogleForms Wufoo Typeform
Web forms SaaS providers
![Page 33: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/33.jpg)
When in doubt, use CloudFlare or Netlify
Content delivery networks
![Page 34: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/34.jpg)
Secure Sockets Layer (SSL)
CloudFlare and Netlify provide free SSL
![Page 35: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/35.jpg)
Prerendering for search engines
Learn more about prerendering
![Page 36: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/36.jpg)
Static sites can be easy to manage
![Page 37: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/37.jpg)
Surreal CMSAllows 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 CMSSee it in action
![Page 38: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/38.jpg)
Forestry.ioCommits 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 ioSee it in action
![Page 39: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/39.jpg)
Prose.ioAllows editing and previewing Markdown files
Only supports GitHub
Free
Only suitable for technical content editors
Prose ioSee it in action
![Page 40: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/40.jpg)
The future of the webJAMstack
![Page 41: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/41.jpg)
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup
JJavaScript
AAPIs
MMarkup
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
![Page 42: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/42.jpg)
Our JAMstack
All of this for $0/month for small websites
Managing content
Additional functionality
Interactivity and datapersistence
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
![Page 43: Going Back to Static HTML Sites - SEMPRO 2017](https://reader034.vdocument.in/reader034/viewer/2022051504/5a6d101c7f8b9a0a428b4b0d/html5/thumbnails/43.jpg)
Thank you!Connect with me on
Twitter / LinkedIn / Email