Workshop Recap: How to migrate from WordPress to a Headless CMS
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.
Quote from , Alba Silvente
Day 1: Benefits of moving, Content Types and content migration
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.
Quote from , Alba Silvente
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.
Day 2: Creation and deployment of the front-end project
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.
Quote from , Alba Silvente
Materials day 2
| 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.
