CloudCannon & Astro

CloudCannon est un système de gestion de contenu headless basé sur Git qui fournit un éditeur visuel pour votre contenu et vos composants d’interface utilisateur, offrant une riche expérience d’édition en direct.

Intégration avec Astro

Ce guide décrira le processus de configuration de CloudCannon en tant que CMS pour Astro à l’aide du tableau de bord de site de CloudCannon.

Le tableau de bord de site vous offre une vue organisée de vos fichiers Astro et la possibilité de les modifier à l’aide de :

Un éditeur de données pour la gestion des fichiers de données structurés et du balisage.
Un éditeur de contenu pour l’édition de texte enrichi WYSIWYG dans une interface minimale.
Un éditeur visuel pour un aperçu interactif de votre site, vous permettant de modifier directement sur la page.

Vous pouvez également configurer un accès par rôle à l’éditeur de source minimal, un éditeur de code dans le navigateur pour apporter des modifications mineures au code source de vos fichiers.

Prérequis

Un compte CloudCannon. Si vous n’avez pas de compte, vous pouvez vous inscrire sur CloudCannon.
Un projet Astro existant, sauvegardé localement ou sur l’un des fournisseurs Git pris en charge par CloudCannon : GitHub, GitLab ou Bitbucket. Si vous n’avez pas de projet existant, vous pouvez commencer avec le modèle de démarrage pour Astro de CloudCannon.

Configurer un nouveau site CloudCannon

Les étapes suivantes vous permettront de configurer un nouveau site CloudCannon depuis votre tableau de bord. Ce site se connectera à un dépôt Astro existant et vous permettra de gérer et de modifier votre contenu grâce à l’éditeur de texte WYSIWYG de CloudCannon.

Sur la page d’accueil de votre organisation CloudCannon, créez un nouveau site.
Authentifiez votre fournisseur Git et sélectionnez le dépôt Astro auquel vous souhaitez vous connecter.
Choisissez un nom pour votre site, puis CloudCannon créera le site et commencera à synchroniser vos fichiers.
Suivez les instructions de CloudCannon dans le tableau de bord de votre site pour finaliser sa configuration, notamment la création d’un fichier de configuration CloudCannon (cloudcannon.config.yml).
Enregistrez votre fichier de configuration pour l’intégrer à votre dépôt Git avec vos préférences CloudCannon.

Vous pouvez désormais explorer le tableau de bord de votre site pour consulter vos fichiers Astro et les modifier avec l’éditeur de contenu.

Vous pouvez également profiter de certaines fonctionnalités de CloudCannon, telles qu’organiser vos fichiers en collections, créer des schémas CloudCannon et configurer votre projet pour l’édition visuelle.

Pour des instructions plus détaillées, consultez le guide de démarrage de CloudCannon.

Les collections et schémas de CloudCannon

Si vous utilisez les collections de contenu d’Astro, vous serez familiarisé avec les concepts de collections (utilisés pour l’organisation/la navigation dans votre tableau de bord de site) et de schémas (utilisés pour définir le format des nouvelles entrées de contenu) de CloudCannon.

Le tableau de bord de site de CloudCannon vous permet d’organiser les pages et le contenu de votre projet Astro en collections : des groupes de fichiers apparentés présentant un format similaire. Il vous permet de visualiser les contenus similaires ensemble pour faciliter leur édition et rend vos fichiers de contenu faciles à parcourir, à trier et à filtrer.

Créer un schéma CloudCannon pour une collection

Pour garantir que les propriétés de données de vos entrées CloudCannon correspondent au schéma de validation Zod (schema) défini dans votre collection de contenu, vous pouvez créer un schéma CloudCannon (un modèle de document vierge pour créer une nouvelle entrée). La création d’un modèle de schéma permet de garantir que tous les nouveaux documents créés dans CloudCannon posséderont les propriétés requises par votre collection de contenu et d’éviter les erreurs de type dans votre projet. Votre schéma CloudCannon peut également inclure des valeurs par défaut pour initialiser les nouveaux documents, comme le nom de l’auteur pour un blog individuel.

L’exemple suivant crée un schéma CloudCannon à partir d’une collection de contenu Astro (blog) pour les articles de blog rédigés en Markdown. Ce schéma sera disponible lors de la création d’une nouvelle entrée à partir de la collection « Articles » de CloudCannon :

Créez un dossier à l’emplacement .cloudcannon/schemas/ s’il n’existe pas déjà.
Ajoutez un fichier vierge existant dans ce dossier pour l’utiliser comme modèle d’article de blog par défaut. Le nom n’a pas d’importance, mais le fichier doit avoir la même extension que les entrées de votre collection de contenu Astro (par exemple, article.md).
Fournissez les champs du frontmatter requis par le schéma de votre collection de contenu. Vous n’avez pas besoin de fournir de valeurs pour ces champs, mais tout contenu que vous incluez sera automatiquement intégré lors de la création d’une nouvelle entrée. Ces champs seront disponibles dans la barre latérale de votre éditeur de contenu.

L’exemple de schéma suivant pour un article de blog comporte des espaces réservés pour le titre, l’auteur et la date :
.cloudcannon/schemas/article.md
```
---
title:
author:
date:
---
```

Dans la propriété collections_config de votre fichier de configuration CloudCannon, ajoutez le chemin d’accès à votre schéma sous la collection CloudCannon, dans la collection « Articles ».

collections_config:
  posts:
    path: content/blog
    name: Articles
    icon: post_add
    schemas:
      default:
        path: .cloudcannon/schemas/article.md
        name: Article de blog

Création d’une nouvelle entrée

Dans le tableau de bord de site de CloudCannon, vous pouvez créer du nouveau contenu à l’aide du bouton Add (« Ajouter »). Vous pourrez sélectionner un type d’entrée parmi les schémas que vous avez définis dans cloudcannon.config.yml, en fonction de la collection dans laquelle vous vous trouvez actuellement.

Vous pouvez également téléverser des fichiers sur CloudCannon ou créer de nouveaux fichiers directement dans votre projet Astro. Lorsque vous enregistrez les modifications apportées à votre site, les nouveaux fichiers créés à l’un ou l’autre emplacement seront synchronisés et disponibles à la fois dans CloudCannon et dans votre projet Astro.

L’exemple suivant créera un nouvel article de blog à partir de la collection « Articles » du tableau de bord de site de CloudCannon en utilisant le modèle de schéma article.md créé pour correspondre à la collection de contenu blog d’Astro :

Dans le tableau de bord de site de CloudCannon, accédez à la collection correspondant au type de contenu que vous souhaitez ajouter. Par exemple, accédez à la collection « Articles » pour ajouter un nouvel article de blog.
Utilisez le bouton Add (« Ajouter ») pour créer un nouvel article. Si vous avez configuré le schéma article.md de CloudCannon, vous pouvez alors choisir l’article de blog par défaut pour créer un nouvel article.
Remplissez les champs nécessaires dans la barre latérale de votre éditeur de contenu (par exemple title, author, date), puis publiez votre contenu et enregistrez-le.
Cet article est enregistré localement dans CloudCannon et devrait maintenant être visible depuis le tableau de bord de votre site, dans votre collection « Articles ». Vous pouvez consulter et modifier tous vos articles individuellement depuis cette page du tableau de bord.
Lorsque vous serez prêt à enregistrer ce nouvel article dans votre dépôt Astro, sélectionnez « Enregistrer » dans la barre latérale de navigation du site, depuis votre tableau de bord. Vous verrez ainsi toutes les modifications non enregistrées apportées à votre site depuis le dernier commit dans votre dépôt, ce qui vous permettra de les examiner et de sélectionner celles à conserver ou à supprimer.
Retournez à l’affichage de vos fichiers de projet Astro et récupérez les modifications depuis Git. Vous trouverez désormais un nouveau fichier .md dans le répertoire spécifié pour ce nouvel article, par exemple :
- Répertoiresrc/
  - Répertoirecontent/
    Répertoireblog/
    mon-nouvel-article.md

Ouvrez ce fichier dans votre éditeur de code et vérifiez que vous pouvez voir le contenu Markdown que vous avez saisi. Par exemple :

---
title: Mon nouvel article
author: Sarah
date: 2025-11-12
---

Voici mon tout premier message publié sur CloudCannon. Je suis **vraiment** excitée !

Affichage du contenu de CloudCannon

Utilisez l’API des collections de contenu d’Astro pour interroger et afficher vos articles et collections, comme vous le feriez dans n’importe quel projet Astro.

Affichage d’une liste pour une collection

L’exemple suivant affiche la liste des titres de chaque article, avec un lien vers la page de chaque article.

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

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

Affichage d’une seule entrée

Pour afficher le contenu d’un article individuel, vous pouvez importer et utiliser le composant <Content /> pour restituer votre contenu en HTML :

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

const entry = await getEntry('blog', 'mon-premier-article');
const { Content } = await render(entry);
---

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

Pour plus d’informations sur la requête, le filtrage, l’affichage du contenu de vos collections et plus encore, consultez la documentation complète des collections de contenu.

Déploiement de CloudCannon + Astro

Pour déployer votre site web, consultez nos guides de déploiement et suivez les instructions de votre fournisseur d’hébergement préféré.

Configurer l’édition visuelle

L’éditeur visuel de CloudCannon vous permet d’afficher et de modifier le texte, les images et autres contenus dans un aperçu interactif en direct de votre site. Ces modifications peuvent être effectuées à l’aide des zones modifiables, des panneaux de données et de la barre latérale.

Suivez le guide de CloudCannon pour configurer l’édition visuelle (également disponible dans votre tableau de bord de site). Ceci vous montrera comment définir des zones modifiables dans votre aperçu en direct en définissant des attributs HTML data- sur des éléments DOM ou en insérant des composants web.

Par exemple, le modèle suivant crée une valeur author modifiable qui peut être mise à jour dans l’aperçu en direct :

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

Édition visuelle avec des composants

CloudCannon vous permet de définir des zones éditables pour les composants pour le rendu en direct des composants Astro dans l’éditeur visuel. Vous bénéficiez ainsi d’une expérience d’édition interactive identique pour vos composants Astro.

Installez le paquet @cloudcannon/editable-regions.
- npm
- pnpm
- Yarn
Fenêtre du terminal
npm install @cloudcannon/editable-regions
Fenêtre du terminal
pnpm add @cloudcannon/editable-regions
Fenêtre du terminal
yarn add @cloudcannon/editable-regions

Ajoutez l’intégration editableRegions à votre configuration Astro :

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

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

Suivez les instructions de CloudCannon pour enregistrer vos composants. Cela indique à CloudCannon que ces composants doivent être regroupés pour une utilisation côté client dans l’éditeur visuel.

Ajoutez les attributs appropriés à vos composants pour l’édition visuelle. Par exemple, les propriétés suivantes du composant CTA.astro, telles que la description et la couleur du bouton, peuvent être mises à jour dans l’éditeur visuel 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>

Ressources officielles

Ressources communautaires

Vidéo : CMS Astro pour l’édition visuelle : Premiers pas avec CloudCannon (Anglais)

Plus de guides sur les CMS

Contribuer Communauté Parrainer