Customers | Penn State University

See How Penn State University Delivers The News With Gatsby

Penn State University News Site runs on Gatsby backed with Drupal, a decoupled architecture that serves up thousands of pages to millions of readers.

Overview

Penn State is a world-class public research university with a broad mission of teaching, research, and public service. Its student enrollment tops over 80,000 students, placing it among the 10 largest public universities in the United States. As the #2 university for producing CEOs, Penn State has earned its reputation for excellence.

As leaders in higher education for more than 150 years, the Penn State community has unique expertise and many, many stories to share. Those stories come to life on Penn State News, one of the University’s most visible communications platforms that generates millions of pageviews annually.

The Office of Strategic Communications at Penn State had the goal to build a best-in-class digital storytelling platform. Central to that goal was putting this university mission critical platform, including the database and services, into an industry standard cycle of sustainable, iterative improvement. Penn State seized the opportunity to transform the way they create and share news on a modern, open source architecture.

Goals

  • Design for mobile first with a component based approach
  • Separate the major services of the platform
  • Rebuild the content management and publishing system with a full-service API that can expose content to authorized partners and services
  • Advance the university’s SEO strategy and drive measurable change to acquisition, reach, and engagement of readers

Challenge

Penn State News is more than a news site. The platform and its content fill several mission-critical needs. It builds togetherness for a full spectrum of the university community and drives strategic communications. Plus, it’s the informational go-to during campus emergencies and supports public relations initiatives.

For the 250 editors contributing to Penn State News, a highly customized monolithic Drupal 7 installation met the need for fast-paced, multidirectional publishing. Yet, this version of Drupal was nearing its end of life. The editing experience wasn’t up to par. Performance, especially page load time, was lagging.

Penn State News stores 100,000 stories and 60,000 images. And those stories and content have places to go. The site syndicates content to partner websites, spanning more than 20 campus locations across the University. Content is also multi purposed into daily large-scale email digests. It was difficult to iterate and optimize all this content on the platform.

All of its services were built directly into the content platform and created several challenges:

  • Security issues: The legacy site did not separate the back end and front end, which could introduce security vulnerabilities
  • Complex back end: While the news site operated seamlessly from a front end perspective, the back end included many legacy systems that work together with the headlines email system, digital assets such as images and videos, and partner sites to distribute content efficiently
  • User experience obstacles: Built on Drupal 7, the legacy site no longer supported the needs of the over 250 content editors publishing information.

A more flexible solution that empowered them to create and maintain pages for their own departments, organizations, and institutions was needed to shape the user experience. Creating compelling mobile-first experiences for readers across the global Penn State community was a big undertaking. The team needed to be nimble with front end changes.

Beyond content management, the vision was to create a publishing system with a full-service API to expose content. Ready to modernize and decouple its framework and hosting approach, Penn State put out the search for a digital agency partner to help lead the charge.

The Solution

The Penn State News team partnered with Mediacurrent to reimagine its publishing technology stack. Now, a decoupled and open source architecture provides the News team with the tools to create a compelling digital storytelling experience.

The new platform blends the publishing power of Drupal 8 with a future-flexible frontend framework, Gatsby and React. It marks a new chapter in performance and speed for the News team to achieve its editorial ambitions across Penn State University and beyond.

Penn State wanted to adopt modern front end best practices for a faster and more dynamic site. To achieve that goal, a front end framework was needed to complement Drupal 8 on the backend. The clear choice was Gatsby.

The new decoupled site separates the major services of the platform and provides centralized content and email authoring. At the core of Mediacurrent’s development approach was reusability. Our approach to exposing content to other Penn State sites opens up the possibility to publish content across any device or channel.

Why Gatsby?

Gatsby offers several key advantages to Penn State: a significant portion of tooling completed out of the box, speed of development velocity and lower onboarding effort for new developers compared to other frameworks. Other advantages include:

  • Resourcing availability
  • Flexibility and interchangeability
  • Performance and speed
  • Security Penn State News encompasses a vast amount of content and requires frequent daily updates. Key focus areas for development included accounting for scale and improving Gatsby build performance.

Gatsby Plugins

Plugins from Gatsby’s open source ecosystem were used to route content from Drupal. The Gatsby site also includes Google Analytics and meta tag to support SEO efforts.

  • SEO: gatsby-plugin-react-helmet
  • Analytics: gatsby-plugin-google-tag-manager
  • Content: gatsby-source-drupal
  • Performance: gatsby-plugin-sharp
  • Styling: gatsby-plugin-sass
  • Advanced Routing: gatsby-plugin-catch-links
  • Testing: gatsby-source-faker

Growing Gatsby

Mediacurrent helped push the scale and complexity of the Drupal/Gatsby integration, identifying areas for growth and opportunities to extend functionality. These contributions to growing the Gatsby ecosystem for Drupal underscore Mediacurrent’s open source principles of collaboration and sharing knowledge.

In addition to contributing to the Gatsby project, Mediacurrent’s work for this project involved fixing a bug related to filters appended onto next links for gatsby-source-drupal.

The teams at Mediacurrent and Gatsby collaborated to identify and address edge cases on this active publishing platform with a paragraphs-based content model and many content references.

“Throughout the project, the Mediacurrent team worked incredibly closely with both the Gatsby team and the Penn State News organization. By making important architectural decisions with the technology vendor and the client in the room, Mediacurrent ensured every part of the Penn State News website was optimized for both client and user experience. We’re especially grateful to Mediacurrent for contributing a number of improvements to the Gatsby/Drupal module, benefitting the entire community.”

  • Sam Bhagwat, Gatsby co-founder and Chief Strategy Officer

Final Thoughts

Penn State News needed to adapt in order to keep pace with the changing needs, expectations, and behaviors of those they serve. Selecting the right content management platform was no doubt going to be critical to their success.

The clear advantages that Drupal offers—increased security, flexibility and scalability—make it the ideal choice for any institution seeking to position itself as an innovative leader in digital experiences.

Mediacurrent built a resilient platform that delivers Penn State News the freedom to share stories at scale across the University. Training was provided to help end-users to love the new publishing system, while a tailored course in Javascript fundamentals, React, and Gatsby helped developers to learn it.

Qualitatively, the new site benefits from greatly improved storytelling through photos, video, and integrated social media about what the school’s faculty and students study and do.

Gatsby Cloud

Ready to get started?

Get started building, previewing, and deploying your website in minutes.