Cómo publicar contenido de Notion o Google Docs en el CMS de Webflow usando CloudPress y Webflow Cloud

En un equipo de contenidos típico, el marketing redacta en Notion, los artículos largos se escriben y revisan en Google Docs, y el sitio está en Webflow. Copiar una publicación a mano significa reconstruir los encabezados y volver a subir las imágenes. Luego revisas cada enlace de nuevo, y la fricción es suficiente para que acabes posponiendo la copia.

Con esta configuración, CloudPress escribe el contenido original en el CMS de Webflow como elementos de colección. La estructura de origen se asigna a los campos que definas en la colección.

Una conexión de CloudPress junto con una pequeña aplicación de auditoría de Webflow Cloud lee la respuesta de la API de elementos de colección y devuelve una huella digital de su contenido. Sin esto, confirmar una importación significa abrir la colección en el Diseñador y comparar el texto enriquecido de cada elemento con el original.

La aplicación de auditoría es un proyecto de Next.js montado en el mismo sitio. Lee la colección a través de la API REST del CMS de Webflow con ajustes de autenticación del lado del servidor y protege la ruta de auditoría mediante un secreto compartido. Ejecuta una exportación, actualiza y comprueba si la huella digital ha cambiado.

¿Qué necesitas para publicar contenido de Notion o Google Docs con CloudPress en Webflow?

Necesitas cuatro requisitos previos: un sitio de Webflow, acceso a la fuente de CloudPress, detalles de autenticación de la API del CMS y un proyecto de Next.js compatible. Webflow Cloud está disponible desde el plan gratuito Starter en adelante, mientras que montar una aplicación en un dominio personalizado requiere el plan Premium o superior.

Prepara el sitio, la conexión de origen, el acceso a la API y el entorno de la aplicación antes de configurar el flujo de trabajo de contenido.

Ten listos los siguientes requisitos previos:

• Un sitio de Webflow con CMS y un plan que se ajuste al archivo: Webflow Cloud funciona desde el plan gratuito Starter en adelante, y montar una aplicación en un dominio personalizado requiere el plan Premium o superior.
• Cuenta de CloudPress con acceso a la fuente: CloudPress exporta desde Google Docs, Google Sheets y Notion. Conecta el espacio de trabajo donde escribes y autorízalo con el sitio de Webflow.
• Un token de API del sitio de Webflow conCMS:read: Generado en Configuración del sitio > Aplicaciones e integraciones > Acceso a la API. La API del CMS se autentica con Authorization: Bearer <token>, y listar elementos de colección requiere el CMS:read ámbito. Almacena el token solo como un secreto en Webflow Cloud, nunca en el navegador.
• Next.js 15 o superior, compilado con npm: La página de aplicaciones propias (bring-your-own-app) indica Next.js 15 como requisito mínimo y Node.js 22 o posterior.

Con estas piezas listas, la construcción depende de asignar correctamente una publicación de origen antes de desplegar la aplicación de auditoría.

6 pasos para publicar exportaciones de CloudPress en el CMS de Webflow dentro de Webflow Cloud

Publicar y verificar las exportaciones de CloudPress requiere una colección de destino, un mapeo de campos probado y una aplicación de Webflow Cloud montada que lea y cree la huella digital de la respuesta resultante del CMS.

Crea primero la ruta de contenido, luego añade la ruta autenticada y la página de auditoría que verifican lo que devuelve Webflow.

1. Crea la colección de destino en el CMS de Webflow

Crea una nueva colección con un nombre que coincida con su contenido, como "Entradas de blog". En el Diseñador, añádela desde el panel CMS. La lista de campos de la colección de destino es el contrato que cada exportación de CloudPress debe cumplir.

El CMS de Webflow almacena contenido estructurado en colecciones definidas, y CloudPress asigna los campos de origen a los campos de la colección, así que créala antes de conectar nada.

Mantengo el conjunto de campos reducido en la primera pasada. Un nombre, un slug, un cuerpo de texto enriquecido, una imagen principal y una fecha de publicación son suficientes para probar el flujo; un error de asignación es fácil de detectar en el conjunto inicial de campos y más difícil de ver una vez que lo amplías. Añade los campos de autor, categoría y SEO una vez que la primera entrada haya llegado intacta.

Confirma los tipos de campo de destino según los requisitos de asignación de CloudPress. Mientras estés en la configuración de la colección, copia su ID de colección: la aplicación de auditoría lee los elementos de https://api.webflow.com/v2/collections/{collection_id}/items, así que ese ID irá en una variable de entorno más adelante.

Ahora tienes una colección vacía cuyos campos describen exactamente cómo se ve una entrada en este sitio, además de los detalles de la API que utilizará la aplicación de auditoría.

2. Conecta tu espacio de trabajo de Notion o Google Docs a Webflow en CloudPress

Autoriza a CloudPress en ambos extremos y luego empareja los campos. El emparejamiento de cuerpo a texto enriquecido determina si la estructura de la entrada llega intacta a Webflow. CloudPress necesita acceso al espacio de trabajo de Notion o a los documentos de Google que contienen el contenido, y autorización en el sitio de Webflow que alberga la colección de Entradas de blog.

Las etiquetas de control varían según el tipo de fuente, así que sigue la documentación de configuración de CloudPress para la fuente que estés conectando.

Empareja el título de la entrada con el campo Nombre, el cuerpo con el campo de texto enriquecido, la imagen destacada con el campo de imagen y la fecha de publicación con el campo de fecha. Define el manejo de slugs según la documentación de CloudPress y tu flujo de trabajo de publicación, decidiendo deliberadamente si el slug proviene de la fuente o si Webflow lo genera.

Revisa también los permisos en el lado de Webflow. CloudPress escribe con el acceso que le hayas concedido. En el sitio de un cliente, utiliza una cuenta que el cliente controle para que la autorización siga disponible después de finalizar el proyecto.

Cuando se guarda la asignación, CloudPress sabe qué campo de origen va en qué campo de Webflow, y aún no se ha escrito nada.

3. Realiza una única exportación de prueba desde CloudPress

Elige una entrada de prueba con una jerarquía de encabezados, al menos una imagen, una lista con viñetas y un enlace, porque esos cuatro elementos son donde suele perderse el formato. Exporta esa entrada y luego ve a Webflow.

Abre el CMS, abre la colección y busca el elemento por su nombre. Compara el cuerpo del texto enriquecido con el original: los encabezados deben estar en el nivel correcto y los elementos de la lista deben seguir siendo listas. Confirma que el enlace apunta a donde debería y que el campo de imagen contiene la imagen importada.

Cualquier error aquí es un problema de asignación, y es mucho más barato corregirlo en un solo elemento que después de una exportación masiva. Ajusta la asignación en CloudPress, elimina el elemento de prueba en Webflow y vuelve a exportar hasta que el elemento se lea correctamente.

Una entrada de tu fuente ya vive en la colección de Webflow con su estructura intacta, que es la base que leerá la aplicación de auditoría.

4. Prepara la estructura de la aplicación Next.js para Webflow Cloud

Crea un proyecto Next.js básico y no cambies casi nada. Webflow Cloud espera la configuración predeterminada que create-next-app produce. Su página de configuración es explícita: "No necesitas añadir un adaptador, una ruta base o un modo de salida".

Ahora tienes un proyecto que Webflow Cloud puede compilar sin necesidad de cambiar la configuración.

Dos cosas que debes omitir. No añadas una runtime exportación a ningún archivo de ruta. Y no establezcas basePath o assetPrefix tú mismo: Webflow Cloud deriva ambos de la ruta de montaje del entorno en el momento de la compilación y sobrescribe lo que sea que confirmes, por lo que el enfoque documentado es leer la ruta de montaje en tiempo de ejecución en lugar de codificarla de forma rígida.

Despliega el proyecto en Webflow Cloud y establece una ruta de montaje como /content-audit. La aplicación aparecerá en esa ruta dentro de tu dominio. El proyecto ya está listo para su primera compilación en Webflow Cloud en la ruta de montaje configurada.

5. Añade el controlador de ruta de auditoría autenticado

Crea un GET controlador que llame a la API de CMS con un token de portador (bearer token) y devuelva los elementos con una huella digital SHA-256 del cuerpo de la respuesta. Una verificación de secreto compartido constituye el límite de seguridad en la propia ruta. El ID de la colección reside en una variable de entorno, por lo que la misma aplicación puede apuntar a una colección diferente sin necesidad de cambiar el código.

Crea el archivo en app/api/audit/route.ts con este contenido:

import { NextResponse } from 'next/server';

type TimingSafeEqual = (a: ArrayBufferView | ArrayBuffer, b: ArrayBufferView | ArrayBuffer) => boolean;

function findTimingSafeEqual(): TimingSafeEqual | null {
  const hosts: Record<string, unknown>[] = [
    crypto as unknown as Record<string, unknown>,
    crypto.subtle as unknown as Record<string, unknown>,
  ];
  for (const host of hosts) {
    const fn = host?.timingSafeEqual;
    if (typeof fn === 'function') return (fn as TimingSafeEqual).bind(host);
  }
  return null;
}

async function secretMatches(header: string | null, secret: string): Promise<boolean> {
  if (!header) return false;
  const enc = new TextEncoder();
  const a = enc.encode(header);
  const b = enc.encode(secret);
  if (a.byteLength !== b.byteLength) return false;

  const timingSafeEqual = findTimingSafeEqual();
  if (timingSafeEqual) return timingSafeEqual(a, b);

  // Use a full byte comparison during local next dev.
  let diff = 0;
  for (let i = 0; i < a.length; i++) diff |= a[i] ^ b[i];
  return diff === 0;
}

async function sha256Hex(bytes: Uint8Array): Promise<string> {
  const digest = await crypto.subtle.digest('SHA-256', bytes);
  return Array.from(new Uint8Array(digest))
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');
}

export async function GET(request: Request) {
  const secret = process.env.AUDIT_SECRET;
  const token = process.env.WEBFLOW_API_TOKEN;
  const collectionId = process.env.WEBFLOW_COLLECTION_ID;

  if (!secret || !token || !collectionId) {
    return NextResponse.json({ error: 'Missing environment variables' }, { status: 500 });
  }

  const ok = await secretMatches(request.headers.get('x-audit-secret'), secret);
  if (!ok) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  // The list endpoint returns at most 100 items per request, so page
  // through it. A single unpaginated call fingerprints only page one,
  // and an export that adds item 101 would leave the hash unchanged.
  const pages: string[] = [];
  let offset = 0;
  let total = Infinity;

  while (offset < total) {
    const url =
      `https://api.webflow.com/v2/collections/${collectionId}/items` +
      `?limit=100&offset=${offset}`;

    const upstream = await fetch(url, {
      headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' },
    });

    if (!upstream.ok) {
      return NextResponse.json(
        { error: `Webflow responded ${upstream.status}` },
        { status: 502 },
      );
    }

    const raw = await upstream.text();
    pages.push(raw);

    let parsed: { pagination?: { total?: number } };
    try {
      parsed = JSON.parse(raw);
    } catch {
      // A 200 carrying non-JSON (a proxy error page, a truncated body)
      // would otherwise throw an opaque 500 from inside the handler.
      return NextResponse.json({ error: 'Upstream returned non-JSON' }, { status: 502 });
    }

    total = parsed.pagination?.total ?? 0;
    offset += 100;
  }

  const combined = pages.join('');
  const rawBytes = new TextEncoder().encode(combined);
  const fingerprint = await sha256Hex(rawBytes);

  return NextResponse.json({
    fetchedAt: new Date().toISOString(),
    bytes: rawBytes.byteLength,
    pages: pages.length,
    fingerprint,
  });
}

Ese archivo te proporciona una ruta que rechaza las solicitudes sin el encabezado correcto, se autentica en la API de CMS con un token de portador, recorre cada página de la colección y devuelve un hash que cambia siempre que la respuesta combinada se modifica.

La búsqueda en torno a timingSafeEqual es deliberada. Cloudflare expone timingSafeEqual en crypto.subtle como una extensión no estándar de la Web Crypto API, y el crypto global bajo next dev no tiene dicho método.

Node incluye una comparación de tiempo constante, pero reside en node:crypto, que la guía de compatibilidad de Webflow desaconseja en favor de SubtleCrypto. Buscar el método en el momento de la llamada permite que un mismo archivo funcione en ambos lugares sin necesidad de importar un módulo de Node.

Por qué la paginación y la huella digital de la carga útil son importantes para las exportaciones de CMS

Devolver un 502 indica una respuesta ascendente fallida, y los campos bytes y pages sirven como comprobaciones rápidas: una exportación que añade una publicación larga debería aumentar el recuento de bytes, y superar los 100 elementos debería aumentar el recuento de páginas.

El hash cubre todas las páginas unidas, por lo que cualquier cambio en cualquier página altera la huella digital. El bucle de paginación no es opcional. El punto final de la lista tiene un límite de 100 elementos por solicitud e informa del recuento real en pagination.total, por lo que una sola llamada solo genera la huella digital de los primeros cien.

Sin el bucle, una colección de 150 publicaciones reportaría un hash sin cambios sin importar lo que llegara en los siguientes cien, que es precisamente el primer problema con el que se topa un archivo de contenido.

Añade un control de limitación de tasa compatible con el despliegue antes de exponer la ruta de auditoría a usuarios que no sean de confianza. El secreto compartido bloquea las solicitudes no autenticadas, mientras que el límite de tasa evita que las adivinanzas repetidas consuman la cuota de la API de CMS.

Ejecuta npm run dev, establece AUDIT_SECRET, WEBFLOW_API_TOKEN y WEBFLOW_COLLECTION_ID en un .env.local local, y solicita http://localhost:3000/api/audit con el encabezado configurado.

Deberías recibir un JSON que contenga la publicación de prueba importada y una huella digital hexadecimal.

6. Añade la página de auditoría y despliégala con sus variables configuradas

Crea una página que llame a la ruta a través de la ruta de montaje, luego configura las variables en Webflow Cloud y despliega. Una llamada fetch del cliente que omita la ruta de montaje solicitará la URL desplegada incorrecta. La página de "trae tu propia aplicación" de Webflow Cloud indica que "las llamadas fetch del lado del cliente deben incluir manualmente la ruta base", por lo que la página añade como prefijo a la solicitud NEXT_PUBLIC_BASE_PATH.

La página que contiene el campo secreto y muestra la respuesta reside en app/audit/page.tsx:

'use client';

import { useState } from 'react';

const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';

export default function AuditPage() {
  const [secret, setSecret] = useState('');
  const [output, setOutput] = useState('');
  const [status, setStatus] = useState<number | null>(null);

  const [busy, setBusy] = useState(false);

  async function runAudit() {
    setBusy(true);
    try {
      const res = await fetch(`${basePath}/api/audit`, {
        headers: { 'x-audit-secret': secret },
      });
      setStatus(res.status);
      setOutput(JSON.stringify(await res.json(), null, 2));
    } catch {
      // Without this a network failure leaves the page silent.
      setStatus(null);
      setOutput('Request failed. Check the network tab.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <main style={{ padding: 24, fontFamily: 'monospace' }}>
      <h1>Collection audit</h1>
      <input
        type="password"
        placeholder="Audit secret"
        value={secret}
        onChange={(e) => setSecret(e.target.value)}
      />
      <button onClick={runAudit} disabled={busy} style={{ marginLeft: 8 }}>
        {busy ? 'Reading' : 'Read collection'}
      </button>
      {status !== null && <p>HTTP {status}</p>}
      <pre>{output}</pre>
    </main>
  );
}

La página ahora envía el secreto como un encabezado y muestra lo que devuelva la ruta, incluyendo la huella digital y la carga útil de los elementos devueltos.

Webflow Cloud hace que tanto las variables secretas como las no secretas estén disponibles durante la compilación y en tiempo de ejecución, y redacta los secretos de los registros de compilación. Eso es lo que permite que NEXT_PUBLIC_BASE_PATH funcione, ya que el valor debe estar presente cuando se ejecuta la compilación.

Configuración de variables de entorno

Configura estos cuatro en los ajustes de entorno en Webflow Cloud:

Una vez guardados, la siguiente compilación podrá leer los ajustes necesarios mientras el token de API permanece en una variable secreta, oculto en los registros de compilación y sin incluirse nunca en el paquete del navegador.

Despliega la aplicación actualizada y deja que Webflow Cloud compile. Abre https://yourdomain.com/content-audit/audit, pega el secreto de auditoría y haz clic en el botón. Deberías ver HTTP 200, la huella digital y los campos de la publicación de prueba.

Ejecuta una segunda exportación desde CloudPress y vuelve a hacer clic. Si la exportación cambia la respuesta, la huella digital debería ser distinta y el recuento de bytes debería aumentar; si ambos permanecen igual, la exportación no modificó esta respuesta, independientemente de lo que haya reportado CloudPress.

¿Qué provoca que la publicación de CloudPress en Webflow Cloud falle?

La publicación de CloudPress y su auditoría en Webflow Cloud pueden fallar debido a una configuración de tiempo de ejecución incompatible, la falta de un prefijo de ruta de montaje, compatibilidad criptográfica específica del entorno o un módulo de sistema de archivos de Node no disponible.

Identifica el síntoma visible y su causa correspondiente, y soluciónalo antes de cambiar el mapeo de campos de CloudPress o repetir la exportación.

La compilación de Webflow Cloud reporta un error de tiempo de ejecución de OpenNext

Causa: Una compilación de Webflow Cloud puede reportar un error de tiempo de ejecución de OpenNext después de que una ruta o página añada runtime = 'edge'. Webflow Cloud se ejecuta en Cloudflare Workers, y su documentación describe los despliegues como ejecuciones en el tiempo de ejecución Edge.

La runtime = 'edge' exportación de Next.js es una función del framework independiente que cambia la forma en que Next.js compila la ruta. Añadirla sobrescribe la configuración estándar de Next.js que Webflow Cloud espera, en lugar de seleccionar el entorno de despliegue.

Solución: Vuelve a la configuración predeterminada producida por create-next-app. Elimina la runtime exportación de la ruta o página afectada y no añadas ningún adaptador, ruta base ni modo de salida. Vuelve a desplegar el proyecto a través de Webflow Cloud tras guardar el cambio.

La aplicación debería compilarse con la configuración inyectada de Webflow Cloud y permanecer disponible en su ruta de montaje configurada.

La página de auditoría devuelve un error 404 para /api/audit en el sitio desplegado, pero funciona con next dev

Causa: Abre la pestaña Red e inspecciona la URL de la solicitud fallida. Una solicitud a /api/audit en la raíz confirma que a la página desplegada le falta el prefijo de ruta de montaje que requiere Webflow Cloud. He cometido este error y solo lo detecté tras el despliegue porque la ejecución local hacía que la ruta simple pareciera correcta.

En local, la aplicación se ejecuta en la raíz del dominio, mientras que la aplicación desplegada está montada en una ruta como /content-audit.

Solución: Establece NEXT_PUBLIC_BASE_PATH en la ruta de montaje desplegada dentro de los ajustes de entorno de Webflow Cloud y, a continuación, inicia una nueva compilación. Un despliegue realizado antes de guardar la variable seguirá conteniendo una cadena vacía, ya que la compilación requiere un valor.

Si la ruta de montaje cambia en algún momento, actualiza la variable y vuelve a compilar. El cliente debería solicitar entonces la URL montada en lugar de la ruta de nivel raíz.

La ruta de auditoría falla en la comparación de secretos bajo next dev

Causa: En next dev, la verificación de secretos falla cuando la ruta llama a crypto.subtle.timingSafeEqual directamente, porque ese método es una extensión de Cloudflare y no parte de Web Crypto.

El linting y la comprobación de tipos no lo detectarán, así que prueba la ruta localmente en lugar de confiar en la compilación. Recurrir a node:crypto solo cambia un fallo local por un fallo en el despliegue.

Solución: Mantén la búsqueda y el respaldo de bytes completos que utiliza secretMatches. La ruta comprueba timingSafeEqual en el momento de la llamada y compara cada byte localmente cuando el método no está disponible.

Prueba la solicitud autenticada tanto en el desarrollo local como en la aplicación desplegada antes de confiar en ella. Una importación desde node:crypto cambia un fallo local por un fallo en producción, así que mantén la protección.

La compilación de Webflow Cloud falla cuando una ruta importa node:fs

Causa: No hay sistema de archivos con el que comunicarse. La página de compatibilidad con Node.js de Webflow lo indica directamente como motivo, listando fs bajo lo que se debe evitar con la nota "Sin acceso al sistema de archivos; utiliza almacenamiento externo".

Ten cuidado con la parte de path del folclore aquí: la misma página califica a path como compatible de forma nativa en su texto y lo lista en la columna de evitar, por lo que dice ambas cosas y no es algo seguro sobre lo que construir. Escribir un registro de auditoría en el disco es el desencadenante habitual porque la ruta intenta usar un sistema de archivos que el despliegue no proporciona.

Solución: Elimina la importación de node:fs y deja de escribir en el sistema de archivos. La ruta de auditoría ya devuelve el recibo al emisor, por lo que el cliente tiene el registro. Si necesitas persistencia, envía la huella digital y la marca de tiempo a un almacén de registros externo desde el mismo controlador.

Cualquier código que necesite el sistema de archivos debe estar fuera de Webflow Cloud. Después de eliminar la dependencia, vuelve a compilar y confirma que la respuesta de auditoría sigue devolviendo su marca de tiempo, recuento de bytes, huella digital y elementos.

Qué puedes construir a continuación con CloudPress y Webflow

Si Notion es tu fuente y prefieres ser dueño de la tubería en lugar de pagar por una, nuestra guía para sincronizar una base de datos de Notion construye el mismo trabajo directamente contra la API de Notion, cubriendo la paginación, el mapeo de propiedades y las escrituras repetibles.

El compromiso es el de siempre: más control y sin coste por usuario, a cambio de un código que luego debes mantener.

Para opciones de conexión, consulta la integración de Webflow y Notion. Para una personalización más profunda más allá de lo que CloudPress maneja de forma nativa, explora la API REST de CMS y el tiempo de ejecución de Webflow Cloud en la documentación para desarrolladores de Webflow.