How to Use Notion as a CMS for Your Webflow Site [Tutorial]
One of the greatest things about Notion is how easy it is to build on it.
With only a few clicks, slashes and embeds, you can set up a page and link it to someone in usually less than an hour.
Its versatility and functionality is one of the primary reasons why students, makers, and startups have made it one of their primary tools to create beautiful dashboards, databases, and internal wikis.
Moreover, with the help of products like Super or Fruition you are even able to attach a custom domain to any of your pages, creating official websites for personal or business use.
I myself have created a few Notion pages, and loved how accessible and convenient it is to add and edit content.
Even though it's extremely powerful, the biggest problem that I've heard of is that, at the end of the day, a Notion website still looks, well, like a Notion website.
This translates into many visual limitations and drawbacks, such as:
Not being SEO-friendly
Lack of best-in-class performance when it comes to technical things like load speed
These are two of the main reasons why lots of people turn to Webflow to create more stunning web experiences.
So I’ve asked myself - Is there a way we can take advantage of Notion's flexibility while still creating a powerful front-end experience using something like Webflow?
With the Notion API and Make, this seems like the beginning of a dream come true, and I intend to use this post to explore how to make this happen.
In this use case, I will be giving you step-by-step instructions to create your first Webflow website that is powered by Notion as your CMS.
I will also be building my own website alongside you as we figure out how to make this magic happen!
Step 1: Define the goal and intention of the website
The first step in the process is determining what kind of website you're looking to create.
For example, if you are building a landing page that doesn't require you to add or update content often, then it might be a good idea to start directly with a tool like Carrd or Webflow.
If you are after a directory or marketplace, I would recommend starting in Softr or Pory.
But if you're envisioning a website where you frequently update content - think blog posts, projects, pictures, or even status updates - then you're in the right place.
For my own project, I've picked up a habit of drawing abstract art every day (more doodle than art, but art is up to the eye of the beholder!), and my goal is to publish one image every day and have it show up on a website.
Now that you've got your vision down, let's get building.
Step 2: Configuring Notion
The first step in this setup is to create a new database in Notion, which I’ll call "Notion CMS."
This database will determine the dynamic content you want to include in your website.
You can also use an existing database that you already have, but please read on to make sure you capture all the necessary configurations to make this automation work.
Next, add the following properties to your database:
The following properties are required:
Created Time: This will be used to determine when you add a new content item
Last Updated Time: To determine when you make any changes or edits to a content item
Webflow Item ID: Use a "Text" type property. We will use this later to determine which item to relate to in Webflow
Publish?: Use a "Checkbox" type property. We will use this to determine when a Notion item is ready to be pushed into Webflow
At the same time, I also recommend you to include the properties below:
Image: Use the "URL" type property instead of "Files & media." More on this later
Text: Include as many text properties as you want. You will need a separate text field if you need a title and body/description
Tags: You can also include a multi-select field if you plan to do some additional features around categorizing or filtering your website
All of the properties will be used to determine the content that gets updated on our main website, so feel free to add additional ones as you find necessary for your own website. Here's how I configured my database.
Lastly, make sure you go to your "Sharing" settings and turn on "Share to Web."
This will make sure Make can connect to it in the next step.
Step 3: Configuring Webflow
Now that we've completed our Notion setup, it's time to set up our main Webflow website as well (worth noting, you will not need a paid plan for this).
In the case you are not that familiar with Webflow or have never built a website with it, don't worry, I'll help you get started.
My favorite way to start with Webflow is by visiting the clonable showcase section.
Here, you can browse for inspiration, peek behind the hood to see how different builds are done, and even clone one to use.
For this particular project I recommend starting with templates that have "CMS Collections" created, and that also feature a simple layout. Here's two I would recommend starting with:
With pictures (the one I end up using)
Once you’ve picked and cloned a template, the first step is to make sure that the "CMS Collection" has custom fields that match the ones we've created in Notion during step 1 of this use case.
Once that’s done, we're ready to start building the automation in Make!
Step 4: Creating the first Make scenario
Once you are in your Make dashboard, create a new scenario, select the Notion app and choose the “Watch database items” Notion module.
Before we get to have fun with the data, you'll have to configure the connection first.
Click on "Add" and follow the instructions. In the module’s configuration box, make sure you select the "Notion CMS" database/page we created before!
Once the connection is established, go back to Notion to verify that it's been connected to the database you created.
Once verified, return to the Notion module in Make and set the trigger to when the "By the updated time" changes. Then, increase the limit to a higher number - say, 10.
Once you are done configuring the module, click "Ok".
Now, we are ready to add the Webflow module as the next step.
Add another module to your Make scenario, search for the Webflow app, and select the "Create Item" module.
Just like before, start by adding your webflow connection in the module’s configuration box.
Make sure you select from the correct Webflow site that you've created in Step 3!
Next, select the "Site ID" and "Collection ID" from the drop-down.
Once that's completed, you should see a list of fields in "CMS Collections" that we've created in the previous step.
Now, it's time to map the data from Notion to Webflow!
Click on each of the blank spaces and select from the list of data you want to populate into Webflow.
All of the data you're looking for will be nested either in the "Property" array, or under "Properties Values”.
Let's do one together by mapping the title of your Notion item into Webflow. From the Notion module, select Properties Value -> Name -> Text -> Content.
To find out if this is working, go ahead and type in some test data in your Notion database.
Then, run the Make automation once. After doing this, you should see an item created in Webflow.
If you're happy with it, make sure you select "Yes" under “Live”. This will ensure what is completed in Notion automatically gets published in Webflow.
To finish, we will add the “Update a Database Item" Notion module to our Make scenario.
For the "Database Item ID", make sure you map it to the original one we had from our trigger module (the first module in your scenario).
And under "Webflow Item ID", we will map to the "Item ID" from the Webflow module. See the image below for reference.
Before we complete this first scenario, one last thing: Create a filter between the first Notion module and Webflow module.
Set the condition of the filter as "Checkbox" equal to "true".
This will ensure that we only process items from Notion that are ready to be published.
Step 5: Creating the second Make scenario
The next scenario will allow you to automatically update your Webflow content just by using Notion.
So, go ahead and create a new scenario, and add the “Watch database items” module. Configure it exactly like we did in our previous scenario.
Next, add the "Update Item" Webflow module, and map the "Item" to the "Webflow Item ID" property.
Then, proceed to map the rest of the Notion properties to Webflow just like we've done before.
And that's it!
Now, whenever you make any changes in Notion, it will automatically make changes to Webflow as well.
How neat is that?
Additional advanced steps
If you are thinking about dynamically adding images to your Webflow website, please read on.
Since Notion just released their API a little over 3 months ago and it's still in Beta, there are a few restrictions to keep in mind (for the full API documentation of limitations, see here).
One of the things that's relevant to us is that Notion's API does not include an "Image" type property. So, in order to have any images included in the Webflow site, you need to use a "URL" type property in your Notion database.
If you're pulling an image from the web (for example, via Google Images or Unsplash), you can grab the URL through "Copy Image Address”.
If, however, you are using images via a file upload, here are two recommended options:
1. Dropbox
If you're familiar with Google Drive, then you should be familiar with how to create a "shared" link on Dropbox for others to view or even download from.
However, this shared link does not allow us to create an image in a format that can also be used in Webflow.
In order to create a usable image url, you need to place the "dl=0" at the end of your Dropbox generated share link with "raw=1".
For reference, here is a screenshot.
To convert it to a format that Webflow recognizes, change it to this.
By the way, you can do all of this in Make dynamically using the Dropbox module along with the Replace( ) text function.
2. Add a module that can generate a image URL for you
Another method is to utilize a function to create an image URL as part of the automation workflow.
One common way to do this is to use one of Make’s social media modules (Instagram, Twitter, or Reddit).
Whenever you “post” something with an image as an attachment to these sites via Make, it will help generate an image URL.
As an example, I will show you how you can do this with Reddit.
In step 1, I mentioned that for the purpose of this project, I created a website that is updated daily with drawings of abstract art.
So for my automation workflow, when I post in the subreddit /AbstractArt), it also creates a new database item in Notion and attaches the Reddit URL of the image to it, which subsequently gets published on Webflow.
Conclusion
You've made it all the way through! Give yourself a big pat in the back: You have officially built a custom Notion CMS for your Webflow website.
By using Make, you are able to create a custom workflow that allows you to do things in a more flexible manner, and also to simplify the steps to update a website with the potential to promote what you're working on a regular basis.
Ultimately, you can slowly start to imagine how Make can help you create a dynamic website that takes in all the most important data about your projects, hobbies, habits, and writings and find ways to compile, collect, and publish in a way that reflects the most accurate representation of who you are, what you've done, currently doing, and even the way you think.
Stay tuned for more builds to make that a reality, and automate on!
