Insights / Articles techniques
Concevoir un site Astro + Cloudflare qui grandit fonctionnalité par fonctionnalité
Comment nous avons combiné Astro et Cloudflare Pages avec un chat IA, Sveltia CMS, un blog multilingue, des CTA de services, un rendu Markdown sécurisé et des commentaires sans service externe.
Sommaire
Quand on démarre avec Astro et Cloudflare Pages, des pages statiques rapides et sûres suffisent souvent.
Avec le temps, de nouveaux besoins arrivent : édition depuis le navigateur, pages localisées, orientation par chat IA, transmission du contexte au formulaire et commentaires.
Cet article est un index d’implémentation : il aide à décider dans quelle couche placer chaque fonction, dans quel ordre les ajouter et quel guide lire ensuite. L’exemple vient du site Acecore, mais le modèle s’applique à d’autres sites Astro + Cloudflare.
Résumé
L’architecture sépare les rôles :
| Couche | Rôle |
|---|---|
| Astro | Pages, blog, OGP, RSS, sitemap et UI |
| Cloudflare | Pages, Pages Functions, D1 et Turnstile |
| GitHub | PR, diffs CMS, traductions et historique |
| Sveltia CMS | Source japonaise, auteurs, tags, images |
| OpenAI API | Réponses du chat de contact |
| Pagefind | Index de recherche pour HTML revu |
Ce qui peut être statique reste statique. Le dynamique passe par de petites API.
Petites API sur Cloudflare
Le chat IA et les commentaires suivent le même modèle.
Astro rend l’interface. Pages Functions gère la frontière API. Les secrets, bindings D1, Turnstile, Origin checks et rate limits restent côté serveur.
CMS comme surface d’édition
Sveltia CMS n’est pas une base de données runtime. Il crée des changements Git.
Le contenu japonais, les auteurs, tags, images et JSON passent par PR, build et review.
Traduction comme contenu statique
La localisation n’est pas une traduction de l’interface au moment de l’affichage.
Chaque langue a sa propre URL, son title, sa description, ses métadonnées OGP, JSON-LD, RSS, sitemap et hreflang.
Canaux de contact séparés
Le chat IA aide les visiteurs qui hésitent. Le CTA de service conserve le contexte. Le formulaire enregistre la demande formelle.
Chaque canal a son rôle.
La sortie IA n’est pas du HTML fiable
Les liens Markdown de l’IA sont traités comme du texte jusqu’à validation.
Seuls les liens autorisés par allowlist deviennent des éléments DOM sûrs.
Commentaires dans Cloudflare
Les commentaires ne reposent pas sur un widget externe.
Pages Functions reçoit GET/POST, D1 stocke les commentaires et Turnstile protège les envois.
Lire par objectif
Il n’est pas nécessaire de tout lire d’abord. Commencez par la fonction à ajouter.
| Objectif | Lire d’abord |
|---|---|
| Modifier articles et images depuis le navigateur | Guide d’installation de Sveltia CMS |
| Publier des pages multilingues indexables | Exploiter un blog multilingue avec Sveltia CMS |
| Guider les visiteurs avec le chat IA | Conception technique du chat IA de contact |
| Rendre des liens sûrs dans les réponses IA | Rendu sécurisé des liens Markdown dans les réponses IA |
| Transmettre le contexte du service au formulaire | Transmettre le contexte du CTA au formulaire |
| Ajouter des commentaires sans service externe | Commentaires de blog Astro avec Cloudflare seulement |
Ordre d’implémentation
Pour un site similaire, l’ordre pratique est :
- Stabiliser les pages statiques, le blog, RSS, sitemap et OGP avec Astro.
- Ajouter Sveltia CMS pour modifier la source japonaise.
- Générer les pages localisées en HTML statique.
- Ajouter le guidage par chat IA et les CTA de services.
- Verrouiller les liens Markdown, le prefill de formulaire, les Origin checks et les rate limits.
- Ajouter les commentaires dans Cloudflare seulement quand ils deviennent nécessaires.
Conclusion
Astro + Cloudflare permet d’étendre un site institutionnel sans perdre les avantages du statique.
Utilisez cette page comme point d’entrée et n’ajoutez que les éléments dont votre site a besoin, sans affaiblir la base statique.
Site Architecture
Couches d'extension du site
Garder le site statique par défaut et ajouter du dynamique seulement où c'est nécessaire.
Livrer
Générer le HTML avec Astro et le servir sur Cloudflare Pages.
Éditer
Modifier la source japonaise dans Sveltia CMS et revoir par PR.
Traduire
Garder les traductions dans des PR plutôt que dans toute l'interface CMS.
Guider
Utiliser le chat IA et les CTA de services pour orienter vers le bon formulaire.
Différences entre ajouter des fonctions isolées et les intégrer à une architecture globale
Ajouter chaque fonction séparément
- L’IA, le CMS, les commentaires et les formulaires finissent par suivre des principes de conception différents
- Les scripts et interfaces de services externes se multiplient, dispersant la responsabilité d’explication
- Des écarts apparaissent facilement entre les URL multilingues, l’index de recherche et l’environnement de prévisualisation
- Les relations entre fonctions restent invisibles et l’ordre d’adoption est difficile à décider
Ajouter par couches
- Les rôles d’Astro, Cloudflare, GitHub et de l’API OpenAI peuvent être expliqués séparément
- Les API dynamiques sont regroupées dans Pages Functions et le stockage peut être rapproché de Cloudflare avec D1
- Les mises à jour du CMS, les traductions, la recherche, RSS et sitemap partagent la même structure de contenu
- La page se parcourt facilement comme un index par usage et ordre d’adoption
Vérifications de conception pour réutiliser cette architecture sur un autre site
- Séparer ce qui peut être généré statiquement de ce qui nécessite une API
- Séparer le CMS comme entrée d’édition, la traduction sous forme de PR et la décision de publication au build
- Ne pas transmettre de données personnelles à l’IA de contact et la laisser guider uniquement avec des informations publiées
- Transmettre le contexte du formulaire par des paramètres d’URL et conserver des valeurs reçues stables
- Définir explicitement dans la configuration le nom physique de D1 et son binding pour les données soumises, comme les commentaires
- Ne pas faire confiance aux sorties d’IA ni aux contributions utilisateur comme HTML et les traiter par listes d’autorisation
Pages associées
- Conception technique du chat IA de contactFrontières API et contrôle des réponses avec les informations du site.
- Guide d'installation de Sveltia CMSCMS, GitHub backend, OAuth et exploitation par PR pour un site statique.
- Exploiter un blog multilingue avec Sveltia CMSPublier des pages statiques localisées au lieu d'une traduction uniquement en UI.
- Transmettre le contexte du CTA au formulaireConserver le service consulté dans la catégorie et le sujet du formulaire.
- Rendu sécurisé des liens Markdown de l'IARendre seulement les liens autorisés sans traiter la sortie IA comme du HTML fiable.
- Commentaires de blog avec Cloudflare seulementCommentaires sans service externe, avec Pages Functions, D1 et Turnstile.
Questions fréquentes
Par où faut-il commencer ?
Commencez par consolider les pages statiques Astro, le blog, RSS, sitemap et OGP. Ajoutez ensuite le CMS et les langues ; lorsque le parcours de contact devient nécessaire, ajoutez le chat IA, les CTA de services et les commentaires.
Faut-il tout construire uniquement avec Cloudflare ?
Non. Certaines parties, comme l’IA de contact, utilisent l’API OpenAI. L’essentiel est de rapprocher de Cloudflare la diffusion, la frontière des API, la base de données et la protection antibot, tout en choisissant consciemment où employer des services externes.
Un petit site a-t-il besoin de tout cela ?
Il n’est pas nécessaire de tout intégrer dès le départ. Mais si vous prévoyez un CMS, un parcours de contact, plusieurs langues ou des commentaires, décider tôt des URL, du stockage, de l’environnement de prévisualisation et de l’index de recherche facilitera la suite.