Aller au contenu

Qu'est-ce que Silex

Silex est un constructeur de sites web visuel, gratuit et open-source. Vous concevez vos sites visuellement dans l'éditeur, Silex produit du HTML et du CSS propres, et vos sites peuvent être publiés n'importe où.

Silex est conçu pour les designers et les créateurs qui veulent acquérir de vraies compétences web transférables — pas un enfermement propriétaire. Silex est une couche visuelle par dessus le code HTML/CSS et les sites statiques (JAMStack). Vous utilisez les vrais concept du web design, si vous quittez Silex demain, ce que vous avez appris vous sera utile en dehors de Silex.

Trois choses distinguent Silex des constructeurs commerciaux comme Webflow ou Wix :

Open-source et gratuit

Silex est entièrement gratuit. Le code est open-source sur GitHub, sous licence GNU Affero General Public License. Vous pouvez le forker, le modifier, l'héberger vous-même ou le redistribuer. Il n'y a pas de paywall, pas de niveau premium, pas de « fonctionnalités pro verrouillées derrière un abonnement ». Si vous voulez comprendre comment l'éditeur fonctionne ou l'étendre avec des plugins personnalisés, vous le pouvez. La communauté en est propriétaire.

Du vrai CSS et HTML — pas d'enfermement

Webflow et Wix vous maintiennent dans leur écosystème. Si vous voulez déplacer votre site ailleurs, vous êtes coincé à exporter dans un format quelconque et à tout reconstruire de zéro. Silex est différent. Chaque site que vous concevez dans Silex produit du HTML et du CSS valides et sémantiques. Vous pouvez prendre ce code, le déplacer vers n'importe quelle plateforme d'hébergement et continuer à le maintenir avec des outils web standards. Vos amis designers, un développeur freelance ou votre propre éditeur de code — tout le monde peut lire et modifier le HTML. Vous n'apprenez pas « Webflow » ; vous apprenez le CSS, le même standard qui fait fonctionner tous les sites web.

Des outils de niveau professionnel

Silex inclut des fonctionnalités CSS qui rivalisent avec les constructeurs commerciaux :

Comment ça fonctionne

Phase de conception : Vous utilisez l'éditeur visuel pour disposer les éléments, les styliser avec du CSS et les connecter à des sources de données. Vous prévisualisez votre travail en temps réel sur le canevas.

Phase de publication : Quand vous êtes prêt, vous cliquez sur Publier. Silex transforme votre design en site web statique (en utilisant le générateur de site statique build awesome (propulsé par Eleventy)) et le téléverse sur votre hébergement — généralement GitLab Pages, mais tout hébergeur fonctionne. Votre site est alors en ligne.

Données dynamiques : Si vous avez connecté un CMS comme WordPress, vos pages peuvent récupérer du contenu dynamiquement. La même mise en page peut afficher différents articles de blog, produits ou témoignages selon ce qui se trouve dans votre base de données.

Où utiliser Silex

Silex convient parfaitement pour :

  • Sites marketing — portfolios, sites d'agence, pages d'atterrissage, brochures
  • Blogs et sites éditoriaux — sites axés sur le contenu avec WordPress ou un autre CMS
  • Petits sites e-commerce — vitrines de produits (les transactions e-commerce ne sont pas encore supportées)
  • Sites de documentation — avec des données CMS ou du contenu codé à la main
  • Prototypes rapides — mettez en ligne un vrai site en quelques minutes, sans backend

Silex peut aussi fonctionner sur votre bureau grâce à l'application Silex Desktop (actuellement en développement — une application Tauri pour Windows, macOS et Linux).

Silex vs Webflow

Fonctionnalité Silex Webflow
Prix Gratuit (open-source) 14–155 $/mois
Enfermement Aucun — export HTML/CSS Lié à l'hébergement Webflow
Propriété du code Vous possédez le code Webflow en est propriétaire
Auto-hébergement Oui, via Docker/Node Uniquement sur le plan Enterprise
CSS Grid Pas encore Oui
Flexibilité CMS N'importe quelle API GraphQL CMS Webflow uniquement
Plugins communautaires En croissance, open-source Écosystème de partenaires payant

Silex vs Wix

Fonctionnalité Silex Wix
Prix Gratuit 17–500 $/mois
Export du code HTML/CSS complet Limité, format propriétaire
Courbe d'apprentissage Suppose une familiarité avec le CSS Conçu pour les utilisateurs non techniques
Personnalisation Illimitée — c'est du HTML Limité aux templates
Public cible Créateurs, développeurs, designers Petites entreprises, débutants

Bon à savoir

  • Les templates sont disponibles en tant que points de départ créés par la communauté sur silex.me/templates. Votez pour le support intégré des templates sur la feuille de route pour les parcourir et les utiliser directement depuis le tableau de bord.
  • Les noms de domaine ne sont pas inclus. Achetez-en un chez n'importe quel registrar et connectez-le — voir Domaine personnalisé.
  • Vie privée : Silex ne collecte ni ne vend les données des utilisateurs. Vos sites vous appartiennent, sous la licence de votre choix.
  • E-commerce : Vous pouvez intégrer des services comme Snipcart, des boutons PayPal (via du code personnalisé), ou connecter les données produits de WooCommerce ou Shopify via la fonctionnalité CMS.

Ce que vous allez apprendre

Cette documentation vous apprend à utiliser Silex en tant que designer. À la fin :

  • Vous comprendrez l'interface de l'éditeur et le fonctionnement de chaque outil
  • Vous concevrez des pages responsives avec Flexbox et les breakpoints
  • Vous utiliserez les variables CSS pour construire des systèmes de design cohérents
  • Vous connecterez des données réelles depuis WordPress ou d'autres API
  • Vous publierez votre site et connecterez un domaine personnalisé

Vous acquerrez également de vraies compétences en CSS et HTML en chemin — des compétences transférables à n'importe quel projet.

Rejoignez la communauté

Silex est construit par des bénévoles. Que vous soyez designer, développeur ou simplement quelqu'un qui se soucie des outils open-source — vous êtes les bienvenus.

  • Chat communautaire — posez des questions, partagez votre travail, obtenez de l'aide
  • Forum — discussions approfondies et tutoriels
  • Contribuer — façons d'aider, des tests à la création de templates
  • Feuille de route — votez pour les fonctionnalités que vous souhaitez le plus
  • Événements — rencontres et ateliers

Prochaines étapes

Prêt à construire ? Commencez par le Démarrage rapide — créez votre première page et publiez-la en 5 minutes.

Quiz

Q1 : Que se passe-t-il avec votre code quand vous quittez Silex ?

  • A) Il est enfermé dans Silex et ne peut pas être déplacé
  • B) Il s'exporte en HTML et CSS propres que vous pouvez utiliser n'importe où
  • C) Vous devez le reconstruire sur une autre plateforme
Réponse

B) Il s'exporte en HTML et CSS propres que vous pouvez utiliser n'importe où — Silex génère du code web standard, pas du balisage propriétaire.

Q2 : Sous quelle licence est distribué Silex ?

  • A) MIT (permissive, compatible usage commercial)
  • B) GNU Affero General Public License (open-source, gratuit)
  • C) Propriétaire (code source fermé, commercial)
Réponse

B) GNU Affero General Public License — Silex est entièrement open-source et gratuit.

Q3 : Quelle méthode de mise en page CSS est supportée par Silex ?

  • A) CSS Grid uniquement
  • B) Flexbox et CSS Grid
  • C) Flexbox (CSS Grid est sur la feuille de route)
Réponse

C) Flexbox — Le support de CSS Grid est une fonctionnalité prévue. Flexbox couvre la majorité des besoins de mise en page.

Q4 : Vous souhaitez utiliser votre blog WordPress comme source de données dans Silex. Est-ce possible ?

  • A) Non, Silex ne supporte que les bases de données personnalisées
  • B) Oui, via GraphQL grâce au plugin WPGraphQL
  • C) Oui, mais vous devez importer le contenu manuellement
Réponse

B) Oui, via GraphQL grâce au plugin WPGraphQL — Silex se connecte à n'importe quelle API GraphQL, et WordPress peut exposer ses données via WPGraphQL.

Q5 : Quel est le principal avantage du modèle open-source de Silex ?

  • A) C'est moins cher que les constructeurs commerciaux
  • B) Vous possédez votre code et n'êtes pas enfermé dans une plateforme
  • C) Il a plus de fonctionnalités que Webflow
Réponse

B) Vous possédez votre code et n'êtes pas enfermé dans une plateforme — L'open-source signifie transparence, contrôle et portabilité.

Éditer cette page sur GitLab