Moving From WordPress to Limitless Opportunity Using Cosmic JS


There are some good things about WordPress. It can do pretty much anything with very little knowledge of coding necessary. It was very easy for me to pick a theme, upload some content and bam, there is a CMS website. Maybe it is my technical wanderlust, but WP wasn't doing it for me anymore. Maybe it was because I have no interest in learning PHP and setting up a local environment to develop for a WordPress instance just seemed to be cumbersome. The other option is just to keep changing things in my production instance. And then the updates and plugins! It was just not what I wanted anymore. Enter Cosmic JS, a headless CMS.

TL;DR:

Jamie Introcaso's Gatsby Blog
From WordPress to JAMstack
WordPress Importer Extension

I was perusing through Medium one day at the posts that it had curated for me, and I saw an article describing how easy it was to move from a WordPress site to a website powered by Cosmic JS. The steps outlined in the article were really simple and they have an extension that will pull over your existing WordPress posts! The example they moved to was a React blog powered by Gatsby. I had no experience with either one of them, but I know that they are all the rage right now! I figured that having a little bit of experience with them definitely could not hurt me. And the great thing about Cosmic JS is that at the end of the day, it serves up my blog posts like an API. So I can choose my delivery method to be whatever I want.



The article, which was written by one of the co-founders of Cosmic JS, laid out in easy steps how to move the site over and import all your posts using an importer tool. There is a GitHub repo which has the template for the front-end of the app. Once you have created your "bucket" in the Cosmic JS web interface, you can wire up the front end to the API to retrieve your posts that you have imported into your bucket. 

There is also an importer extension that will pull all your posts from your WordPress instance. It works like a champ, with a couple of caveats. The dates used for the posts after the import puts the posts in reverse order (i.e. Your most recent post shows as the earliest post.). This is probably something that I will fix in the GraphQL query. The other is not evident until you set up the new DNS settings on your domain. All of my images used my domain name in the link and since that is not pointing to my WordPress instance, they are broken now. I don't have a great deal of posts so it is more tedious for me to go through all the posts and put the pictures back in the posts. I could not imagine having to do that for a large number of posts!


I had a couple of hiccups setting this up, due to me working late at night on this and not properly reading the docs. But when I reached out to the folks with questions or issues, they got right back to me about what I had missed and worked with me to make sure that I was able to figure it out. I cannot speak highly enough about the level of support that I had from them. 

After getting the new blog to run locally, it was time to put it out into the world! The article suggested using Netlify to host the app. You may not have heard of Netlify yet, but you probably have heard the term JAMstack which was coined by the CEO of Netlify. Setting up my app for Netlify was super simple. If you use a git provider (I personally uploaded my app to a private GitHub repo), you can hook into the Netlify process to have a CI/CD pipeline anytime you push to the master branch of your repo. They also walk you through setting up your domain to point at your site running on their server as well as handle getting you an SSL cert using Let's Encrypt! And this was great, because my blog did not have an SSL cert before. I mean, I was going to write an article about installing one on my WordPress instance, but I think this worked out better.  

Conclusion

So far, I am really happy with this new setup for my blog. It is simple and open enough to allow me to customize it to my heart's content. I am sure that there are things that I will miss from the WordPress controls and admin panel. But I will get to learn about Gatsby and React, and I can already see me using Cosmic JS for another project that I have in mind! If you have any comments or questions about building apps with Cosmic JS, reach out to us on Twitter and join the conversation on Slack.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


Thanks to all who attended our first webinar / AMA last week. There was some great engagement and questions that helped steer the screen-share webinar for users in the Cosmic Community as well as first-time visitors to the system. If you missed it, check out the video and attend our next one.
In this tutorial, Cosmic JS co-founder Tony Spiro shows you how to quickly and easily add dynamic content to your Next.js app.
Website built using the Next.js Website Boilerplate. Fully responsive down to mobile, SEO ready, includes a contact form and full site search.
E-commerce app built with Gatsby JS and Cosmic JS app. Here Cosmic JS is used as a database as well as a server.
In this tutorial, I'm going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic JS and deploy it to Netlify.
In this video, Cosmic JS co-founder Tony Spiro takes you on a tour of the new Cosmic CLI which allows you to do all of the awesome things you can with the Cosmic JS API, from the comfort of your command line interface.