Sync Blog Posts from Notion to Webflow

This n8n workflow automates the synchronization of blog posts from Notion to Webflow. It periodically checks for new or updated blog posts in Notion, processes them, and then creates or updates the corresponding items in Webflow. The workflow also handles rich text content conversion and notifies a Slack channel about any new posts.

What it does

1. Triggers on a Schedule: The workflow runs periodically (e.g., every 5 minutes) to check for updates.
2. Fetches Notion Blog Posts: It retrieves all blog posts from a specified Notion database.
3. Compares with Previous Data: It compares the currently fetched Notion data with the data from the previous execution to identify new or updated posts.
4. Filters for New/Updated Posts: Only items that are new or have been modified since the last run are processed further.
5. Processes Each Post: For each new or updated post:
   • Extracts Notion Page Content: It fetches the rich text content of the Notion page.
   • Converts Rich Text to HTML: A custom Code node converts Notion's rich text format into Webflow-compatible HTML.
   • Prepares Webflow Data: It structures the Notion data into the format required by Webflow, including mapping fields like title, slug, cover image, and content.
   • Creates/Updates Webflow CMS Item: It either creates a new item in Webflow CMS or updates an existing one based on whether a Webflow Item ID is present.
6. Updates Notion with Webflow ID: If a new item was created in Webflow, the workflow updates the original Notion page with the generated Webflow Item ID.
7. Notifies Slack: For every new blog post published to Webflow, a notification is sent to a specified Slack channel, including a link to the published post.

Prerequisites/Requirements

• n8n Instance: A running instance of n8n.
• Notion Account: A Notion account with a database set up for blog posts.
  • You will need a Notion API token and the database ID.
  • The Notion database should have properties for:
    • Name (title)
    • Slug
    • Published (checkbox)
    • Cover Image (files & media)
    • Webflow Item ID (text property, to store the Webflow item ID for updates)
    • Last Edited Time (last edited time property)
• Webflow Account: A Webflow account with a CMS collection for blog posts.
  • You will need a Webflow API token, site ID, and collection ID.
  • The Webflow CMS collection should have fields corresponding to the Notion properties (e.g., Name, Slug, Post Body (rich text), Main Image (image), etc.).
• Slack Account: A Slack workspace to receive notifications for new posts.
  • You will need a Slack API token or Webhook URL.

Setup/Usage

1. Import the Workflow: Download the provided JSON and import it into your n8n instance.
2. Configure Credentials:
   • Notion: Set up a Notion credential with your API token.
   • Webflow: Set up a Webflow credential with your API token.
   • Slack: Set up a Slack credential or configure the Slack node with a Webhook URL.
3. Update Node Parameters:
   • Notion Node (ID 487):
     • Select your Notion credential.
     • Enter your Notion blog database ID.
     • Ensure the Filter By Property is set to Published (checkbox) and Value is true.
   • Webflow Node (ID 480):
     • Select your Webflow credential.
     • Enter your Webflow Site ID and Collection ID.
     • Map the Notion fields to your Webflow CMS collection fields in the "Create Item" and "Update Item" operations.
   • Slack Node (ID 40):
     • Select your Slack credential or configure the Webhook URL.
     • Specify the channel where notifications should be sent.
     • Customize the message template for new blog post alerts.
   • Schedule Trigger (ID 839): Adjust the interval (e.g., every 5 minutes, hourly) according to your needs.
4. Activate the Workflow: Once all credentials and parameters are configured, activate the workflow.

The workflow will now automatically sync your Notion blog posts to Webflow at the specified interval.