That Conference 2017 – The Static Web Revolution

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


  • 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?

  • 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

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


  • 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)


  • 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,
  • See

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

The Static Web Revolution

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

One thought on “That Conference 2017 – The Static Web Revolution

  1. Pingback: The Wild and Wonderful World of Static HTML Site Generators | david kennell

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s