A presentation at Midwest Drupal Camp in in Chicago, IL, USA by Brian Perry
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?”
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.
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.