Aller au contenu principal

Website Builder Webstudio

Webflow verrouille vos sites sur son infrastructure. Vous payez par projet, par siège, et vous ne pouvez pas exporter le code proprement. Webstudio est un builder visuel open source qui génère du HTML/CSS statique. Vos sites, votre code, votre hébergement. France Nuage le fait tourner pour vous, en France.

Pourquoi Webstudio ?

Webstudio donne accès à l'intégralité des propriétés CSS, là où Webflow impose des abstractions. Le résultat : vous contrôlez tout ce qui se passe dans le navigateur.

  • CSS complet : toutes les propriétés CSS accessibles, pas de couche d'abstraction entre vous et le navigateur
  • Intégrations CMS headless : Strapi, WordPress, Notion, Airtable, Contentful, Sanity, et une dizaine d'autres
  • Sites statiques : le builder publie du HTML/CSS/JS pur, servi par Nginx. Pas de runtime lourd côté visiteur
  • Pas de lock-in : le code généré vous appartient, exportable à tout moment
  • AGPL-3.0 : le code source est auditable, le projet ne peut pas devenir propriétaire

Le schéma ci-dessous montre comment les différents composants s'articulent, du builder jusqu'aux sites publiés :

Comparatif

CritèreFrance NuageWebflowWixWordPress.comFramer
Open sourceOui (AGPLv3)NonNonPartiellementNon
Hébergement souverainOui (France)Non (USA)Non (USA)Non (USA)Non (USA)
CSS completOuiPartielNonVia thèmePartiel
CMS headless15+ intégrationsPropriétairePropriétaireREST APINon
Export HTML/CSSOuiLimitéNonNonNon
Prix par projetNonOui (à partir de $14/mois)OuiOuiOui
Prix par siègeNonOuiNonNonOui
Sites illimitésOuiNonNonNonNon

Ce qui change concrètement

Le code source est sous AGPL-3.0 : vous pouvez l'auditer, le modifier, le redistribuer. Si France Nuage disparaît demain, vous récupérez vos données et réinstallez Webstudio ailleurs. Pas de surprise.

Pas de tarification par projet ni par siège. Vous payez l'infrastructure, point. Le nombre de sites que vous créez dessus ne change rien à la facture.

Les sites publiés sont du HTML/CSS statique servi par Nginx. Le temps de chargement est minimal, il n'y a pas de framework JavaScript côté visiteur, et le SEO s'en porte bien.

Portabilité

  • Export HTML/CSS : chaque site publié est un ensemble de fichiers statiques récupérables
  • Base PostgreSQL : vos projets sont dans une base standard, exportable via la commande pg_dump
  • Stockage S3 : vos assets (images, fichiers) sont dans MinIO, compatible S3, donc migrables vers n'importe quel stockage S3
  • AGPL-3.0 : le code reste libre, pas de risque de fermeture propriétaire

France Nuage vs auto-hébergement

Installer Webstudio soi-même demande de gérer 6 services coordonnés. C'est faisable, mais il faut savoir où on met les pieds :

AspectAuto-hébergementFrance Nuage
PostgreSQLÀ installer et maintenirManagé
MinIO (stockage S3)À configurerPré-configuré
Wildcard DNS3 zones à configurerConfiguré
Wildcard TLSCertificats à renouvelerAutomatique
Nginx (sites publiés)À configurerInclus
SauvegardesÀ mettre en placeAutomatiques
Mises à jourÀ surveillerAppliquées
Monitoring 24/7À construireInclus

Le vrai point sensible, c'est le wildcard DNS et TLS. Webstudio a besoin de trois zones de nom de domaine avec certificats wildcard : une pour le builder, une pour les previews, une pour les sites publiés. Chez France Nuage, c'est géré d'office, donc pas de tickets à des ops, pas d'intervention manuelle :)

Démarrage rapide

1. Déployer depuis la console

  1. Rendez-vous sur console.france-nuage.fr
  2. Créez votre compte ou connectez-vous
  3. Puis déployez Webstudio depuis le catalogue de services
  4. Quelques minutes plus tard, le builder est accessible

2. Créer votre premier site

  1. Ouvrez le builder à l'adresse fournie
  2. Partez d'un template ou d'une page vide
  3. Glissez-déposez des composants, puis modifiez les styles directement dans le panneau CSS
  4. Prévisualisez en temps réel sur le canvas

3. Publier

  1. Cliquez sur Publish
  2. Le publisher génère alors les fichiers HTML/CSS/JS statiques
  3. Nginx sert le site immédiatement sur votre nom de domaine

Aller plus loin

Intégrations CMS headless

Connectez votre source de contenu préférée. Webstudio supporte entre autres Strapi, WordPress, Contentful et Sanity pour du contenu structuré. Pour des données en mode tableur, il y a Notion, Airtable et Baserow. Et pour des backends sur mesure, Supabase, Hygraph ou Directus font l'affaire.

Le contenu est injecté dans les composants visuels via des bindings. Quand le CMS est mis à jour, un re-publish suffit pour mettre le site à jour.

Pages dynamiques

Vous pouvez créer des pages générées à partir de vos données CMS : des pages produit depuis Strapi, des articles de blog depuis WordPress, des fiches depuis Airtable. Chaque entrée du CMS génère une page statique avec son URL propre.

Formulaires

Les formulaires sont intégrés au builder. Les soumissions peuvent être envoyées par webhook vers n'importe quel backend, ou stockées directement dans Webstudio.

Bonnes pratiques

  • Structurez vos composants en réutilisables dès le départ, le builder le gère bien
  • Utilisez les intégrations CMS pour tout contenu qui change régulièrement
  • Publiez sur un nom de domaine personnalisé pour le SEO
  • Exportez régulièrement vos données PostgreSQL via pg_dump comme backup supplémentaire
  • Testez vos pages sur mobile directement dans le builder (le responsive est intégré)

Références