Workshop Recap: How to migrate from WordPress to a Headless CMS
Storyblok is the first headless CMS that works for developers & marketers alike.
After giving the workshop How to migrate from WordPress to a Headless CMS on 28th and 29th October at Smashing Conference, Alba and Christian tell us in this recap their experience, the concepts explained, and the resources used in the training.
Who is this workshop for?
Small agencies or individuals working on WordPress sites who are considering migrating to a Headless CMS, like Storyblok.
For anyone who wants to improve the performance of their site, enhance the content creation in their team or develop their apps on multiple devices.
What was covered in this workshop?
In this free workshop, Alba Silvente and Christian Zoppi taught how to migrate a WordPress site and its content to Storyblok's Headless CMS.
The goal was to improve site performance, increase dynamic content that content creators would be able to use, and increase development productivity.
To make this workshop and the article "How To Migrate From WordPress To A Headless CMS" possible, Christian Zoppi, DX Engineer at Storyblok, developed a plugin that facilitated the migration of content already stored on WordPress. It was a pleasure to work side by side with him and demonstrate the migration on the first day of the workshop, so that more people can make the switch easier.
)
How to migrate from Wordpress to Headless day one.
On the first day, it was explained when it makes sense to migrate to a Headless CMS and the benefits of this setup. The Storyblok space was created and the functionality of the panel and its different sections were explored.
Once the theory of the workshop was explained, the migration started. First, the Content Type and components, needed to migrate the content into the space, were created. And finally, the script that links the Storyblok schema to WP was created and executed, migrating the content live.
With the first day of the workshop being the moment when we would see our WordPress content being migrated, it was certainly a very rewarding experience to demonstrate it live and see all the content in the new Storyblok space.
In the end, Alba and Christian left a Q&A space to solve the doubts of the attendees about the process and the changes that will be necessary in their WP site to carry out the migration.
In addition, Christian showed how the plugin was made in case someone wanted to extend it, as it is completely open source and is open to receive new features that expand its use in the migration.
Materials day 1
| Resource | Link |
|---|---|
| Slides used for the workshop | https://a.storyblok.com/f/113181/x/75ed937aa4/slides-workshop-wordpress-to-storyblok.pdf |
| Migration plugin developed by Christian | https://github.com/storyblok/wordpress-importer |
| Storyblok space, built in the session, clone URL used for the migration. | https://app.storyblok.com/#!/build/113181/ |
| Final migration script developed in the workshop | https://github.com/Dawntraoz/wordpress-importer/blob/main/migrate-wp-to-storyblok.js |
| WordPress demo site | https://wp2.storyblok.com/ |
Video recordings of the first day of the workshop can be found at this Vimeo link.
)
How to migrate from Wordpress to Headless day two.
On the second day, the FrontEnd project was created from scratch using Nuxt. A template with the storyblok-nuxt module already added was used to facilitate the connection to the Storyblok API, and they explained how the storyblok-bridge works.
Afterwards, the templates and components, that were defined the day before in the Storyblok space, were implemented in the frontend project and, therefore, the content was rendered and styled.
In addition, a static site host was set up to deploy the web made during those two days. Also, a build hook was connected to automatically deploy when publishing content in the Storyblok space.
Live coding is never easy, but having to develop an application from 0 to 100 and deploy it in 2 hours was quite a challenge. I won't deny that I feel accomplished!
| Resource | Link |
|---|---|
| GitHub repository boilerplate | https://github.com/Dawntraoz/vue-nuxt-boilerplate |
| Demo project with Nuxt | https://github.com/Dawntraoz/wp-to-storyblok-demo |
| Demo project live site | https://blissful-elion-d9d9c7.netlify.app |
Video recordings of the second day of the workshop can be found at this Vimeo link.
What you will take away from this workshop
From this workshop, you will mainly take away a clear and concise idea of the benefits that a headless setup can bring to your project. And a step-by-step guide to execute the migration and give you an initial idea of the work required.
Additionally, thanks to the resources created or used in the training, you will have a plugin to facilitate your migration from WordPress. In addition to a boilerplate for Nuxt & Storyblok, and a project already completed, in this case in Nuxt, to use as an example for future projects.
And, of course, you will always have the opportunity to contact Alba (@dawntraoz), Christian (@ChristianZoppi) or the Storyblok team to solve your doubts during the migration.
