Introduction
Headless CMSs like Storyblok are growing by leaps and bounds. So do No-Code platforms like Bubble.
I wanted to learn how these tools can be used to create a personal blog website without writing code.
What is a headless CMS?
A headless CMS comes without a “head” – the public-facing frontend – the site your potential visitors see.
Think of it this way: Imagine a Content Management backend, like WordPress, but there are no website templates to install. Furthermore, the CMS does not dictate how the website or frontend should be created to work with the CMS.
The content in a headless CMS is accessed via an API (Application Programming Interface in Wikipedia). This usually means a marketer without a developer can’t get a site off the ground.
The CMS, in that case, is used to work on the administration of your site and all aspects of your content. You manage permissions, media assets, your content workflows, and everything you would expect from a modern CMS. And a developer configures the headless CMS to their liking (components, content types, security aspects, and much more).
The front end presenting your content is not managed within the headless CMS (it is de-coupled, hence the term “headless”). Developers can use whatever framework and tooling they want to build content experiences for any platform.
So what is the benefit of using a headless CMS if I got no readymade templates with it?
What might look like a weakness to marketers (no theme or template provided by the headless CMS) is a huge benefit.
Benefits of a headless CMS
- Devs can build frontends of any kind: Websites, Mobile apps, an app for a Smart TV, an intranet website that shows content from your CMS, a smartwatch, or a VR glasses app, …
- Devs do not need to learn the inner workings of a new CMS – they can use the frontend technology they already know and connect to Storyblok via API.
- One CMS: Content teams do not have to use several CMSs. Content for a website, eCommerce, an app, or an intranet website, … all done within the headless CMS.
- Performance: Headless CMSs are fast – creating, editing, and publishing content feels on a new level
- A headless CMS like Storyblok has a visual editor that still can show an actual preview of your site – you get a what you see is what you get editing experience.
- If new platforms or channels emerge, your developers can create new front ends or apps for that channels. You do not need to switch your CMS or migrate content.
- Want to read a complete introduction to headless CMS – check Storybloks Headless CMS explained in 5 minutes blog post.
What are No-Code Tools?
No-Code promises that you can create apps/tools/websites without writing code.
A project that usually requires a developer can be tackled without hiring one.
Instead of writing code, you create the design/code of your app with an intuitive editing tool.
This could be a recipe app, a website directory for vegan restaurants, or a fitness app for tracking workouts.
An example of such a No-Code app builder would be Adalo. I used the No-Code app builder to create a mobile app that features content from our newsletter. Using Adalo, you can create Android/iOS apps without knowing how to code.
Adalo is just one example. No-Code app builders/platforms are booming. The market is vast, and thousands of companies are tackling it.
Another very popular No-Code app builder is Bubble. Over 2mio people use Bubble, and many agencies focus on building solutions using the app builder.
- Browse the Bubble showcase page to see what people create with it
Why combine No-Code Tools and Headless CMS?
As you just read in the introduction to headless CMS, it’s not easy to get started with it from a marketer’s perspective without having access to engineering resources.
Now the nature of No-Code tools makes it possible to create a website or app for a headless CMS without needing a developer.
Why would anyone use No-Code tools with a headless:
Learn about & understand how headless CMSs *really* work
The headless CMS market is booming and won’t go away. Understanding how these new types of CMSs work is a skill digital marketers should have in 2022.
No resources for developers
If you got no developer team or budget to hire one on your hand, you could either learn to code or try a No-Code tool. And option 2 is for sure the easier way to do it.
Prototype your MVP
If you think about embarking on a more significant project using a headless CMS, creating an MVP using a No-Code tool in combination with your headless CMS might be a good idea.
Gain the benefits of a headless CMS
Usually, websites and apps showing content from a headless CMS are blazingly fast and positively impact your overall site’s performance (incl. SEO). That is just one benefit. But there are dozens more for marketers, content teams, and developers.
Create internal apps or intranet websites
Imagine a scenario where your content should end not only on your public website but also on an intranet website, in a newsletter, etc. You could use Bubble to create that additional app beyond your core use cases.
A crash course guide: How to create a website using a Headless CMS and a No-Code app builder
How exactly could that work? Combining a No-Code tool and a Headless CMS?
I tried to find out myself. At first, I was puzzled because I only found blog posts and articles comparing these tools but nothing on how to combine them.
So I decided to try it out.
Bubble was on my list of tools to take for deeper evaluation, and I played around with Storyblok and liked how intuitive it supports the content creation process.
The goal of this project was to get to a working MVP.
I wanted to create a website that shows my blog post content stored in Storyblok. Bubble is the tool I chose to create the website that does that.
Here is what I did. This is by no means a fully detailed tutorial that outlines every step; more like a crash course tutorial to give you an idea of how it works.
- I might create a course that explains every detail step by step at a later time. Subscribe to my newsletter to follow my journey.
Create a Storyblok account and add content
Storyblok provides a free community edition, perfect for getting started for exploring their product or building your small business/startup website.
How? Browse to their pricing page. Scroll down and click “Create free account”.
Understanding the basics of Storyblok
Projects in Storyblok are organized in spaces. For my MVP, I created a space called Fresh van Root.
Within that space, I have created a block group called “blogpost.” And this group has all the usual elements a blog post has. (title, image, intro, body text, and so on)
After creating your block group, you can start adding content. For that, I browse to Content and click Create new.
Now I added some content via the visual editor. And clicked Publish. I have added some more posts after that.
After having some demo content in my Storyblok account, I went to Bubble.
Set Up your Bubble App
After creating a Bubble account, I created a new blank app project.
Bubble comes with an API connector plugin. That is crucial for this project, as it’s the common way to retrieve content from a headless CMS.
You can choose whatever No-Code app builder you want, but to connect it to a headless CMS, you will need a way to connect to APIs.
I connected my Bubble app with my Storyblok account in the Plugins section using the API keys shown in the CMS. To properly test the connection, you should create one blog post in your Storyblok space.
Building the MVP in Bubble
My MVP website has two pages: The homepage shows the list of blog posts. And a blog post single page that shows the content of one specific blog post.
I placed a repeating component on the blog homepage that renders my blog posts’ headline and intro text.
I choose the Storyblok API Call as the data source within this repeating component. This gets the list of stories (my blog posts) from my Storyblok account.
The repeating component is used to show the title of the blog post, the feature image, and the intro text.
When someone clicks on “Read post” the user gets to the blog post page. In that case, I pass the URL slug to the blog single page. This is necessary to make an API call on the blog single page for that specific blog post.
The feature in Bubble to do this is called Workflow.
Now, I need a design for the blog post single page.
On the blog single post page, I added a group element. And for that group element, I set the API call for a blog post entry as a data source. As you can see in the screenshot below, I selected “Get path from page URL.”
All the elements from my blog post are within the group element. A heading, the featured image, the intro text, the content body text, and so on. Each of these elements is mapped to one of the fields in my Storyblok blog content object.
Bubble is a feature-rich No-Code builder that requires dedicated time to learn. But after using it for about 10 hours, I managed to get the first version of my blog website using headless CMS Storyblok up and running.
The Result
Now, let’s preview the result in Bubble.
In the screenshot above, you can see my Storyblok blog content in the left window, rendered on my Bubble website in the right window. That is my blog homepage.
Let’s browse the blog single page.
In the left window on the screenshot, you can see the blog post open in Storyblok and the blog post rendered on my Bubble website on the right.
The features in Bubble I used to get the MVP done are
- Design – repeating components
- Pages – Index page for blog post list and a blog page for showing one blog post
- Plugins – Bubbles API Connector
Video Demo
I recorded this video demo that shows the MVP in action.
A potential future for this project
Going forward, here is what I think about doing next after my MVP is done in the coming months.
About my time investment: Overall, I invested about 20 hours from my first log-in to Storyblok and Bubble, to getting my MVP ready. While this is far away from being an easy endeavor if you are coming from WordPress, I think it’s something that will get broader adopted as a use case.
Conclusion
My MVP proved that combining No-Code tools with a headless CMS is possible. I do not see this combination as something that replaces homegrown or small business websites yet (for example, projects that are done with WordPress).
But as combining these tools gets more accessible, I can imagine that agencies or startups focus on making the benefits of a headless CMS available to a larger audience.
The headless CMS and No-Code market is growing, and a massive dynamic in both fields. Marketers should be prepared to have a basic understanding of headless CMSs. It might come up in your next relaunch meeting, or your dev is already exploring new CMSs.
Remember that Storyblok is a product for developers and content/marketing teams; what I showed here is how to create a rough prototype using its very basic features. That also applies to Bubble. I used maybe 3% of the available feature set in Bubble/Storyblok.
Are you also interested in combining No-Code tools with headless CMSs? Let’s connect on Twitter or LinkedIn. And subscribe to my newsletter to stay updated.
Full disclosure: I work as an external marketing consultant for Storyblok. But this project/blog post is not a paid gig. My curiosity to better understand headless CMSs led to exploring how to combine Storyblok and Bubble.