How to Build a Custom CMS with Baserow and Webflow

There are many possibilities available when using Baserow API to build innovative solutions. Baserow works as simple as a spreadsheet but gives you the power of a database to organise your data. We offer extensibility without writing a single line of code.

Very often, the features you need for your operations are more complex than what can be handled using the native Webflow CMS.

Baserow is designed for technical and non-technical users from any department — from HR and Operations to Software engineering. With one of our 60+ templates, you can quickly power your website, customer relationship management (CRM), content management system (CMS), and build applications.

What we will build

In this tutorial, we will cover how you can build a flexible stack for managing blog content.

• build a headless CMS on Baserow
• display blog posts on Webflow or another front-end app
• link the applications with API instead of Webflow’s native CMS

Why you should build a headless CMS in Baserow

There are many parts that make up a piece of content. For example, if you’re writing a blog post, you need to document information such as the author, featured image, meta description, publish date, body text, etc. Content management systems (CMS) can be used to store all that data.

The primary function of a headless CMS is to store and organise your content in a central location (back-end). This content is then deployed to an application, mobile app, or website (front-end). Simply put, a “headless CMS” system is when the frontend and backend are handled by different tools - Decoupled architecture. As a result, the content is infinitely reusable across multiple channels.

Decoupled architecture means that the front end is independent of the back end, yet both are integrated via APIs and independently provide key components for your content management.

With a headless CMS, you can manage content in a Baserow database (backend) and deploy it to any front-end platform using APIs. You can easily use Baserow API to transfer the content stored in the CMS for fluid display across third-party software, like Webflow or WordPress. Because your data is stored independently in a Baserow database, you can transition between any front-end mobile app or website. This provides greater flexibility in the content display while managing data in Baserow.

With Baserow you can:

✅  Manage large volumes of data.

✅  Collaborate on data between teams in real time.

✅  Install on your own server and own your data.

✅  Thrive for better data governance.

✅  Easily integrate with other tools because of our API-first approach.

✅  Extend by building plugins.

Let’s get into how to build a custom CMS for your blog.

1. Build the database in Baserow

The first step is to create a Baserow account in either the self-hosted or hosted baserow.io SaaS versions. After logging in to Baserow, you’ll see the Dashboard page, which gives you a snapshot of all your workspaces and databases.

Click the ‘+ Create workspace’ button to create your workspace within which you can store multiple databases:

Baserow allows for data collaboration across workspaces.

2. Add a template

Like most CMS platforms, Baserow has a selection of predesigned templates you can quickly customize according to your use case. You can manage your data much more quickly and efficiently thanks to these templates. Learn more about templates.

Choose the workspace into which the template will be installed. Click on ‘+ Create new’ and select ‘From template’:

Baserow organizes all your data into tables that are easy to create, collaborate on and look through. In this Blog Post management database, we have three tables to organize our content:

• Posts
• Team
• Distribution channels

Now, you can start adding content to your database.

3. Populate the tables with content

In the Posts table, you’ll see we created two Link to table field types - Authors and Published location - that get data from the Team and Distribution channels tables respectively. Read our guide to learn more about Link to table field types.

Start by populating the Team table with details of the editorial team and the distribution channels where your posts are published.

In the Posts table, add all the information for new pieces of content. Link each new post to a Team and a Distribution channel from the other two tables as you fill in the details.

To create slugs from the post titles to create the blog URL, hyphenate the titles and lowercase your URLs with the formula: lower(replace(field('*Post Title*'), " ", "-"))

For this tutorial, we’ve highlighted the blog post by Jane Appleseed and Drew Murray (authors) with the post title ‘How Cloudron Makes Self-Hosting Easier’:

Add all your content to the tables. Your Baserow database is now configured as a headless CMS!

Now let’s proceed to connect our content to a frontend display to get data from the CMS.

4. Add a site to your Webflow account

For this tutorial, we will use Webflow as our front end to display the data stored in Baserow.

Create a new Webflow site by clicking the button in the dashboard.

You can either start with a blank site and design and develop from scratch, or you can start with a template. For this tutorial, we’ll work with Writeology X, a free blog Membership Webflow Template:

Select this template and add it to your site.

Next, click on the data storage icon on the left sidebar to open up Webflow’s CMS panel. Create CMS collections of Posts, Teams, and Distribution channels similar to your Baserow database.

A Webflow CMS collection is similar to a Baserow database where content can be stored and referenced dynamically.

Create a custom field for each type of content that sync with the fields in each Baserow table.

If you’re using a template, remember to delete the default data before you populate your content.

Here’s what we have so far - a Webflow blog CMS collection to receive content and a Baserow CMS with your content in it. Now let’s integrate both applications.

5. Sync Baserow and Webflow with Make (formerly Integromat)

There are several ways to sync Baserow and Webflow, but the simplest is to use an integration tool such as Zapier or Make (formerly Integromat). This setup can be done in a matter of minutes and saves the stress of having to manually trigger an API.

You can have a trigger automatically keep the Webflow CMS in sync whenever a collaborator adds, modifies, or deletes a database CMS item.

To get started, create a new Make account or log into your existing account. Create a new Make (Integromat) scenario.

A Make scenario is comprised of a series of modules that indicate how data should be transferred and transformed between apps/services:

Create a Baserow connection

Next, create a module to load the code in your scenario. Select the app that will trigger your scenario. Click the “+” button and select Baserow:

Now choose one of the triggers from the list. In this case, select the Watch Created Rows trigger:

Next, you will need to create a Baserow connection or select one of your previously configured connections for the module.

To add a new connection, click on “Add” and then enter your Baserow database token gotten from your account page. Your Baserow API token can be found by clicking on your account in the top left corner → Settings → API tokens.

You can use database tokens to authenticate with the REST API endpoints where you can create, read, update and delete rows. Learn more about database tokens.

Next, enter your Baserow table ID. You can find the ID by clicking on the three dots next to the table. It’s the number between brackets.

You can now test run using the “Run Once” button at the bottom of the page.

Configure Webflow Module

Click the plus (+) button to add another module. Select Webflow, then choose the Create an item action.

Click ‘add’ to create a connection to Webflow and select your Site ID, Collection ID, and map the fields from the Posts table. You can also configure if the item should be published on the live site.

Tip 💡If you’re dealing with a use case create or update an item depending on if it exists in the Webflow CMS already, first create an action to search the CMS against the items in the database. Add a router to divide the scenarios into multiple routes and process each route differently. Specify the filter conditions to define which data is permitted to pass through a specific module. If the item exists, update the item; if it doesn’t exist, create a new item.

You can now map Baserow to your Webflow CMS and set up a continuous sync.

To test it, add a new row in Baserow, tap the “Run Once” button in Make, then check your Webflow CMS for the new record.

Schedule a Make Scenario

You have control over when and how frequently an activated scenario runs. You want to run this Make (Integromat) scenario every time the Baserow table changes, so you can format the content, authenticate it, and send it to Webflow via their API.

To change the Run Scenario, click the clock icon that appears over the module. Set the time it should run. For this tutorial, we will set the time interval between scenarios to 60 minutes (every hour).

Finally, for the scenario, enable scheduling. The scenario will not run automatically unless it is enabled, regardless of the scheduling settings.

When you connect the tools, any new content you add to the Baserow database will be automatically sent to your Webflow front end.

Key takeaways

So there you have it. That demonstrates how to use Baserow to create a custom content management system (CMS). Whenever you create or modify content in the CMS, it instantly updates all platforms where it is referenced.

You can also submit Webflow forms to your custom Backend.

That concludes this tutorial on how you can build a flexible stack for managing blog content. With Baserow, you can collaborate in real-time, publish forms, and integrate with other tools.

What’s your story? Tell us how you use Baserow