Static Site and Search Integration
A presentation at Drupal Camp NYC by John Picozzi
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
Wondering what to do with your old D7 sites? there are over 550,000 D7 sites still out there in production… One option is to convert your site to a static site and move your D7 site behind your firewall.
This session will take a look at different tools and technologies you can use to convert not only your D7 sites, but also D8 and D9 sites to Static Sites.
We’ll also look at how to handle search, forms and hosting… and how to create a DevOps tool chain to manage the SDLC of Static Sites in production.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
Buzz and feedback
Here’s what was said about this presentation on social media.
