An Introduction to Static Site Generators for Drupalists

A presentation at DrupalCon Seattle in April 2019 in Seattle, WA, USA by Brian Perry

Slide 1

Slide 1

AN INTRODUCTION TO STATIC SITE GENERATORS FOR DRUPALISTS Brian Perry April 10, 2019 DrupalCon Seattle Slides: http://bit.ly/ssg-seattle

Slide 2

Slide 2

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo • JAMStack curious d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 2

Slide 3

Slide 3

3

Slide 4

Slide 4

STATIC SITE GENERATORS An Overview

Slide 5

Slide 5

THIS IS A STATIC SITE 5

Slide 6

Slide 6

CAPTAIN MARVEL 6

Slide 7

Slide 7

THIS IS ALSO A STATIC SITE 7

Slide 8

Slide 8

EVEN THIS IS A (MOSTLY) STATIC SITE 8

Slide 9

Slide 9

SO WHAT IS A STATIC SITE GENERATOR? • Generates a completely static build (html, css, js) of a site based on raw data • Data is often markdown but could be a database, an API, CSVs and so on • Typically makes use of a templating engine • End result doesn’t require a monolithic stack, can be hosted anywhere • Popular projects: Jekyll, Hugo, Hexo, Gatsby, and many, many others. 9

Slide 10

Slide 10

ADVANTAGES OF STATIC SITES • Speed • Browsers are pretty great at rendering static html • CDNs • Security • Data source only needs to exist at build time • Hosting • Simpler stack, easier to scale • Developer Experience (depends a bit on the tool) 10

Slide 11

Slide 11

BUT… I LOVE DRUPAL Why would you use a static site generator with Drupal? • So much effort to make things static-like • Think of the effort that goes into making Drupal sites close to static – varnish, memcache, Drupal caching, etc. • Think about the next inevitable security update • Impact on hosting costs • Drupal’s admin UI 11

Slide 12

Slide 12

THE STATIC SITE GENERATOR LANDSCAPE From a Drupal Perspective

Slide 13

Slide 13

Slide 14

Slide 14

JEKYLL • Ruby project • Liquid templating engine • Markdown (most common), YAML, JSON and CSV data sources • Content in version control The granddaddy of modern static site generators. • Supported natively by Github Pages • Hugely popular • Incremental builds 14

Slide 15

Slide 15

JEKYLL - DATA 15

Slide 16

Slide 16

JEKYLL - TEMPLATING 16

Slide 17

Slide 17

JEKYLL – WITH DRUPAL Not a lot of formal options with Drupal 8 • Drupal 6 and 7 importers exist, but not Drupal 8 (that I could find) • So then what? • Export data as flat files (YAML, JSON or CSV in _data directory) • Jekyll CSV/RSS importer 17

Slide 18

Slide 18

JEKYLL – OUTPUT 18

Slide 19

Slide 19

JEKYLL For you if: • You want a simple road tested option • You want content in version control • Markdown / flat file data is practical • You don’t hate Ruby 19

Slide 20

Slide 20

JEKYLL Other Resources: • Jekyll Docs • The New Mediacurrent.com: Adventures in Decoupled Drupal 20

Slide 21

Slide 21

STATICDRUPAL.SITE 21

Slide 22

Slide 22

STATICDRUPAL.SITE 22

Slide 23

Slide 23

GATSBY • React project • JSX Templating • GraphQL to query data • Thriving plugin ecosystem Build blazing fast apps and websites with React • The new(ish) hotness • Crazy fast. Seriously. • Not just for static sites 23

Slide 24

Slide 24

GATSBY - INSTALLING AND RUNNING Or with a starter: npx gatsby new gatsby-blog https://github.com/gatsbyjs/gatsbystarter-blog 24

Slide 25

Slide 25

GATSBY – DATA Could be react components in src/pages 25

Slide 26

Slide 26

GATSBY – DATA Could be markdown from filesystem 26

Slide 27

Slide 27

GATSBY – CONSTRUCT QUERIES VIA GRAPHQL 27

Slide 28

Slide 28

GATSBY – ‘TEMPLATING’ 28

Slide 29

Slide 29

GATSBY – WITH DRUPAL 29

Slide 30

Slide 30

GATSBY – OUTPUT 30

Slide 31

Slide 31

GATSBY For you if: • You prioritize performance • You think in React • You want data source flexibility • You want to leverage the power of GraphQL • You want to go beyond static 31

Slide 32

Slide 32

GATSBY Other resources: • Gatsby Docs • gatsbyguides.com • Boina Gatsby Starter / Distribution • Tons of tutorials and talks You may also enjoy: • Quicklink Drupal module 32

Slide 33

Slide 33

TOME • A Drupal Project! • Generates a static site that looks like… your Drupal site • Exports and imports content as json A static site generator for Drupal 8 • Support for incremental builds 33

Slide 34

Slide 34

TOME - INSTALLING AND RUNNING • composer create-project drupal-tome/tome-project my_site —stability dev -no-interaction —no-install • composer install • drush tome:init • drush runserver 127.0.0.1:8888 • Create content, see it written to /content • Re-import based on static content: • drush tome:install • Generate a static build: • drush tome:static Can also install in an existing project. See project page. 34

Slide 35

Slide 35

TOME - DATA 35

Slide 36

Slide 36

TOME - TEMPLATING It’s Drupal! 36

Slide 37

Slide 37

TOME – OUTPUT 37

Slide 38

Slide 38

TOME For you if: • You want to keep using the tools provided by Drupal, but want a static site. • You want Drupal content under version control • You want to archive a D8 site 38

Slide 39

Slide 39

TOME Additional resources: • Tome Docs • Getting started walkthrough • Try it out on your site 39

Slide 40

Slide 40

AUTOMATING DEPLOYMENTS “I updated content in Drupal, now what?”

Slide 41

Slide 41

DEPLOY A BUILD ASSET 41

Slide 42

Slide 42

TRIGGER A BUILD WITH A COMMIT 42

Slide 43

Slide 43

TRIGGER A BUILD WITH A WEBHOOK 43

Slide 44

Slide 44

DEPLOY A BUILD WITH TOME 44

Slide 45

Slide 45

CHALLENGES “But my site can’t be static…”

Slide 46

Slide 46

POTENTIAL ROADBLOCKS TO A STATIC BUILD • Content volume / build times • Preview experience • Alternative solutions exist for: • Form API • Authentication 46

Slide 47

Slide 47

CHALLENGE YOUR PERCEPTIONS Ask yourself: “Why can’t this site be static?”

Slide 48

Slide 48

STATICDRUPAL.SITE – LET’S KEEP SHARING… 48

Slide 49

Slide 49

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com