An Introduction to Static Site Generators for Drupalists

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

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

3

STATIC SITE GENERATORS An Overview

THIS IS A STATIC SITE 5

CAPTAIN MARVEL 6

THIS IS ALSO A STATIC SITE 7

EVEN THIS IS A (MOSTLY) STATIC SITE 8

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

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

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

THE STATIC SITE GENERATOR LANDSCAPE From a Drupal Perspective

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

JEKYLL - DATA 15

JEKYLL - TEMPLATING 16

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

JEKYLL – OUTPUT 18

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

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

STATICDRUPAL.SITE 21

STATICDRUPAL.SITE 22

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

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

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

GATSBY – DATA Could be markdown from filesystem 26

GATSBY – CONSTRUCT QUERIES VIA GRAPHQL 27

GATSBY – ‘TEMPLATING’ 28

GATSBY – WITH DRUPAL 29

GATSBY – OUTPUT 30

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

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

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

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

TOME - DATA 35

TOME - TEMPLATING It’s Drupal! 36

TOME – OUTPUT 37

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

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

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

DEPLOY A BUILD ASSET 41

TRIGGER A BUILD WITH A COMMIT 42

TRIGGER A BUILD WITH A WEBHOOK 43

DEPLOY A BUILD WITH TOME 44

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

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

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

STATICDRUPAL.SITE – LET’S KEEP SHARING… 48

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