Ghosting Ghost for Storyblok CMS

Having Ghost CMS for almost one and a half years, I had my fair share of experiences on how it works starting with Heroku as a hosting service to having my own cloud server (Droplet) with DigitalOcean.

I have also tried out different headless CMS such as Contentful, Strapi, Sanity, Prismic, WordPress, and Webflow - leading me to pick Storyblok as my new CMS.

This will be an extensive article so feel free to jump wherever suits you:

• How it started

• What is a Headless CMS?

• Retrieving all the pieces

• Researching and Testing

• Aligning to my needs

• Results

How it started

On November of 2022, I wanted to check on my personal website after seven months of not touching it after finalising my degree, graduating, job-hunting, long process of turning my student to graduate working 485 visa, and getting a hang on my first full-time job as a Digital Technologist at the University of Newcastle for the School of Architecture and Built Environment because I will be going to my first, international research conference! It is an interactive media and computer graphics conference called SIGGRAPH at Daegu, Korea for a week in December as a work volunteer. It is one of the largest conferences on emerging technologies, creative industries, and computer graphics, which is why I wanted to make sure I prepared my details to get to know people and network at the best place.

I clicked on one of my blog posts, seeing the broken image icons, I thought "Maybe I should just refresh again", refreshed once, twice, thrice - nothing has changed; all the images and videos are unable to load.

Then I thought it must do something with my cloud server because the images might be stored there. After messing around with my Ubuntu server in DigitalOcean, I was able to download the media folder, and once I opened it, only a few images were seen.

I was getting more anxious because I thought I was done with my website, I thought it was future-proof, I did not want to spend so much time fixing everything again. So, when I tracked my images down, their URLs directs to a Cloudinary site. I submitted a help ticket to Cloudinary to help finding the source for me, they found it and asked me to create an account. Once done, I only open to see my Cloudinary images gone.

Little did I know that my five years' worth of media content disappeared. All because I transferred from Heroku deployed with the Ghost CMS to a cloud-based server from DigitalOcean. Apparently, if you delete your Heroku app, it will disconnect any integrations apps, like mine having Cloudinary (a cloud media storage). According to Cloudinary rules, if the cloud storage has not been used or connected to an account for a month, it will delete everything. I felt betrayed not knowing this is going to happen, would have been nice if Heroku and Cloudinary warned about their policies to me, so I didn't have to track back all my media files everywhere.

I had to move from Heroku to a cloud CPU server because Heroku's Free Plan apps tend to fall 'asleep' if not used and once it is called, it takes like a million years for it to open back up. Whenever someone tried to visit my website and it has not been visited for a while, it will always come back with a 404-error page. I only alternative was to adding timer in-between loading times so the 404 page would not show up, but that would already be more than ten secs - giving users time to leave before the page even loads. While having my own cloud CPU, its awake 24/7 but you will need to learn how to set and maintain your own server and its pricey.

I am sure you would be asking why I even used Ghost CMS in the first place. Back in 2021, I mentioned in my previous blog (Through and Through) about how I discovered the concept of JAMStack and Headless CMS through a dev email and it includes a YouTube tutorial by @codedamn called "Build a Blog with Next.js & Ghost," of course I am excited trying out new stuff! Learning Node.js and new languages and frameworks like TypeScript, Next.js, SCSS and Ghost API. And from there on, I wanted to make that project my blog because it was 'free,’ and it took me so long to make it look like a decent personal website but was still proud of it.

From there on, I realised I made mistakes along the way such as not researching enough to know if my CMS is good for my needs and future, alternatives to cloud CPUs since they are expensive, and having a mess of media technologies jumbled all into my website (some image URLs point to my old WordPress and Wix website). But I have no regrets on whatever I learned and weeks of non-ending bugs and errors here and there, that taught me patience.

While starting my full-time job and preparing for the trip to Korea, I decided I need to renew my website before December 5.

What is Headless CMS?

Before you have even looked through my article, you might have already seen Contentful, Storyblok, and Sanity do a better job of explaining who in the world decided to add ‘headless’ with ‘CMS’ (Content Management System). They might as well just use the word ‘divorced’ knowing how we collectively do not vibe with WordPress.

I will just explain the concept in my own words and how it makes sense to me.

Headless CMS is your back-end ‘back-stage’ of where all your content is prepared separated from your front-end ‘stage’ to showcase to the world. Since your ‘back-stage’ already has all the props, costumes, make-ups, lightings, sound system, and video system all in place (this can be blogs, magazines, pages, sections, navigation, etc.), they can perform in different ‘stages’ in various locations (think like phones, smartwatches, and even VR/AR).

Is a Headless CMS a website builder?

Nope.

But what Headless CMS is? I will be quoting from Ronak Ganatra on his stand,

“Although in various cases it may not even really be a ‘CMS’ at all. It is more accurately a content database, or a content backend, or a content API, or a hosted backend, or backend as a service, but not necessarily a “Content Management System” since they can do more than fulfill a CMS use case.”

Retrieving all the pieces

The first step was to retrieve all my media files lost from Cloudinary. I went through each post to check which images disappeared. Some of the remaining images I could still access were from the 'local' Ghost CMS in DigitalOcean, my old WordPress and Wix website. But 19 out of 34 posts has missing pictures; 55% in total chaos.

To stop paying DigitalOcean and to delete my server, I moved my Ghost posts content into Sanity since I was testing its CMS (I should have placed them all in a word document, I'll be doing that after posting this article). I also combine all my content back in my old Wix (2018) and WordPress (2019-2020) website.

Finally, I needed to savage all my media files in different places such as my old Wix, WordPress, and Blogger website, Ghost CMS local files, my Samsung A20 phone, and my trusty laptop.

Voila.

I was able to finally retrieve all the photos I uploaded (thank you past me for being a hoarder). I have looked up other places where I could host my images but my research points me back to Cloudinary. Even after experiencing a bad taste with losing my pictures from them, I still decided to make it my images/video hub just because I know it wasn’t entirely their fault for Heroku not informing things.

Researching and Testing

While I was trying to retrieve all my content and media, I was also researching all kinds of CMS out there, including how I tested each one of them.

• Ghost - I thought of sticking with Ghost, but I ghosted it once I learned that we must pay for hosting and there are no content blocks that you can create yourself like Sanity since its focus is on blogging and subscription. It was a good starter CMS since the newsletters and membership subscriptions are great features and was fine just having posts but now, I want to expand showing my portfolio, works, art tutorials in my website and it's difficult to filter those out in Ghost.

• Contentful - easy to set up, media manager, wide range of fields, not enough customisation, pricey cost to scale with less amount of space ($400/month for team plan), especially in the free plan, and difficulty in Cloudinary integration.

• Strapi - it takes long to set-up, highly customisable but self-hosted.

• Webflow - this is the Wix + SquareSpace on drugs; the higher end of web designing if you want to get your hands dirty and getting bored of other website builders. I was considering this at first for its amazing web building editor, learning resources, and documentation but I decided not to push through when I saw the pricing plan being a bit pricey for my budget and lack of CMS storage space for my blogging. I also wanted to still learn how to code emerging web technologies, so I'll use Webflow for other projects fitting the requirements instead.

• Sanity - cloud-hosted, long set-up but highly customisable, Cloudinary integration is a bit wacky from what I remembered, you can customise your content model by code, and live-preview. I personally don’t like the schema and it's almost like a Backend-as-a-service.

• Prismic - love the Slice tools, ability to use GraphQL and REST API but data validation is not available, and features are not mature yet, does not have delete button for slices, not updated to Next.js 13, and slower than usual during development.

• Storyblok - the best mix of what I wanted from Sanity (live preview and content types) + Prismic (slices), easy to set up, and LOVE its visual editor - totally what I envisioned what a CMS should be.

Aligning to my needs

Second step is to decide what are my needs and align them to the CMS that is the closest or the one! I needed a CMS that is future-proof, can integrate with Cloudinary, easy to set up, building blocks, live preview, visual editor, creating content types/block and not as code (like Sanity), good amount of scalability for free plan. It was difficult for me because I was deciding between Sanity and Prismic until I discovered Storyblok, and it helped saved my blood, sweat, and pixels!

Things I need in my website.

• Focus on full-control, customisation, and creating content without accessing my code every time, while having the flexibility of designing my website and pay less/none for the services (I’m that thrifty).

• I rather depend on a cloud CMS than hosting my own server to save time for content creation from maintenance.

Then, it has taken me a month to transfer everything, including refining and optimising my code. But overall, it took just a week to migrate my content, media, and tech stack after full-time work hours.

 Results

Left picture showing the previous website home design, right picture showing the current (2023) website home design

https://github.com/amazellia/apdv-dev - you can check out my website code here!

Resources

Not all Headless CMS are made equal (ronakganatra.com) - love this article, I totally agree with him in terms of how Headless CMS is being marketed vs. how it works is super different.