Ghost

How to integrate Ghost with Webflow

Ghost handles content management, membership systems, and newsletter delivery while Webflow provides visual design tools and frontend hosting. You can integrate these platforms to combine Ghost's publishing capabilities with Webflow's design flexibility.

You can integrate Ghost with Webflow using the Udesly Adapter, embed Ghost content directly in Webflow pages using Code Embed elements, or build custom integrations using the Ghost Content API and Webflow CMS API.

For advanced setups, you can sync Ghost posts to Webflow collections through API-driven synchronization or run Ghost on a subdirectory of your Webflow domain using reverse proxy configuration.

Convert Webflow designs to Ghost themes

Transform Webflow visual designs into functional Ghost themes using the Udesly Adapter conversion workflow. This method works when you want to design theme layouts in Webflow's visual editor, export your project, convert it via the Udesly Adapter, and then manage all content, memberships, and publishing operations in Ghost. This is a one-way conversion process. Design changes in Webflow require re-exporting and re-converting the theme rather than enabling live synchronization.

The Ghost Udesly integration guide documents that the process requires designing your theme in Webflow, exporting your Webflow project as a .zip file, uploading the export file to the Udesly Adapter service, and installing the converted theme in your Ghost admin dashboard. The workflow keeps your visual design while making it compatible with Ghost's templating system.

Here are the steps to follow:

• Design theme layouts in Webflow with specific custom attributes marking dynamic content areas
• Export the Webflow project as a .zip file (requires a Webflow plan with code export capability)
• Upload to Udesly Adapter for conversion to Ghost theme format
• Download the converted theme package
• Install in Ghost through Settings → Design → Upload theme

Key considerations:

Custom attributes must identify page types, dynamic content areas, navigation elements, and pagination. We recommend starting with pre-configured Webflow starter themes or element packs that include these attributes rather than adding them manually, as this simplifies the conversion process and reduces errors.

Design updates require re-exporting from Webflow, uploading to the Udesly Adapter for conversion, and re-uploading the converted theme to Ghost. No live synchronization exists between platforms.

Embed Ghost content in Webflow

Add Ghost blog posts, signup forms, or newsletter widgets directly to Webflow pages using Code Embed elements and HTML code snippets. This approach keeps Ghost as your content management system while displaying selected content within your Webflow site design.

Code Embed elements accept arbitrary HTML, CSS, and JavaScript. Insert Ghost's embeddable signup forms using code from Settings → Membership in Ghost Admin, For blog post display, use third-party embedding services or custom JavaScript that fetches from the Ghost Content API.

Embed options:

• Ghost membership forms: Copy embed code from Ghost Admin and paste into Webflow Code Embed elements for newsletter signups
• Blog post lists: Use services like Stackblocks that generate embed code pulling from your Ghost Content API
• Custom JavaScript fetches: Write code that calls the Ghost Content API and renders results in Webflow page elements

Limitations:

Embedded Ghost content doesn't preview in Webflow. You must publish or preview the live site to see rendered Ghost content. Styling conflicts may occur between Ghost's CSS and Webflow's styles, requiring custom CSS overrides.

Build with Webflow and Ghost APIs

Build custom integrations using Ghost's Content API and Admin API alongside the Webflow CMS API for programmatic content management. This method provides complete control over data transformation, synchronization logic, and workflow automation.

The Ghost Content API provides read-only access to published posts, pages, tags, and authors through standard REST endpoints. The Ghost Admin API requires JWT authentication and enables full CRUD operations on all Ghost content. The Webflow CMS API manages collection items, assets, and site publishing through OAuth or Site Token authentication.

API integrations require middleware that handles authentication, data transformation, and error handling. Host this middleware on platforms like Vercel, Netlify Functions, or traditional servers.

Sync Ghost posts to Webflow collections

Fetch published posts from Ghost and create corresponding items in Webflow CMS collections. This pattern works when you want Webflow's design flexibility applied to Ghost-managed content.

The Ghost Content API posts endpoint returns paginated post lists with filtering, field selection, and related resource inclusion. The Webflow CMS API items endpoint accepts item creation requests with field data matching your collection schema.

Implementation pattern:

// Fetch posts from Ghost Content API
const ghostResponse = await fetch(
  `https://your-site.ghost.io/ghost/api/content/posts/?key=${ghostKey}&include=tags,authors&fields=title,slug,html,feature_image,published_at`
);
const ghostPosts = await ghostResponse.json();

// Transform and create in Webflow
for (const post of ghostPosts.posts) {
  await fetch(
    `https://api.webflow.com/v2/collections/${collectionId}/items`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${webflowToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        fieldData: {
          name: post.title,
          slug: post.slug,
          'post-body': post.html,
          'published-date': post.published_at
        }
      })
    }
  );
}

Note: This code creates items in a staged (draft) state. To publish items to the live site, add a separate publish call after creation.

// Publish items
await fetch(
  `https://api.webflow.com/v2/collections/${collectionId}/items/publish`,
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${webflowToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      itemIds: itemIds // array of created item IDs
    })
  }
);

Publishing workflow: Items created via the Webflow API start in a staged (draft) state. Call the publish items endpoint with item IDs to make content live on your published site.

Automate with Ghost webhooks

Trigger real-time synchronization when content changes in Ghost using webhooks. This approach reduces polling frequency and provides near-instant updates to Webflow when posts are published, edited, or deleted.

Webhook events are not guaranteed delivery, so integration architects must implement event reconciliation with periodic full syncs and store webhook event IDs to detect missed events.

The Ghost Webhooks documentation defines events like post.published, post.published.edited, and post.deleted that send POST requests to configured endpoints. Configure webhooks through Settings → Integrations → Add custom integration in Ghost Admin.

Webhook setup:

1. Create a webhook receiver endpoint in your middleware service
2. Verify webhook signatures using HMAC-SHA256 validation as documented in Ghost webhooks security
3. Transform Ghost post data to match Webflow collection schema
4. Create, update, or delete Webflow CMS items via the Webflow CMS API
5. Call the publish endpoint to make changes live on your Webflow site

Security implementation:

const crypto = require('crypto');

function verifyGhostWebhook(rawBody, signature, secret) {
  const expectedSignature = crypto
    .createHmac('sha256', secret)
    .update(rawBody)
    .digest('hex');

  return crypto.timingSafeEqual(
    Buffer.from(signature, 'hex'),
    Buffer.from(expectedSignature, 'hex')
  );
}

Available webhook events:

• Post events: post.added, post.deleted, post.edited, post.published, post.published.edited, post.unpublished, post.scheduled
• Page events: page.added, page.deleted, page.edited, page.published, page.published.edited, page.unpublished
• Tag events: tag.added, tag.edited, tag.deleted, post.tag.attached, post.tag.detached

Webhooks can miss events during network failures or server downtime. Implement reconciliation logic with periodic full syncs to detect and repair any synchronization gaps. Store webhook event IDs to identify missed events and ensure idempotent handlers can safely process duplicate events.

What you can build

Integrating Ghost with Webflow enables specialized publishing architectures that separate content management from frontend presentation.

• Marketing site with embedded blog: Build marketing pages and product showcases in Webflow while embedding Ghost blog posts and newsletter signups using Code Embed elements
• Membership-driven content hub: Use Webflow for public landing pages and Ghost for gated member content, newsletters, and subscriptions with Ghost handling authentication, payment processing via Stripe, and member-only content delivery
• Multi-site content distribution: Maintain a single Ghost content repository while syncing posts to multiple Webflow sites with different designs through custom middleware that transforms content for each site's collection schema
• Hybrid blog architecture: Host your main domain on Webflow for maximum design control while running Ghost on a subdirectory like /blog using reverse proxy configuration through Caddy or Subfold that routes the root domain to Webflow and the blog path to Ghost (requires server infrastructure and DevOps knowledge)