DevOps Summit Drupal Static Sites

John Picozzi Solution Architect at

Matt Obert Director of Screening at

Salim Lakhani CTO and Co-Founder

Eric Guerin Senior Developer for all things Drupal at

What are Static Sites?

Number of Moving Parts… Varnish Memcached Drupal Caching Dynamic Website Static Website Server AWS CDN Database AWS S3

Benefits of Static Sites…

Performance…

Load times… ~ < 5 secs Source: https://medium.com/stronger-content/how-long-will-customers-waitfor-your-site-to-load-we-put-top-sites-to-the-test-545862be62c

Security PHP Drupal MySQL Removes > 99% of attack surface! Static Website AWS CDN AWS S3

Security and Compliance with CDN… Security ● WAF / Shield ● DDOS Protection ● SSL / TLS & HTTPS ● Access Control Compliance ● PCI-DSS L1, HIPAA, ISO 9001, SOC (1, 2, and 3), FedRamp Moderate, etc.

Hosting Costs… Pay for “data transfer” not “page views” -andThe greater your traffic, the less you pay! (per GB)

Total Cost of Ownership Varnish Memcached Drupal Caching Dynamic Website Server Database Engineering, Maintenance, Support, Hosting, Performance Optimization, Security, Upgrades, etc….

Total Cost of Ownership Static Website AWS CDN AWS S3 Engineering, Maintenance, Support, Hosting, Performance Optimization, Security, Upgrades, etc….

Pros… ● ● ● ● ● Performance Load Times Security Compliance (w/ WAF) Cost Savings on Hosting Cons… ● All features of Drupal ● CRUD pages/content ● Layout Tooling ● Restructure site ● Roles and permissions: ● User management ● Contrib Module eco-system ● Routing, Redirect management ● Views ● Etc. ● ● ● Instant content updates Real time API access Search, Forms, Comments, etc.

Algolia Benefits ● ● ● ● API Focused Speed Synonym Suggestions ○ Kids ○ Heart ○ Foot Use of Multiple Front Ends

SearchStax Benefits ● ● ● ● Managed Solr Search Great Dashboard / Analytics High Availability Easy Integration

Drupal 8 & 9 Static Sites

When Tome is enabled, any changes to config, content, or files will be automatically synced to your local filesystem. These exports can be used to fully rebuild the site from scratch, which removes the need for a persistent SQL database or filesystem. When you’re ready to push to production, you can use Tome to generate a static HTML version of your site.

Tome module project page on Drupal.org: Tome documentation: https://www/drupal.org/project/tome https://tome.fyi Publish Tome to Netlify: Publish Tome to GitHub Pages: https://tome.fyi/docs/hosting/netlify https://tome.fyi/docs/hosting/github-pages https://tome.fyi/docs/hosting/hosted-drupal-netlify/ Example (last year’s DCNYC site): https://2020.drupalcamp.nyc GitHub Pages example repository: https://github.com/drupal-tome/subdir-test Example (this year’s DCNYC site): https://tome.hotwebmatter.com Tome Netlify example repository: https://github.com/hotwebmatter/tome

Gatsby Benefits ● ● ● ● Page Speed Security Flexibility Easy Integration

Drupal 7 Static Sites

Drupal 7 anyone? ~ 550K Drupal 7 sites as of Sept 19, 2021

Use Case: University of California, San Francisco ● We maintain 1500+ Drupal 7 websites ● ~ 500 of those are custom websites ● Cost to migrate is still very expensive between Drupal 7 and 8. ● Departments don’t have budgets for upgrading

Drupal 7 End-of-Life November 28, 2022 Image by Tim Hill from Pixabay

Image by Darwin Laganzon from Pixabay

The missing “tool-chain” No tool-chain for enterprise-grade static sites ● ● ● No easy way to create and manage “Preview” sites No real Dev, Test, Stage, Live setup and workflow Manual CDN setup and configuration (images, CSS, JS) Develop Test Stage Preview Deploy

Static Site “tool-chain” Varnish Memcached Drupal Caching DEV TEST STAGE “Development” and “Preview” Website Server Database [ PUBLISH ] FIREWALL LIVE (STATIC) Static Website AWS CDN AWS S3

Static Site “tool-chain” Varnish Memcached Drupal Caching DEV TEST STAGE ENABLE / DISABLE AS NEEDED “Development” and “Preview” Website Server Database [ PUBLISH ] FIREWALL LIVE (STATIC) Static Website AWS CDN AWS S3

Static Site “tool-chain” Varnish Memcached Drupal Caching UPGRADE WHEN NEEDED DEV TEST STAGE “Development” and “Preview” Website Server Database [ PUBLISH ] FIREWALL LIVE (STATIC) Static Website AWS CDN AWS S3

Static Site “tool-chain” Varnish Memcached Drupal Caching DEV TEST STAGE PUBLISH AND ARCHIVE / DELETE (?) “Development” and “Preview” Website Server Database [ PUBLISH ] FIREWALL LIVE (STATIC) Static Website AWS CDN AWS S3

Ideal Editorial Workflow Content Staging Preview Deploy to Static

Drupal 7 + Static Sites Demo

Tools for Drupal 7 Static Sites ● ● Free ○ HTTrack ○ wget Commercial ○ QuantCDN ○ DevPanel

Are static sites right for your use case? ● ● ● ● ● ● ● ● ● What about D8 & D9 sites? High traffic sites? Brochure sites? Simple sites? Low traffic sites? Non-interactive sites? Non-active sites? Archivable sites? Etc. etc.

Kinda “Static” and “Static” ● Works with Drupal… ○ ○ ○ ○ ○ ● Drupal 8 & 9 ○ ● Druxtjs SSG (NuxtJS) Gatsby (React & GraphQL/JSON:API) NextJS (Dynamic & Static) Netlify CMS Jekyll Tome (Tome.fyi) Drupal 7 ○ ○ HTTRACK wget

Appendix: Search and Forms… ● Search ○ ○ ● Forms ○ ○ ○ ○ ○ ○ ● ALGOLIA https://www.algolia.com/ LUNR https://lunrjs.com/ Google Forms https://www.google.com/forms/about/ Static Forms https://www.staticforms.xyz/ & https://github.com/qualascend/staticforms-nextjs-zeit FormSpree https://formspree.io/ & https://github.com/formspree/formspree Netlify Forms https://docs.netlify.com/forms/setup/ Forms Keep https://formkeep.com/ Kwes Forms https://kwesforms.com/ Comments, Forums, etc.

Thank you! Feel free to ask a question. #DCCO2021