Going back to staticHTML sites

Artem Daniliants / LumoLink

S E M P R O / U K R A I N E

CEOat LumoLink

Static sitegeneratorsevangelist

13+ yearsexperience in

web development

10+ yearsexperience insearch engine optimization

Serial entrepreneurwith companies in

four countries

LumoLink

2010 420 3

FoundedIn

Offices in the world

Peoplepersonnel

Languageproficiency

Google AdWords& Yandex DirectCertified Partner

Finland

Russia

Estonia

UkraineOulu and Helsinki

Saint-Peterburg

Tallinn

Kharkiv

We’re global

Our servicesDigital Marketing Development • AdWords• Facebook• YouTube• LinkedIn• Search engine optimisation

• Web development• Mobile apps• eCommerce

Agenda° Static site basics

° Disadvantages of content management systems

° Making a good static site

° JAMstack

What is a static site?

HTTP Request

HTTP Response

All websites were static once...

CNN Year in Review websitefrom 1996

Loads in under 30 ms

Page size: 74 kB

22 requests

WebsiteSpeed test

Era of content management systems (CMS)

CMS-powered websites are dynamic

HTTP Request Server-side processing

HTTP Response

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)

ComplexityHard to scale

ComplexitySecurity vulnerabilities

ComplexityTime-consuming maintenance

Static websites are coming back big time

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

Why?Easier to developEasy to scaleSecure by defaultCheap to hostQuick to loadApplication layer moving to the front-end

What are good static sites made of?

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

Version controlBitbucket allows unlimited private repositories for small teams

Hosting

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

Static sites can have dynamic functionality

Site search

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

Blog comments with Disqus

Static websites can also have webshops

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

Forms

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

When in doubt, use CloudFlare or Netlify

Content delivery networks

Secure Sockets Layer (SSL)

CloudFlare and Netlify provide free SSL

Prerendering for search engines

Learn more about prerendering

Static sites can be easy to manage

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

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

Prose.ioAllows editing and previewing Markdown files

Only supports GitHub

Free

Only suitable for technical content editors

Prose ioSee it in action

The future of the webJAMstack

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

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

Thank you!Connect with me on

Twitter / LinkedIn / Email