Crash Course Tutorial: Building A Website Using No-Code Tools And A Headless CMS

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.
Storyblok for Content Teams – Website Screenshot

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.

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.

One of many articles comparing No-Code with Headless CMSs

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.

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

Storybloks community edition is meant for small businesses, blog websites, and freelancers.

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.

Bubble comes with an API Connector plugin free of charge.

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.

The repeating component refers to the data source “Storyblok API”

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.

Using Workflows in Bubble, you can send data between pages.

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

In Bubble there is a feature to read the URL slug from a 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.

Screenshot of my blog posts in Storyblok and the Bubble page showing the blog posts browseable

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.

Screenshot – Storyblok editor on the left, my Bubble page showing the blog post

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.

A potential roadmap for that project

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.

The best content, tips, and tools for curious creators. Twice a month.