The Baserow API offers many possibilities for creating innovative solutions. With the simplicity of a spreadsheet and the power of a database, Baserow helps you organize your data effectively. The best part is, you don’t need to write any code to use its extensibility.
In some cases, the native Webflow CMS may not have the advanced features you need. That’s where Baserow comes in. It caters to both technical and non-technical users in various departments like HR, Operations, and Software Engineering.
With over 60 templates available, you can quickly enhance your website, CRM, CMS, and even build applications. Check out our templates here to get started.
What we’ll do
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
A piece of content has many parts, like the author, image, description, and text. Content management systems (CMS) store all this information.
A headless CMS stores and organizes content in one place (back-end). This content is then sent to an application, mobile app, or website (front-end). In simple terms, a “headless CMS” means the front-end and back-end are handled by different tools - Decoupled architecture. This allows the content to be used across multiple channels.
Decoupled architecture means the front end and back end are separate but connected through APIs, providing important components for content management.
With a headless CMS, you can manage content in a Baserow database (backend) and send it to any front-end platform using APIs. You can easily use the Baserow API to display the content stored in the CMS on third-party software like Webflow or WordPress. Since your data is stored independently in a Baserow database, you can switch between any front-end mobile app or website. This gives you more flexibility in displaying content 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. (Both Baserow Self-Hosted and Baserow Cloud will work.) 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
Baserow, like other CMS platforms, offers a variety of pre-designed templates that you can easily customize to fit your specific needs. These templates enable you to efficiently and swiftly manage your data. To gain further insight into the functionality of these templates, you can explore more about them here.
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.
💡 If you need to create or update an item based on its existence in the Webflow CMS, follow these steps:
- Create an action to search the CMS for existing items in the database.
- Add a router to handle different scenarios and process each route separately.
- Specify filter conditions to determine which data can pass through each module.
- If the item exists, update it.
- If the item doesn’t exist, create a new one.
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
That’s it! This demonstrates how to use Baserow to create a custom content management system (CMS). When 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.
This concludes the tutorial on how to 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
