CloudCannon & Astro

CloudCannon es un sistema de gestión de contenidos (CMS) headless basado en Git que proporciona un editor visual para tu contenido y componentes de interfaz de usuario, ofreciendo una experiencia de edición interactiva y en vivo.

Integración con Astro

Esta guía describirá el proceso de configuración de CloudCannon como un CMS para Astro utilizando el panel de control del sitio de CloudCannon.

El panel de control del sitio te proporciona una vista organizada de tus archivos de Astro y la capacidad de editarlos utilizando:

Un editor visual para una vista previa interactiva de tu sitio, lo que te permite editar directamente en la página.
Un editor de contenido para la edición de texto enriquecido WYSIWYG en una vista minimalista.
Un editor de datos para gestionar archivos de datos estructurados y marcado.

También puedes configurar el acceso basado en roles a un editor de código fuente minimalista, un editor de código en el navegador para realizar cambios menores en el código fuente de tus archivos.

Requisitos previos

Una cuenta de CloudCannon. Si no tienes una cuenta, puedes registrarte en CloudCannon.
Un proyecto de Astro existente almacenado localmente o en uno de los proveedores de Git compatibles con CloudCannon: GitHub, GitLab o Bitbucket. Si no tienes un proyecto existente, puedes comenzar con el Astro Component Starter de CloudCannon.

Configurar un nuevo sitio de CloudCannon

Los siguientes pasos configurarán un nuevo sitio de CloudCannon desde tu panel de control. Este sitio se conectará a un repositorio de Astro existente y te permitirá gestionar y editar tu contenido con el editor de texto WYSIWYG de CloudCannon.

En la página de inicio de tu organización de CloudCannon, crea un nuevo sitio.
Autentica tu proveedor de Git y selecciona el repositorio de Astro al que deseas conectarte.
Elige un nombre para tu sitio, luego CloudCannon creará el sitio y comenzará a sincronizar tus archivos.
Sigue las tareas guiadas de CloudCannon en el panel de control de tu sitio para completar la configuración de tu sitio, incluyendo la creación de un archivo de configuración de CloudCannon (cloudcannon.config.yml).
Configura cómo se ve y se comporta CloudCannon para los editores añadiendo configuración a tu archivo de configuración de CloudCannon. Puedes realizar ediciones utilizando el modo de configuración de CloudCannon, o puedes añadir la configuración manualmente tú mismo en un editor de código.
Desactiva el modo de configuración para volver a la interfaz de edición para los creadores de contenido. Tu archivo de configuración se guardará de nuevo en tu repositorio junto con el resto de tus archivos.

Ahora puedes explorar el panel de control de tu sitio para ver los archivos de contenido de tu sitio de Astro y editarlos con el editor de contenido (por ejemplo, .md, .mdx), el editor de datos (por ejemplo, .yml, .json) y el editor visual (por ejemplo, .astro) según corresponda.

Es posible que también quieras aprovechar algunas funciones de CloudCannon, como organizar tus archivos en colecciones, crear esquemas de CloudCannon y configurar tu proyecto para la edición visual.

Para obtener instrucciones más detalladas, consulta la guía de inicio de CloudCannon.

Colecciones y esquemas de CloudCannon

Si utilizas las colecciones de contenido de Astro, entonces estarás familiarizado con los conceptos de colecciones de CloudCannon (utilizados para la organización/navegación en el panel de control de tu sitio) y esquemas (utilizados para definir el formato de las nuevas entradas de contenido).

El panel de control de tu sitio de CloudCannon te permite organizar las páginas y el contenido de tu proyecto de Astro en colecciones: grupos de archivos relacionados con un formato similar. Esto te permite ver tipos de contenido similares juntos para facilitar la edición y hace que tus archivos de contenido sean fáciles de navegar, ordenar y filtrar.

Crear un esquema de CloudCannon para una colección

Para asegurarte de que las propiedades de datos de tus entradas de CloudCannon coincidan con el esquema de validación de Zod definido en tu colección de contenido, puedes crear un esquema de CloudCannon (un documento de plantilla en blanco para crear una nueva entrada). Crear una plantilla de esquema puede garantizar que cualquier documento nuevo creado en CloudCannon tenga las propiedades requeridas por tu colección de contenido y evitar errores de tipo en tu proyecto. Tu esquema de CloudCannon también puede incluir valores por defecto para iniciar nuevos documentos, como el nombre del autor para un blog unipersonal.

El siguiente ejemplo creará un esquema de CloudCannon basado en una colección de contenido de Astro (blog) para publicaciones de blog escritas en Markdown. Este esquema estará disponible al crear una nueva entrada desde la colección “Posts” de CloudCannon:

Crea una carpeta en .cloudcannon/schemas/ si no existe ya.
Añade un archivo en blanco existente en esta carpeta para usarlo como plantilla de publicación de blog por defecto. El nombre no es importante, pero el archivo debe tener la misma extensión de archivo que las entradas de tu colección de contenido de Astro (por ejemplo, post.md).
Proporciona los campos de frontmatter necesarios requeridos por el esquema de tu colección de contenido. No necesitas proporcionar ningún valor para estos, pero cualquier contenido que incluyas se incluirá automáticamente cuando se cree una nueva entrada. Estos son campos que estarán disponibles en la barra lateral de tu editor de contenido.

El siguiente esquema de ejemplo para una publicación de blog tiene marcadores de posición para el título, el autor y la fecha:
.cloudcannon/schemas/post.md
```
---
title:
author:
date:
---
```

En la propiedad collections_config del archivo de configuración de CloudCannon, añade la ruta del archivo a tu esquema bajo la colección de CloudCannon correspondiente a la colección “Posts”.

collections_config:
  posts:
    path: content/blog
    name: Posts
    icon: post_add
    schemas:
      default:
        path: .cloudcannon/schemas/post.md
        name: Blog Post Entry

Crear una nueva entrada

En el panel de control del sitio de CloudCannon, puedes crear nuevo contenido utilizando el botón “Add”. Podrás seleccionar un tipo de entrada de los esquemas que hayas definido en cloudcannon.config.yml, dependiendo de la colección en la que te encuentres actualmente.

También puedes subir archivos a CloudCannon, o crear nuevos archivos directamente en tu proyecto de Astro. Cuando guardes los cambios de tu sitio, los nuevos archivos creados en cualquiera de las dos ubicaciones se sincronizarán y estarán disponibles tanto en CloudCannon como en tu proyecto de Astro.

El siguiente ejemplo creará una nueva publicación de blog desde la colección “Posts” del panel de control del sitio de CloudCannon utilizando la plantilla de esquema post.md creada para satisfacer la colección de contenido de Astro blog:

En el panel de control del sitio de CloudCannon, navega a la colección que representa el tipo de contenido que deseas añadir. Por ejemplo, navega a la colección “Posts” para añadir una nueva publicación de blog.
Utiliza el botón “Add” para crear una nueva publicación. Si has configurado el esquema post.md de CloudCannon, puedes elegir la entrada de publicación de blog por defecto para crear una nueva publicación.
Completa los campos necesarios en la barra lateral de tu editor de contenido (por ejemplo, title, author, date), añade el contenido y guarda tu publicación.
Esta publicación se guarda localmente en CloudCannon y ahora debería ser visible desde el panel de control de tu sitio en tu colección “Posts”. Puedes ver y editar todas tus publicaciones individuales desde esta página del panel de control.
Cuando estés listo para enviar esta nueva publicación de vuelta a tu repositorio de Astro, selecciona “Save” en la barra lateral de navegación del sitio desde el panel de control de tu sitio. Esto te mostrará todos los cambios no guardados realizados en tu sitio desde tu último commit de vuelta a tu repositorio y te permitirá revisar y seleccionar cuáles guardar o descartar.
Vuelve a ver los archivos de tu proyecto de Astro y descarga los nuevos cambios de Git. Ahora encontrarás un nuevo archivo .md dentro del directorio especificado para esta nueva publicación, por ejemplo:
- Directoriosrc/
  - Directoriocontent/
    Directorioblog/
    my-new-post.md

Navega a ese archivo en tu editor de código y verifica que puedes ver el contenido de Markdown que ingresaste. Por ejemplo:

---
title: My New Post
author: Sarah
date: 2025-11-12
---

This is my very first post created in CloudCannon. I am **super** excited!

Renderizar contenido de CloudCannon

Utiliza la API de colecciones de contenido de Astro para consultar y mostrar tus publicaciones y colecciones, tal como lo harías en cualquier proyecto de Astro.

Mostrar una lista de colección

El siguiente ejemplo muestra una lista de los títulos de cada publicación, con un enlace a una página de publicación individual.

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/posts/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Mostrar una sola entrada

Para mostrar el contenido de una publicación individual, puedes importar y usar el componente <Content /> para renderizar tu contenido a HTML:

---
import { getEntry, render } from 'astro:content';

const entry = await getEntry('blog', 'my-first-post');
const { Content } = await render(entry);
---

<main>
  <h1>{entry.data.title}</h1>
  <p>By: {entry.data.author}</p>
  <Content />
</main>

Para obtener más información sobre consultas, filtros, cómo mostrar el contenido de tus colecciones y más, consulta la documentación completa de colecciones de contenido.

Desplegar CloudCannon + Astro

CloudCannon ofrece alojamiento web gratuito como parte de todos sus planes, el cual utiliza Cloudflare internamente. Sin embargo, puedes alojarlo con casi cualquier proveedor de alojamiento que pueda desplegar desde un repositorio de Git.

Para desplegar tu sitio web, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Configurar la edición visual

El editor visual de CloudCannon te permite ver y editar texto, imágenes y otros contenidos en una vista previa interactiva y en vivo de tu sitio. Estas actualizaciones se pueden realizar utilizando regiones editables, paneles de datos y la barra lateral.

Sigue la guía de CloudCannon para configurar la edición visual (también disponible en el panel de control de tu sitio). Esta te mostrará cómo definir regiones editables de tu vista previa en vivo mediante el uso de atributos HTML data- en elementos del DOM, o insertando componentes web.

Por ejemplo, la siguiente plantilla crea un valor de author editable que se puede actualizar en la vista previa en vivo:

<p>By: <editable-text data-prop="author">{author}</editable-text></p>

Edición visual con componentes

CloudCannon te permite definir regiones editables de componentes para la renderización en vivo de componentes de Astro en el editor visual. Esto te brinda la misma experiencia de edición interactiva para tus componentes de Astro.

Instala el paquete @cloudcannon/editable-regions.
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install @cloudcannon/editable-regions
Ventana de la terminal
pnpm add @cloudcannon/editable-regions
Ventana de la terminal
yarn add @cloudcannon/editable-regions

Añade la integración editableRegions a tu configuración de Astro:

import { defineConfig } from 'astro/config';
import editableRegions from "@cloudcannon/editable-regions/astro-integration";

export default defineConfig({
  // ...
  integrations: [editableRegions()],
  // ...
});

Sigue las instrucciones de CloudCannon para registrar tus componentes. Esto le indica a CloudCannon que esos componentes deben ser empaquetados para su uso en el lado del cliente en el editor visual.

Añade los atributos adecuados a tus componentes para la edición visual. Por ejemplo, las siguientes propiedades del componente CTA.astro, como la descripción y el color del botón, se pueden actualizar en el editor visual de CloudCannon:

---
const { description, link, buttonText, buttonColor } = Astro.props;
---

<p data-editable="text" data-prop="description">{description}</p>
<a href={link}>
    <span data-editable="text" data-prop="buttonText" style={`background-color: ${buttonColor}`}>{buttonText}</span>
</a>

Habilidades de agentes para CloudCannon

CloudCannon ha publicado un conjunto de habilidades de código abierto para agentes de programación de IA. Ellos se encargan de las migraciones de nuevos sitios de Astro por ti: auditan tu contenido, escriben la configuración, añaden edición visual con regiones editables y verifiquen la compilación. Las habilidades son compuestas, por lo que puedes elegir ejecutar una migración completa o incorporar solo una parte, como añadir edición visual a un sitio de Astro que ya está en CloudCannon.

Ejecuta npx skills add CloudCannon/agent-skills --all en la raíz de tu proyecto
Abre tu proyecto en tu agente de programación de IA

Pídele al agente que migre tu sitio a CloudCannon:

Migrate this site to CloudCannon using the migrating-to-cloudcannon skill. If the skill is not found, look in .agents/, otherwise do not continue.

Recursos oficiales

Más guías de CMS

Socios de CMS destacados

CloudCannon

CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

Contribuir Comunidad Patrocinar