An Introduction to Static Site Generators for Drupalists

AN INTRODUCTION TO STATIC SITE GENERATORS FOR DRUPALISTS Brian Perry March 22, 2019 Slides: http://bit.ly/d8-ssg

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 4

5

STATIC SITE GENERATORS An Overview

THIS IS A STATIC SITE 7

CAPTAIN MARVEL 8

THIS IS ALSO A STATIC SITE 9

EVEN THIS IS A (MOSTLY) STATIC SITE 10

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. 11

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) 12

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 13

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 • Incremental builds • Hugely popular 16

JEKYLL - DATA 17

JEKYLL - TEMPLATING 18

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 • Jekyll CSV/RSS importer • YAML, JSON or CSV in _data directory 19

JEKYLL – OUTPUT 20

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 21

JEKYLL Other Resources: • Jekyll Docs • The New Mediacurrent.com: Adventures in Decoupled Drupal Similar projects: • Hexo • Hugo • Eleventy 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 • Tons of tutorials and talks • Boina Gatsby Starter / Distribution • Lando Gatsby Drupal • gatsby-remark-drupal 32

GATSBY Similar projects: • VuePress • Gridsome • Next.js • React Static You may also enjoy: • Quicklink Drupal module 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 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. 35

TOME - DATA 36

TOME - TEMPLATING It’s Drupal! 37

TOME – OUTPUT 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 • You want to import flat file Drupal data into another system 39

TOME Additional resources: • Tome Docs • Getting started walkthrough • Try it out on your site Similar projects: • static_generator • default_content • yaml_content 40

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

DEPLOY A BUILD ASSET 42

TRIGGER A BUILD WITH A COMMIT 43

TRIGGER A BUILD WITH A WEBHOOK 44

DEPLOY A BUILD WITH TOME 45

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 47

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