Static Site and Search Integration

A presentation at Drupal Camp NYC in October 2021 in by John Picozzi

Slide 1

Slide 1

DevOps Summit Drupal Static Sites

Slide 2

Slide 2

John Picozzi Solution Architect at

Slide 3

Slide 3

Matt Obert Director of Screening at

Slide 4

Slide 4

Salim Lakhani CTO and Co-Founder

Slide 5

Slide 5

Eric Guerin Senior Developer for all things Drupal at

Slide 6

Slide 6

What are Static Sites?

Slide 7

Slide 7

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

Slide 8

Slide 8

Benefits of Static Sites…

Slide 9

Slide 9

Performance…

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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 17

Slide 18

Slide 18

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

Slide 19

Slide 19

Slide 20

Slide 20

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

Slide 21

Slide 21

Drupal 8 & 9 Static Sites

Slide 22

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

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 24

Slide 25

Slide 25

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

Slide 26

Slide 26

Drupal 7 Static Sites

Slide 27

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

Slide 30

Image by Darwin Laganzon from Pixabay

Slide 31

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

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

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

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

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

Slide 36

Ideal Editorial Workflow Content Staging Preview Deploy to Static

Slide 37

Slide 37

Drupal 7 + Static Sites Demo

Slide 38

Slide 38

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

Slide 39

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

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

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

Slide 42

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