DevOps Summit Drupal Static Sites
Slide 1
Slide 2
John Picozzi Solution Architect at
Slide 3
Matt Obert Director of Screening at
Slide 4
Salim Lakhani CTO and Co-Founder
Slide 5
Eric Guerin Senior Developer for all things Drupal at
Slide 6
What are Static Sites?
Slide 7
Number of Moving Parts… Varnish Memcached Drupal Caching Dynamic Website Static Website Server AWS CDN Database AWS S3
Slide 8
Benefits of Static Sites…
Slide 9
Performance…
Slide 10
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
Slide 11
Security PHP Drupal MySQL Removes > 99% of attack surface! Static Website AWS CDN AWS S3
Slide 12
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.
Slide 13
Hosting Costs… Pay for “data transfer” not “page views” -andThe greater your traffic, the less you pay! (per GB)
Slide 14
Total Cost of Ownership Varnish Memcached Drupal Caching Dynamic Website Server Database Engineering, Maintenance, Support, Hosting, Performance Optimization, Security, Upgrades, etc….
Slide 15
Total Cost of Ownership Static Website AWS CDN AWS S3 Engineering, Maintenance, Support, Hosting, Performance Optimization, Security, Upgrades, etc….
Slide 16
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.
Slide 17
Slide 18
Algolia Benefits ● ● ● ● API Focused Speed Synonym Suggestions ○ Kids ○ Heart ○ Foot Use of Multiple Front Ends
Slide 19
Slide 20
SearchStax Benefits ● ● ● ● Managed Solr Search Great Dashboard / Analytics High Availability Easy Integration
Slide 21
Drupal 8 & 9 Static Sites
Slide 22
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.
Slide 23
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
Slide 24
Slide 25
Gatsby Benefits ● ● ● ● Page Speed Security Flexibility Easy Integration
Slide 26
Drupal 7 Static Sites
Slide 27
Drupal 7 anyone? ~ 550K Drupal 7 sites as of Sept 19, 2021
Slide 28
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
Slide 29
Drupal 7 End-of-Life November 28, 2022 Image by Tim Hill from Pixabay
Slide 30
Image by Darwin Laganzon from Pixabay
Slide 31
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
Slide 32
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
Slide 33
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
Slide 34
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
Slide 35
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
Slide 36
Ideal Editorial Workflow Content Staging Preview Deploy to Static
Slide 37
Drupal 7 + Static Sites Demo
Slide 38
Tools for Drupal 7 Static Sites ● ● Free ○ HTTrack ○ wget Commercial ○ QuantCDN ○ DevPanel
Slide 39
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.
Slide 40
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
Slide 41
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.
Slide 42
Thank you! Feel free to ask a question. #DCCO2021
