1. Opening Problem Statement
Meet Clara, a content manager for a fast-growing tech blog. Every week, Clara writes dozens of blog posts in Notion, her preferred workspace for content creation and collaboration. However, publishing those posts on their Webflow-powered website is turning into a massive time sink. Clara has to manually reformat blog content, upload images, generate unique slugs, and keep track of which posts are already live. Often, errors creep in—wrong formatting, duplicate slugs, or missing images—which leaves the website looking unprofessional. This tedious process costs Clara at least 4 hours a week, delaying posts and burning her out.
What Clara really needs is an automated way to sync blog posts from Notion to Webflow. She wants to guarantee unique slugs for SEO, convert all necessary rich text elements into proper HTML, and ensure the cover images appear correctly—all without needing to copy and paste or touch the website editor constantly.
2. What This Automation Does
This n8n workflow is your turn-key solution to synchronize blog posts from your Notion database to your Webflow website automatically and reliably. With each run, it:
- Fetches all blog posts from a Notion database and checks for a “Sync to Webflow?” checkbox to identify which posts to sync.
- Generates or verifies unique slugs for each post to avoid URL conflicts on the Webflow site.
- Extracts raw content blocks from Notion and converts a variety of rich text elements (headings, paragraphs, quotes, lists, images, code blocks) into well-formed HTML suitable for Webflow’s rich text fields.
- Uploads or updates blog post entries on Webflow with the correct fields, including featured images and thumbnails taken from Notion cover images.
- Sends confirmation messages to Slack channels with the status of each synced post to notify the team promptly.
- Handles slug collisions and updates existing posts instead of creating duplicates.
Overall, this automation can save content teams hours every week by eliminating manual post transfers and formatting errors.
3. Prerequisites ⚙️
- Notion account with API integration access and a blog post database configured (including “slug” and “Sync to Webflow?” checkbox properties).
- Webflow account with a site and blog post collection set up, accessible via OAuth2 API.
- Slack workspace and bot with OAuth2 credentials to send notifications.
- n8n account to build and run the automation flow. Optionally, a self-hosted n8n instance can be used for more control and privacy (learn more).
4. Step-by-Step Guide
Step 1: Setup the Schedule Trigger
In n8n, click + Add Node → search Schedule Trigger and add it to the canvas. Configure it to run at your preferred interval (e.g., daily or hourly). This node triggers the workflow automatically without manual intervention.
You should see the trigger node ready, waiting for scheduled executions.
Common mistake: Forgetting to enable the trigger after creation will prevent the automation from running.
Step 2: Fetch All Blog Posts from Notion
Add a Notion node configured to getAll database pages from your blog post database. Select your Notion API credentials. This fetches all existing blog posts for processing.
After running, you should see a list of pages representing each blog post in Notion.
Common mistake: Ensure your Notion integration has appropriate database permissions to access content.
Step 3: Filter Posts to Sync
Add a Filter node named Is sync checked? that checks if the “Sync to Webflow?” property is true. This step excludes posts that are not intended to sync, optimizing runtime.
You should see only posts with the checkbox enabled pass through.
Common mistake: Mismatched property names or case sensitivity in the filter conditions can block all posts.
Step 4: Ensure Unique Slugs Using Code Node
Add a Code node that scans the slugs of filtered posts and appends a number suffix if duplicates are detected, ensuring all slugs are unique for Webflow URLs.
Paste this JavaScript code into the code node:
const data = $input.all().map(item => item.json);
const slugCount = {};
return data.map(item => {
let slug = item.property_slug;
if (slugCount[slug]) {
slugCount[slug] += 1;
slug = `${slug}-${slugCount[slug]}`;
} else {
slugCount[slug] = 1;
}
item.property_slug = slug;
return item;
});You should see all slugs now distinct and properly formatted.
Common mistake: Not matching the input field names correctly will lead to errors or no changes.
Step 5: Loop Over Each Post
Add a SplitInBatches node named For each blog post to process posts one by one. This prevents issues with large data sets and manages memory better.
Expected outcome: Posts will now proceed individually through the following nodes.
Common mistake: Skipping this can overwhelm API calls or cause timeouts.
Step 6: Fetch Complete Page and Blocks From Notion
Use two Notion nodes to get simple metadata and complete page data, including all blocks. Then a third Notion node fetches all child blocks for that page.
This gathers all content details: text, images, lists, and more.
Common mistake: Missing “returnAll” or proper pagination can yield partial data.
Step 7: Convert Notion Blocks to HTML
Add a Code node named Turn blocks into HTML that maps various Notion block types into their corresponding HTML tags.
The code covers headings (h1-h3), paragraphs, quotes, bulleted and numbered lists, images with captions, and code blocks.
Output is a clean HTML representation ready for Webflow’s rich text format.
Common mistake: Not handling all block types can cause incomplete or malformed content.
Step 8: Craft the Rich Text Element
Add another Code node that groups list items into
- or
- Modify Sync Criteria: In the “Is sync checked?” Filter node, change the property name or add additional conditions, like syncing only posts created after a certain date, to fit your content process.
- Adjust Rich Text Conversion: Edit the JavaScript in the “Turn blocks into HTML” Code node to support extra Notion block types, such as toggles or tables, for richer content.
- Change Draft Status Management: In Webflow nodes “Create post” and “Update in Blog Posts,” toggle the draft or archive flags automatically based on Notion properties, enabling publish workflow automation.
- Customize Slack Notifications: Tailor the Slack message content or add more channels/users to notify different teams (e.g., marketing, editors) depending on post type.
- Expand Scheduling Intervals: Adjust the Schedule Trigger to run more or less frequently based on volume and team needs.
- Confirm Notion API credentials have full read/write access to your blog database.
- Verify Webflow OAuth2 credentials are up-to-date and site/collection IDs match your environment.
- Test the Schedule Trigger runs manually before activating the workflow.
- Check Slack bot permissions and channel IDs for notification delivery.
- Run test syncs on a few sample posts and inspect results on your Webflow site’s CMS.
- Backup existing Notion content and Webflow collections if possible before first full sync.
- tags properly and concatenates all HTML blocks into a single rich text string.
This node ensures that lists and text flow coherently in the final blog post.
Common mistake: Processing lists incorrectly can break Webflow styling.
Step 9: Get All Existing Webflow Posts
Add a Webflow node with getAll collection items using your site’s ID and blog collection ID.
This allows the system to compare new Notion posts against existing Webflow posts based on their slugs.
Common mistake: Wrong collection or site ID leads to empty results or failures.
Step 10: Compare and Decide Create or Update
Use the CompareDatasets node to match Notion posts and Webflow posts by their slugs. It routes new posts to creation and existing posts for update.
You should see two paths: one creating new Webflow entries, the other updating existing ones.
Common mistake: Incorrect field mapping causes post duplication or overwriting the wrong post.
Step 11: Create or Update Posts in Webflow
Add Webflow nodes to create new posts or update existing ones based on the previous comparison. Fields updated include name, slug, rich text content, draft status, archived flags, and images from Notion covers.
Common mistake: Forgetting to include OAuth2 credentials or permissions.
Step 12: Update Slugs Back in Notion
Use Notion nodes to update the “slug” property on the Notion pages with the final values used in Webflow, keeping both systems in sync.
Common mistake: Updating the wrong pages or properties will lead to stale or duplicate data.
Step 13: Send Success Notifications on Slack
Add a Slack node configured to post messages to a designated channel whenever a post sync is completed successfully. This keeps your team informed in real-time.
Common mistake: Invalid Slack channel IDs or missing OAuth tokens will block messages.
5. Customizations ✏️
>
6. Troubleshooting 🔧
Problem: “401 Unauthorized” from Webflow API
Cause: OAuth2 credentials expired or invalid.
Solution: Re-authenticate your Webflow account in n8n via the credentials manager and ensure permissions are correct.
Problem: No posts passing the “Is sync checked?” filter
Cause: The “Sync to Webflow?” property may not be named correctly or is returning false.
Solution: Verify property names in Notion exactly match (case sensitive) and that posts have the checkbox ticked.
Problem: Rich text not rendering properly on Webflow
Cause: Not all Notion blocks are handled or converted correctly into HTML.
Solution: Extend the JavaScript conversion logic to handle missing block types and test output HTML before pushing.
7. Pre-Production Checklist ✅
8. Deployment Guide
Once tested and verified, activate your n8n workflow so the Schedule Trigger runs this sync regularly. Monitor executions and errors in n8n’s execution logs to ensure smooth operations. Use Slack notifications to stay informed of any issues. Since this workflow involves multiple API integrations, occasional token refresh may be needed.
9. FAQs
Q: Can I use Airtable instead of Notion for blog posts?
A: Currently, this workflow is built specifically for Notion’s API and block structure. Converting to Airtable would require redesigning nodes for Airtable’s schema.
Q: Does syncing posts consume Webflow API limits?
A: Yes, frequent updates and creations use Webflow’s API calls. It is advisable to schedule syncs thoughtfully to avoid rate limits.
Q: Is my blog content secure during sync?
A: All data transmitted is over HTTPS and handled by authenticated API calls via OAuth2, which is industry standard for security.
Q: Can this workflow handle large blogs with hundreds of posts?
A: Yes, the SplitInBatches node helps process posts iteratively to avoid overload. However, very large volumes may require optimized schedules or pagination.
10. Conclusion
By following this guide, you have built a robust automation that saves hours of manual work managing blog posts between Notion and Webflow. Unique slug handling, rich text conversion, and live Slack notifications make the content publishing process faster, more reliable, and less error-prone. You now have a powerful content pipeline ready to scale.
Next, consider extending this workflow to include SEO metadata synchronization, automatic image optimization, or multi-channel social sharing to amplify your blog’s reach.
Keep experimenting with n8n — your automation companion for smarter workflows!