Getting into the JAMstack with
Static Site Generators

Jessica Parsons

@verythorough

 

slides.com/verythorough/jamstack-ssg

Shared notepad on Dropbox

Welcome!

Be sure you have:

  • A terminal program with Git (Windows users, install Git for Windows)
  • Node version 10+ (Run node -v in your terminal to check.)
     

Meet your neighbor and find out:

  • What tools/processes they use to build websites now
  • What they would like to learn today

What we'll cover

  • How we got here, and why "here" is good!
     
  • How to choose a site generator
     
  • How to make your own generated site
     
  • How to manage content with a CMS
     
  • How to add dynamic features like forms, comments, and internationalization

A Little History

Web pages as files

Simple Static Sites

request "cats.html"

Web pages as files

Simple Static Sites

  • Pros: pretty fast & secure, very simple
  • Cons: repetitive to build

Web pages as files

Simple Static Sites

Templates & Databases

Let the computer do the work

request "cats.php"

get template

query database

fill content

Templates & Databases

Let the computer do the work

  • Pros: quicker to build and change
  • Cons: slower, less secure, more complex

Templates & Databases

Let the computer do the work

Single-Page Apps (SPAs)

The browser as app server

  • Pros: less time between pages
  • Cons: slow first load; more work for client

Static Site Generators to the Rescue!

Static Site Generators

Automating in advance

(or database)

Static Site Generators

Automating in advance

Static Site Generators

Web pages are files again

request "cats.html"

Static Site Generators

The best of both worlds

(in many cases)

Pros:

  • fast, secure, scalable on CDN (often for free)
  • computer still does the repetitive work
  • can still use JavaScript for between-page loads

Cons:

  • JAMstack ecosystem not as mature (yet)

Weighing

the Options

Primary Considerations

  • Familiarity of languages & tools used
  • Availability/quality of docs & resources
  • Features vs complexity
  • Specialization (blogs, docs, etc.)
  • Speed: to develop, build, load

Traditional Builders

Jekyll
  • 👍 Very mature: lots of resources
  • 👍 Simpler syntax and organization
  • 👎 Managing Ruby versions can be a hassle
  • 👎 Builds can be slow
Hugo
  • 👍 Fast builds
  • 👍 Dependency-free installation
  • 👍 Broad ecosystem and features
  • 👎 Unusual template syntax
  • 👎 Can be complex, and docs can be limited

Traditional Builders

Honorable mentions:

  • Hexo: Built with Node; very popular in China
     
  • Metalsmith: Plugin architecture for maximum flexibility
     
  • Middleman: Built for Rubyists
     
  • Sculpin: A PHP Symfony

Framework Friends

  • 👍 SPA capabilities out of the box
  • 👎 Client-side JS can add unnecessary weight
  • 👍👎 Framework-dependent architecture

The Reactors:

Gatsby
Next.js

part-time generator

venture-backed JAMstack

React Static

built for simplicity

Framework Friends

  • 👍 SPA capabilities out of the box
  • 👎 Client-side JS can add unnecessary weight
  • 👍👎 Framework-dependent architecture

The Vueties:

Nuxt
Gridsome

more like Gatsby

more like Next

Docs Specialists

Plug and play:

More flexible

React on Rails

Vue Press
Docusaurus
  • 👍 Focused capabilities reduce complexity
  • 👎 Can be less flexible

Docs Specialists

  • 👍 Focused capabilities reduce complexity
  • 👎 Can be less flexible

Powerful markup:

Asciidoc

reStructuredText

Asciidoctor
Sphinx

And so many more...

StaticGen.com

How to evaluate

 

  • Browse the docs
  • Search for tutorials and reviews
  • Search for themes or starters
  • Explore the files in a sample project
  • Try it out!

Our Choice Today

Eleventy
  • 👍 Low risk of tech failure
  • 👍 Simple, flexible templating
  • 👍 Lightweight
  • 👍 Popular for personal projects
  • 👎 Limited docs with no search
  • 👎 Minimal built-in tooling
  • 👎 Not really used "at scale"

(aka Eleventy)

Let's get started!

Sample site:

https://static-sample.netlify.com/

 

Repo:

https://github.com/verythorough/eleventy-sustained