+ All Categories
Home > Technology > Going Back to Static HTML Sites - SEMPRO 2017

Going Back to Static HTML Sites - SEMPRO 2017

Date post: 28-Jan-2018
Category:
Upload: lumolink
View: 595 times
Download: 0 times
Share this document with a friend
43
Going back to static HTML sites Artem Daniliants / LumoLink S E M P R O / U K R A I N E
Transcript
Page 1: Going Back to Static HTML Sites - SEMPRO 2017

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

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

LumoLink

2010 420 3

FoundedIn

Offices in the world

Peoplepersonnel

Languageproficiency

Page 4: Going Back to Static HTML Sites - SEMPRO 2017

Google AdWords& Yandex DirectCertified Partner

Page 5: Going Back to Static HTML Sites - SEMPRO 2017

Finland

Russia

Estonia

UkraineOulu and Helsinki

Saint-Peterburg

Tallinn

Kharkiv

We’re global

Page 6: Going Back to Static HTML Sites - SEMPRO 2017

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

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

What is a static site?

HTTP Request

HTTP Response

Page 9: Going Back to Static HTML Sites - SEMPRO 2017

All websites were static once...

Page 10: Going Back to Static HTML Sites - SEMPRO 2017

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

Era of content management systems (CMS)

Page 12: Going Back to Static HTML Sites - SEMPRO 2017

CMS-powered websites are dynamic

HTTP Request Server-side processing

HTTP Response

Page 13: Going Back to Static HTML Sites - SEMPRO 2017

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

ComplexityHard to scale

Page 15: Going Back to Static HTML Sites - SEMPRO 2017

ComplexitySecurity vulnerabilities

Page 16: Going Back to Static HTML Sites - SEMPRO 2017

ComplexityTime-consuming maintenance

Page 17: Going Back to Static HTML Sites - SEMPRO 2017

Static websites are coming back big time

Page 18: Going Back to Static HTML Sites - SEMPRO 2017

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

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

What are good static sites made of?

Page 21: Going Back to Static HTML Sites - SEMPRO 2017

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

Version controlBitbucket allows unlimited private repositories for small teams

Page 23: Going Back to Static HTML Sites - SEMPRO 2017

Hosting

Page 24: Going Back to Static HTML Sites - SEMPRO 2017

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

Static sites can have dynamic functionality

Page 26: Going Back to Static HTML Sites - SEMPRO 2017

Site search

Page 27: Going Back to Static HTML Sites - SEMPRO 2017

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

Static websites can also have webshops

Page 30: Going Back to Static HTML Sites - SEMPRO 2017

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

Forms

Page 32: Going Back to Static HTML Sites - SEMPRO 2017

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

When in doubt, use CloudFlare or Netlify

Content delivery networks

Page 34: Going Back to Static HTML Sites - SEMPRO 2017

Secure Sockets Layer (SSL)

CloudFlare and Netlify provide free SSL

Page 35: Going Back to Static HTML Sites - SEMPRO 2017

Prerendering for search engines

Learn more about prerendering

Page 36: Going Back to Static HTML Sites - SEMPRO 2017

Static sites can be easy to manage

Page 37: Going Back to Static HTML Sites - SEMPRO 2017

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

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

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

The future of the webJAMstack

Page 41: Going Back to Static HTML Sites - SEMPRO 2017

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

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


Recommended