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

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

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

Static Site Generators

Automating in advance

Static Site Generators

Web pages are files again

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

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

• 👍 Very mature: lots of resources
• 👍 Simpler syntax and organization
• 👎 Managing Ruby versions can be a hassle
• 👎 Builds can be slow

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

Framework Friends

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

The Vueties:

Docs Specialists

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

Docs Specialists

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

Powerful markup:

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

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