A presentation at DrupalCon Seattle in in Seattle, WA, USA by Brian Perry
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
With the continued rise of static site generators that can play nicely with Drupal it has never been easier to take advantage of the speed, security, and scalability of static sites. But for those comfortable working with Drupal it may be difficult to identify the projects that would benefit from a static site build, and also to determine which of the many static site generator options are right for you.
This session aims to provide an overview of the static site generator landscape from a Drupal perspective, including:
We’ll also briefly compare three static site generator projects - Jekyll (a Ruby based option), Gatsby (a React based option) and Tome (a Drupal based option), focusing on:
By the conclusion of this talk you will have a better understanding of why a static site build may or may not be right for your project, have a better feel for which static site generator would fit your workflow, and may even walk away with some existential questions about the overall nature of dynamic content on the web (heavy, right?)
The following resources were mentioned during the presentation or are useful additional information.
Would love if you could provide an evaluation.
A collection of resources about using static site generators with data provided by Drupal
Background on a static build with Drupal and Jekyll
Markdown processing support for Drupal body fields.
Here’s what was said about this presentation on social media.
for free. You
can too.