Workshop Recap: How to migrate from WordPress to a Headless CMS

Contents
    Try Storyblok

    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.

    Quote from , Alba Silvente

    • “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.”

      Alba Silvente

    Day 1: Benefits of moving, Content Types and content migration

    How to migrate from Wordpress to Headless day one.

    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

    • “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.”

      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:

    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.

    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

    • “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!”

      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:

    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.

    Developer Newsletter

    Want to stay on top of the latest news and updates in Storyblok?
    Subscribe to Code & Bloks - our headless newsletter.

    An error occurred. Please get in touch with support@storyblok.com

    Please select at least one option.

    Please enter a valid email address.

    This email address is already registered.

    Please Check Your Email!

    Almost there! To confirm your subscription, please click on the link in the email we’ve just sent you. If you didn’t receive the email check your ’junk folder’ or