How Penn State News Leveraged Drupal and Gatsby for the Modern Web

Penn State News, one of Penn State University’s most visible communication platforms that generates millions of pageviews annually, had an ambitious goal to build a best-in-class digital storytelling platform. The decision was made to pivot to a decoupled Drupal architecture to transform the way they create and share news on their site. In this lightning talk, learn how a world-class public research university revitalized their news site into a more resilient platform that delivers Penn State News the freedom to share stories with speed and scale.

Presented at DrupalCon Portland 2022 Acquia Booth

Transcript

1. How Penn State News Leveraged Drupal and Gatsby for the Modern Web DrupalCon Portland 2022 04/27/2022 PREPARED FOR:
2. Your Presenters ABOUT US – 2 Mark Shropshire Sr. Director of Development Mediacurrent Jim Nourse Director of Brand Platforms Penn State
3. 3 Penn State ABOUT US – • Over 80,000 students enrolled • Top 20 largest public university • Top 20 NSF Research expenditures • Land, Sea, Sun and Space Grants • Leader in higher education for more than 150 years • Millions of pageviews annually to Penn State News site 3
4. We are Mediacurrent An Open Source Product Agency 4 Based in the U.S., with team members around the globe, we define, design and deliver websites, platforms and digital experiences. We work across industries to provide utility to users, build value for businesses, and move technology forward. Our commitment to the Open Source Community goes beyond software contribution, extending into our craft, process and culture. ABOUT US –
5. Penn State News Stats 5 250 Contributing Editors PENN STATE NEWS PLATFORM – 30 Unique Stories Per Day 40 Images and Videos Per Day X Highly Custom Drupal 7 Build 70 Syndicated Partner Websites 35 Million Individual Emails Per Year
6. 6 Site Requirements PENN STATE NEWS PLATFORM – Hosting Outsource Hosting Infrastructure to the Cloud Authoring Build a Best-in-class Content Authoring Experience Decoupled Frontend Provide a Secure, Reliable, and Performant Decoupled Frontend 6
7. 7 Platform Requirements PENN STATE NEWS PLATFORM – Universal API Provide API for All Penn State Campuses Global System Integration Integrate with Penn State Systems Workflow Segregation Separating workflow around front-end and back-end 7
8. Drupal As The Content Authoring Tool PENN STATE NEWS PLATFORM – Robust Workflows Drupal is a content management framework providing a customizable content authoring experience including fields, taxonomy, content moderation, user management, and more. 8 Empowers Editors Drupal empowers content editors to control layout of content for traditional Drupal and decoupled Drupal websites. Editors can trust that what they edit and preview is what will go live on the published content site. API-First Architecture The ability to provide a single source of truth for content is a Drupal super-power. It allows for successful governance policy implementation and content access from varied consumer end-points.
9. 9 Content Authoring Experience PENN STATE NEWS PLATFORM – 9 It is critical that the AX is top-notch given there about 250 content editors.
10. Gatsby Is The Frontend Built For Decoupled Content PENN STATE NEWS PLATFORM – 10 Gatsby Framework A React-based web framework that makes building fast, secure, scalable, and accessible sites simple and fun. Gatsby handles things like routing, templates, pre-fetching, lazy-loading, and more right out of the box. Gatsby Content Mesh The Gatsby Content Mesh is a decoupled data layer powered by GraphQL that makes sourcing, normalizing, and updating content lightning fast and straightforward. Gatsby Cloud Gatsby Cloud helps teams deliver the best Gatsby experience with a unified platform for Building, Previewing, and Deploying a Gatsby site to a global, edge network.
11. 11 Gatsby Preview PENN STATE NEWS PLATFORM – 11 An integration with Drupal and Gatsby Cloud allows authors at Penn State News to see a preview of changes before they go live.
12. 12 Platform Tech Stack PENN STATE NEWS PLATFORM – 12 Penn State, Mediacurrent, Acquia, and Gatsby partnered together to create a modern web platform. API User-Facing Website Images Campus Alerts Files Send Emails for News Publications, etc.
13. 13 The Penn State News Open Source Story PENN STATE NEWS PLATFORM –
14. 14 https://www.psu.edu/news
15. Q&A Jim Nourse - Penn State University jnourse@psu.edu Mark Shropshire - Mediacurrent mark.shropshire@mediacurrent.com Reach out with any questions!