1. 1. Going back to static HTML sites Artem Daniliants / LumoLink S E M P R O / U K R A I N E
  2. 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. 3. LumoLink 2010 4 20 3 Founded In Offices in the world People personnel Language proficiency
  4. 4. GoogleAdWords &YandexDirect CertifiedPartner
  5. 5. Finland Russia Estonia Ukraine Oulu and Helsinki Saint-Peterburg Tallinn Kharkiv Were global
  6. 6. Our services Digital Marketing Development AdWords Facebook YouTube LinkedIn Search engine optimisation Web development Mobile apps eCommerce
  7. 7. Agenda Static site basics Disadvantages of content management systems Making a good static site JAMstack
  8. 8. What is a static site? HTTP Request HTTP Response
  9. 9. All websites were static once...
  10. 10. CNN Year in Review website from 1996 Loads in under 30 ms Page size: 74 kB 22 requests Website Speed test
  11. 11. Era of content management systems (CMS)
  12. 12. CMS-powered websites are dynamic HTTP Request Server-side processing HTTP Response
  13. 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. 14. Complexity Hard to scale
  15. 15. Complexity Security vulnerabilities
  16. 16. Complexity Time-consuming maintenance
  17. 17. Static websites are coming back bigtime
  18. 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. 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. 20. What are good static sites made of?
  21. 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. 22. Version control Bitbucket allows unlimited private repositories for small teams
  23. 23. Hosting
  24. 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 Any traditional hosting provider See other options
  25. 25. Static sites can have dynamic functionality
  26. 26. Site search
  27. 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. 28. Blog comments with Disqus
  29. 29. Static websites can also have webshops
  30. 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. 31. Forms
  32. 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. 33. When in doubt, use CloudFlare or Netlify Content delivery networks
  34. 34. Secure Sockets Layer (SSL) CloudFlare and Netlify provide free SSL
  35. 35. Prerendering for search engines Learn more about prerendering
  36. 36. Static sites can be easy to manage
  37. 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. 38. 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. 39. Allows editing and previewing Markdown files Only supports GitHub Free Only suitable for technical content editors Prose io See it in action
  40. 40. The future of the web JAMstack
  41. 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. 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. 43. Thank you! Connect with me on Twitter / LinkedIn / Email

Top Related