Migrating iTrustCapital’s Website from WordPress to Contentful and Gatsby for a Seamless Content Editing Experience

Who is iTrustCapital?

iTrustCapital is the leading digital asset IRA trading platform that allows clients to directly buy and sell cryptocurrencies and physical gold in real-time through their retirement accounts.

Since March 2020, iTrustCapital increased its employee count by 623%, which now stands at over 200+ employees across the globe. iTrustCapital is valued at $1.3B, led by a $125M Series A secured at the start of 2022.

A CMS Architecture that Couldn’t Match Content Needs

A monolithic CMS is an all-in-one solution that lets users store, manage, and present content in one place.

iTrustCapital relied on WordPress, the most popular monolithic CMS solution, to meet their content demands of managing and publishing content. As a quickly growing software company, speed to market and scalability were key.

However, its content team found the WordPress UI clunky and difficult to scale, increasing their time to publish larger volumes of net-new content when necessary, including new landing page templates. 

In addition, iTrustCapital noticed its website was too slow and needed to make the content editing experience more extensible with a new CMS & frontend stack to stay competitive in the fast-paced crypto industry.

Their team envisioned a website technology stack that empowered its content editors to publish content without any complications, improve SEO by deploying a modern frontend framework with lightning-fast load speeds, and enhance the content editing experience through UI extensions and customization.

Migrating to a Headless CMS and React-based Frontend Framework

Webstacks recommended Contentful to function as the backend system and GatsbyJS for the frontend presentation layer of their website.

To meet their go-to-market timelines, the main challenge was migrating iTrustCapital to the new tech stack as quickly as possible, allowing their content editors to leverage the benefits of a headless solution quicker so they could better serve the needs of their audiences.

Drafting a Migration Blueprint

We kicked off the project by creating a migration blueprint that detailed:

• How our team would reorganize pages and page components

• How this would be done using a drag-and-drop editor

• How we would migrate all of the content from WordPress to Contentful (being sure to mirror the existing WordPress website) using Gatsby

And do it all without losing any content or data in the process.

Setting up a staging environment

To ensure content was successfully migrated and appeared the way it did on the previous WordPress site, our development team built a staging environment. They did this for two key reasons: 

1. So iTrustCapital’s assets weren’t at risk of being lost, and

2. So our developers could safely test migrated pages to ensure they look and function how they should

An Efficient Testing Process

The migration from WordPress to Contentful was done on a page-by-page basis within the staging environment, allowing iTrustCapital to safely approve each migrated asset.

Throughout the process, we held training to show the content editors how to build pages using a drag-and-drop editor we designed and integrated into Contentful, as well as how the content on each page could be edited.

A Seamless Drag-and-Drop Experience

To ensure content demands would be met, our team reorganized page structures in Contentful with an integrated drag-and-drop functionality allowing for a quick and easy handoff back to iTrustCapital’s marketing team to leverage, build, and publish any new website pages without the need for a developer.

Mirroring the Old Website Using Gatsby

Back in 2006, Amazon found that every 100ms in added page load time cost them 1% in sales. A fast-growing company like iTrustCapital can’t risk losing business from poor website performance, leading them to choose Gatsby and its host of performance benefits.

With the staging environment in place, our team was able to begin migrating over 600+ existing pages to the new Contentful solution using Gatsby.

After migrating and testing the presentation and accessibility of each piece of content, their team was notified for the final say.

Note

“We were able to do it in a non-destructive manner. If ITrustCapital didn’t approve of a migrated asset then we simply removed it without harming anything.” - Kiko Estrada, Engineering Manager

When it was exactly as it appeared on the original website, all iTrustCapital had to do was point their DNS name servers to Webstacks’ Gatsby Cloud instance to push the migrated pages live to Contentful.

Backfilling Over 140+ Featured Images for iTrustCapital’s Press Release Library

After migrating from WordPress to Contentful, iTrustCapital was presented with a challenge: although the content for 140+ press releases hosted on their cms/press subdomain was successfully migrated to Contentful, each post was missing its featured social share image.

caption: Social cards, also known as social previews, are displayed when you or someone else shares the content.

Also known as social card assets, they existed on the previous content backend but the file sizes were too big and needed to be compatible with Contentful and slotted in for each press release post that was migrated to the new solution.

iTrustCapital wished to resolve this compatibility issue in under thirty days to ensure each press release had its associated featured image for both legal reasons and speed. iTrustCapital had two choices:

1. Manually input each featured image on Contentful’s backend.

2. Pay thousands of dollars for a third-party API.

After expressing severe discomfort with either solution, our team of developers went straight to the drawing board to find an automated solution that could be triggered using React at every build to generate a social card that matched the constraints set by LinkedIn, Twitter, and Facebook.

Building A React Component that Automatically Backfilled Images

Because iTrustCapital’s website is deployed on Gatsby and Contentful, we suggested building a custom React component to handle the backfilling for each press release published on the subdomain “/cms/pressrelease.”

The challenge was to build a React component that could autofill the required information and fields needed to meet the criteria of a featured image for each social card and at the same time make them compatible with all social media platforms.

iTrustCapital’s social cards contain the following information—iTrustCapital’s logo, publisher logo, the title of the post, type of post, an icon for each post type, and background color of the social card.

To automate backfilling each of the above assets, our development team built a React component specifically for these social cards to ensure iTrustCapital’s team didn’t have to manually update the featured image field or create a new social card design for every instance.

Triggered at Build Time

Instead, the React component is always triggered at build time—that is, the component is triggered each time a new record is created, updated, or deleted under the cms/press subdomain. 

After a new piece of content is edited or published and the React component is triggered, our codebase antenna intelligently detects that it knows that it needs to generate a featured image for that press release or post. 

And it will set that image that is completely compatible with every single social media network and its social card constraints. The benefit is that content editors were not required to go into Contentful and upload each of these images for all existing press releases.

Upon each site build, the React component checks for any new content under the subdomain “/cms/release” and either:

1. Resumes build if no new blog posts under the subdomain “/cms/press” is detected.

2. Creates a component based on the data, takes a picture of the new information, and sends it to the codebase to create the social cards required to fill in the featured image field.

Automatic Site-Wide Updates

Another key callout that the React component can perform is updating every instance that a logo is being used.

For example, the Yahoo logo displayed above could be used on multiple articles/releases across iTrustCapital’s website. Instead of having someone on iTrustCapital manually update the images in each instance, the React component automatically does it for them.

Updating the Yahoo image with another variation or logo on the company record in the Contentful backend will trigger a refresh on every article that references the record.

Increased Efficiency

Not only did this solution save iTrustCapital time, but it also gave them the ability to continuously update their social cards based on their needs without using additional resources—it’s all done by the computer.

A Manual Process Handled by Gatsby & Contentful

From 30 Days to Four Hours

A typical backfill in development can take roughly thirty days to complete. The React component reduced the expected time to about four hours, which was the pressing factor for iTrustCapital’s team.

What’s more, outsourcing a development agency or contractors who specialize in backfilling is costly. iTrustCapital was also not in a position to involve their product engineers to handle the backfill of over 100+ posts. 

Implementing the custom React component to iTrustCapital’s Gatsby/Contentful application not only saved them on engineering resources, but now they don’t need to worry about maintaining it since it’s their code. 

Since the React component is baked into iTrustCapital’s web application, the application is only leveraging Gatsby to make the computer do all the work and not anyone on the iTrustCapital team.

iTrustCapital Stays Competitive in the Booming Crypto Industry

iTrustCapital’s headless CMS migration was completed in less than one week, compared to the expected thirty-day timeline.

This meant three things:

1. All of iTrustCapital’s content was successfully migrated to the Contentful backend.

2. The marketing site was completely mirrored, making all the content dynamic and editable as promised.

3. Their Engineering team stay focused on their product and didn’t lift one finger during the migration process.

In addition to having a blazing-fast website with the help of Gatsby, iTrustCapital’s team now leverages Contentful’s CDN delivery network, robust extensions, and modern UI to produce content quickly, create new content at scale, and ship it out faster to their end-users.

All while the migration was being resolved, the leading IRA trading company was preparing for a huge round of funding. Shortly after the successful migration, they secured a Series A valued at $125M, vaulting iTrustCapital into the unicorn stratosphere.

The adoption of Gatsby and Contentful now empowers their team by:

• Meeting their team's content demands by offering a better content management experience and increasing publishing speed across all their digital channels.

• Providing their customers with a customized and personalized website experience.

• Improving website performance to meet their SEO and WebOps expectations.

The iTrustCapital team is extremely happy with how quickly they can iterate their website using the structure that was implemented, achieving first-to-market velocity with the migration from monolithic to headless to remain competitive in the booming crypto industry.