HTML

That Conference 2017 – The Static Web Revolution

Posted by

1

That Conference 2017, Kalahari Resort, Lake Delton, WI
The Static Web Revolution – Steven Hicks

Day 2, 8 Aug 2017

Disclaimer: This post contains my own thoughts and notes based on attending That Conference 2017 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of the speakers.

Executive Summary

  • Lots of good reasons to publish static web site, rather than dynamic
  • Need to select a Static Site Generator
  • Lots of tools to choose from, but there are tradeoffs


History of the Web

  • “Before” time
    • 1997 – static HTML
    • Scrolling / blinking
    • Hard to maintain static files
  • Dynamic back-ends
    • PHP, ASP
    • ASP.NET, Rails, Node
  • CMS on top of frameworks
    • WordPress, Drupal
    • Marketing guys could now manage the actual content
  • Bootstrap
    • Everything based on Bootstrap
    • Tons of stuff is based on WordPress


How did we get here?

  • Bootstrap & CMS for all content
  • “Simple enough for anyone to use”
  • “Any other way would be a maintenance nightmare”


A Hero Rises

  • “Are we using the right tool”?
  • “Is your content truly dynamic”?
  • “How often does your content change”?
  • “Is a dynamic site worth the cost of support?”


Surprising Numbers

  • 28% of sites on Internet run on WordPress
  • 70% of WordPress installs are vulnerable
  • 20% of top WordPress plug-ins are vulnerable


Goals

  • Compelling alternative to traditional dynamic website


Dynamic Website

  • Content in database
  • HTML generated when user requests it
  • Content managed with CMS
  • Admin tool to administer stuff, add new content, etc.
    • Can be in CMS
  • Magic happens between database and CMS
    • Convert data to HTML
    • Happens for every user


Static Website

  • Static files
  • Generated when content changes
  • User request–return static HTML
  • Static site generator–generates the HTML
  • The magic happens less frequently, when content changes


Why Go Static

  • Speed – static HTML is faster
    • CDN ready
  • Security
    • Fewer moving parts that can be attacked
  • Simplicity
    • Fewer points of failure
    • Don’t worry about database, caching, etc.
  • Scalability
    • Static is easier to scale out
  • Source Control
    • Just store content in CM
    • Rather than database data, which doesn’t automatically track history


How Do I Get Started?

  • Static Site Generator
    • Command-line tool
    • Flat files as input
    • Output is complete website of static HTML


How Do I Customize?

  • CSS/SASS
  • Themes (if you’re lucky)
    • Not a ton of support for it, though


How Do I Write Content?

  • Header & Nav don’t change (Template)
  • Content


Templates – EJS

  • Inject stuff like title, conten


Templates – Other

  • Handlebars
  • Pug (Jade)


Writing Content

  • Text editor, markdown
  • Add metadata
    • Depends
    • FrontMatter – e.g. keyword/values in +++ section
    • Separate files


Choosing a Generator

  • Staticgen.com
  • 200+ different generators
  • Potential criteria
    • Engine language
    • Templating language
    • Simplicity vs. Customization
    • Extensibility
    • Frontmatter Support


Suggestions

  • Jekyll
    • Pro: Support, themes, features
    • Cons: Difficult setup, bad support for Windows
  • Hugo
    • Pros: Fast, Support, Themes
    • Cons: No extensibility
  • Harp
    • Pros: Simple
    • Cons: No extensibility, no frontmatter
  • Gatsby/Phenomic
    • Pros: React, PWA, Momentum
    • Cons: React, Young (you might not like React)


How Do I Host?

  • Existing infrastructure – drop the files on the server
  • Amazon S3
  • Dropbox – public folder
  • Github Pages –
  • Dedicated Static Hosts (surge, Aerobatic)


Netlify

  • Features
    • Run builds
    • Free custom domains
    • Free SSL
    • Baked-in CDN
    • Free Pro upgrade for open source projects


When Should You Go Static?

  • Blogs
  • Online magazine (large site)
  • Portfolios
  • Brochures
  • Docs
  • Style Guides
  • Events


JAM Stack

  • JavaScript
  • APIs
  • Markup


JAM Stack Examples

  • Forms – Google Forms, TypeOne
  • Commerce – SnipCart
  • Site Search – Lunar.js
  • User Data – Firebase – offload user data to somebody else
  • Serverless – functions as a service – Azure Functions, Lambda Services, serverless.com
  • See theNewDynamic.org/tools


Supporting Content Authors

  • Need visual authoring tool for content generators (non-technical)
  • Text Editor
  • Headless CMS – CMS as a service
    • Without headless CMS – .git repo feeds generator
    • With headless CMS – feed static generator from headless CMS in cloud
  • Contentful – still have to write markdown
  • Netlify CMS
    • Integrates with .git
    • Drop something in your repository
    • Uses GitHub authentication to log into CMS (admin page)
    • Content saved to your repository
    • Integrates nicely with Netlify
  • headlessCMS.org


The Static Web Revolution

  • New way – more modular, smaller tools that each does a different thing