Comparing static site generators and how to onboard from a dynamic workflow

Slide 1

Slide 1 text

Dynamic to Static Onboarding to static site generation from a dynamic workﬂow @biilmann www.netlify.com

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

From Wordpress  to Static

Slide 4

Slide 4 text

What does Wordpress Do?

Slide 5

Slide 5 text

Powers 24% of the Internet Not Wordpress 76% Wordpress 24%

Slide 6

Slide 6 text

Blows up all the time! Vulnerable Installs 79% Secure Installs 21%

Slide 7

Slide 7 text

When you upgrade a plugin

Slide 8

Slide 8 text

wp-admin wp-content PHP crap… Wordpress

Slide 9

Slide 9 text

WP-admin

Slide 10

Slide 10 text

WP-Includes

Slide 11

Slide 11 text

PHP Crap

Slide 12

Slide 12 text

A Static Approach What if we reengineered Wordpress as a Static Site Generator?

Slide 13

Slide 13 text

What is Static? It’s not about: Dynamic content vs static brochure Database vs Flat Files Writing HTML by hand

Slide 14

Slide 14 text

What is Static? No dynamic programming on the server A Caching Contract

Slide 15

Slide 15 text

Static Wordpress: WP-admin

Slide 16

Slide 16 text

Static Wordpress: WP-Includes

Slide 17

Slide 17 text

Static Wordpress: PHP Crap

Slide 18

Slide 18 text

Replacing The PHP Crap :) Picking a static site generator

Slide 19

Slide 19 text

Typical Static Site Generator Flow Lets look at netlify.com - currently a Jekyll based site

Slide 20

Slide 20 text

netlify.com admin

Slide 21

Slide 21 text

netlify.com “includes”

Slide 22

Slide 22 text

netlify.com the whole ﬂow netlify CDN

Slide 23

Slide 23 text

Picking Your Static Site Generator What you should look for…

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

The Modern Static Site Generator Templating Asset Pipeline Content Metadata Filtering & Sorting Plugins

Slide 26

Slide 26 text

Mapping out the STG landscape Build Tools Build Tools/STG Full Fledged STG Specialized STG

Slide 27

Slide 27 text

What to look for: Asset Pipeline Sass/CoffeeScript/Babel.js/Less/Stylus/etc,etc,etc Composable? Extensible? vs Simple? No conﬁguration? Bower? NPM?

Slide 28

Slide 28 text

What to look for: Content Typically Markdown ReStructuredText External APIs? Contentful, Prismic, Google Docs

Slide 29

Slide 29 text

What to look for: Metadata Frontmatter? YAML? JSON? TOML? Separate Data Document

Slide 30

Slide 30 text

What to look for: Filter & Sort Code in templates? Built-in Sort and Filter features? Easy helper methods?

Slide 31

Slide 31 text

What to look for: Plugins Can you write plugins? Plugin ecosystem? What’s possible with a plugin? Plugin Hooks?

Slide 32

Slide 32 text

Q/A What else do you want from a static site generator?

Slide 33

Slide 33 text

Thank You! mathias@netlify.com @biilmann www.netlify.com