Going back to static HTML sites - lumolink.com...using site: operator Google CSE AddSearch DYI...
Transcript of Going back to static HTML sites - lumolink.com...using site: operator Google CSE AddSearch DYI...
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