Cabrillo College is located in northern California about 30 miles south of San Jose. It’s a local mainstay; as the main community college serving Santa Cruz County, its 12,000 students represent more than 5 percent of the county’s population.
When Ramesh Goonetilleke took the role of Cabrillo’s lead web developer, he was excited for the opportunity to have an impact in the local community.
Goonetilleke knew there would be one challenge, though — the website stack was going to need some updating.
“It was Dreamweaver and flat HTML files,” said Goonetilleke. “In 2020.”
The problem wasn’t just the tech stack, though. It was the ability to represent the wide variety of departments, programs, activities, and institutes that makes Cabrillo Cabrillo.
Cabrillo’s Aptos campus
Empowering Cabrillo’s departments, groups, and institutions
Students at Cabrillo can choose from several key career pathways — STEM, business, creative arts, global studies, health and public service. They interact with classes in a variety of ways — in-person and distance education, with dual enrollment for high school students. Many students are international; a large number seek out internships and work experience; there are a wide variety of clubs and organizations.
A key goal of the Cabrillo website is to document each of these pathways and opportunities; it’s a mission that requires close coordination with the faculty and administrators responsible for each program.
Student resources, academic pathways, and community institutions at Cabrillo
In addition, when students are on campus — and there are two, separate campuses — they have a wide variety of academic resources available to them — technology centers, a library, a bookstore, tutoring, counseling. In addition, there are a number of institutions affiliated with Cabrillo that are available to both students and the broader community: an arts complex with frequent events, a dental clinic, a horticulture center than doubles as a botanical garden, a small business development center, a disability learning center.
Put another way: Cabrillo College isn’t just one organization. It’s a few dozen organizations — each run by faculty or administrators, with a unique group of actively involved students and community members, each producing and consuming content.
Goonetilleke’s goal then, was not to centralize control of information into the hands of an all-knowing content team. It was to decentralize control of information, empowering roughly 100 faculty and administrators across Cabrillo by giving them the power to create and maintain pages for their own departments, organizations, and institutions.
Finding an agency, architecting a stack
So Goonetilleke sent out an RFP and started talking to agencies about potential options.
In terms of a new tech stack, Goonetilleke came from a deep WordPress background; he wasn’t married to WordPress as a tech choice but valued its editing capabilities as one of the key challenges would be creating an intuitive editing experience.
“There isn’t time to give everyone tutorials if they don’t have experience using a CMS,” Goonetilleke says.
He put out an RFP and soon started chatting with Eric Ressler at Cosmic, a Bay Area agency with experience building sites using both traditional and newer CMSs with Gatsby and React.
“Our philosophy is to stay one step behind cutting edge to maintain stability while embracing the latest tech,” says Ressler. “We chose Gatsby because it had a solid reputation and was built on React — technologies with thriving development communities.”
When Ressler proposed a solution combining headless WordPress and Gatsby, Goonetilleke enthusiastically jumped on board.
“In terms of security, I have cleaned up more WordPress sites than I can count,” says Goonetilleke. “And our traffic is spiky — it goes up 10x at the beginning of every semester, so we have to provision in anticipation of that. But then running a typical WordPress server becomes a waste of capacity the rest of the time.”
With each department having specific needs, Goonetilleke & Cosmic didn’t feel that predefined content models were the right interface for Cabrillo’s staff. Instead, they wanted to give content editors direct access to the component library to build customized pages for themselves..
Gatsby and Gutenberg, playing together
The most effective way to enable this creative independence, the team decided, was through site architecture. Providing content editors with Gutenberg, WP’s intuitive drag-and-drop build tool, empowered them to work independently. Since too much freedom can be a different kind of limiter, though, they also built in guardrails.
The team built components using React, put them into Gutenberg, and then limited editors to only the blocks that were pre-built into the system. They configured the components to store all of the data of each component as a stringified JSON object in the HTML generated by WordPress and Gutenberg. Goonetilleke & Cosmic then used Gatsby to build out all the pages, pulling the JSON out of Gutenberg and importing each component from their React component library.
Configuring a CMS to serve not just as a content editing tool, but also a drag-and-drop interface is emerging as a best practice in professional Gatsby websites.
Organizations like the Australian nonprofit Starlight Foundation configure a headless CMS like Contentful so that individual content models correspond to components in their component library,. This grants content editors the ability to create landing pages by defining relationships between content objects within their CMS in an intuitive visual workflow.
This workflow is especially promising in “content-rich” public interest organizations like Cabrillo, with a huge diversity of constituent organizations each having their content production needs.
Lessons learned, challenges overcome
With WordPress as their CMS, the Cosmic team faced an additional challenge.
“With these newer JAMstack sort of sites and headless CMSs, the starting point is already a document-oriented database,” says Neil Ruud, Cosmic’s tech lead on the Cabrillo project.
Older CMSs like WordPress are built on traditional relational databases, which means a bit of extra work — like the JSON-as-a-field and the component whitelist mentioned earlier — to eke out that next level of customization.
“You kind of have to figure out various tricks and workarounds,” says Ruud.
The transition hasn’t been seamless. The Gutenberg admin interface, in particular, has had performance challenges, slowing down near the point of unusability for some users. Build times — they build every hour, on a crontab — also took some explaining.
But in general, Goonetilleke says, users are enthusiastic about truly owning their part of the website — and willing to do invest in learning a little bit on their end of the workflow to get that independence.
Cabrillo College homepage
That’s a worthy goal, not just for Cabrillo, but for all colleges and universities. A higher education website system should be a tool that empowers the diverse departments, organizations, and institutions comprising the college to tell their stories. And that, in turn, should give students the information they need to truly “discover [their] path.”
And for Cabrillo, thanks to Gatsby and Gutenberg, that’s what their website system is. So yes, the new Cabrillo website looks great. And yes, they’ve migrated to a modern stack. But most importantly, the website architecture has unlocked the power of Cabrillo’s community.