Démarrage rapide

Créez votre premier site Silex et publiez-le en 5 minutes grâce à la version hébergée sur v3.silex.me.

À la fin de ce tutoriel, vous aurez un site en ligne avec votre propre contenu.

Ce dont vous aurez besoin

• Une version récente de Chrome ou Firefox (les seuls navigateurs officiellement supportés — Edge, Brave et autres Chromium fonctionnent en général mais ne sont pas testés ; Safari a des problèmes connus)
• Un compte gitlab.com ou Framagit (ou une autre instance GitLab, si l'instance Silex que vous utilisez est configurée pour). Pas encore de compte ? Vous en créerez un à l'Étape 1 — voir S'inscrire sur GitLab pour le pas à pas complet.
• 5 minutes

Étape 1 : Se connecter à Silex

Ouvrez https://v3.silex.me dans votre navigateur. Deux boutons de connexion s'affichent :

• GitLab.com — l'instance principale, recommandée pour la plupart des utilisateurs.
• Framagit — une instance GitLab libre hébergée par Framasoft, une association française à but non lucratif. Pas de traçage, pas de publicité, et pas de vérification SMS.

Cliquez sur celui que vous préférez. Vous êtes redirigé vers ce fournisseur :

• Si vous avez déjà un compte, autorisez simplement Silex.
• Sinon, la même page propose une inscription gratuite — créez un compte, puis autorisez Silex. Besoin d'aide ? Voir S'inscrire sur GitLab pour le pas à pas.

Dans les deux cas, vous revenez sur Silex avec le tableau de bord ouvert.

Alternative : stockage FTP. Si vous avez déjà un hébergeur web avec un accès FTP, cliquez sur Utilisateurs avancés sur l'écran de connexion et entrez vos identifiants FTP. Vos sites seront stockés sur votre serveur FTP au lieu de GitLab. Note : le FTP ne fournit pas d'hébergement gratuit comme GitLab Pages — vous avez besoin de votre propre hébergement.

Étape 2 : Créer votre site

Le tableau de bord affiche un message de bienvenue et deux options :

• + Create website — partir d'une page vierge.
• From a template — choisir un template communautaire comme point de départ.

À partir d'une page vierge : Cliquez sur + Create website. Silex crée un nouveau projet GitLab et ouvre l'éditeur avec un canevas vide.

À partir d'un template : Cliquez sur From a template pour parcourir la page des templates communautaires.

Cliquez sur un template pour voir ses détails, son aperçu et ses informations techniques. Cliquez sur Edit in Silex pour commencer à l'éditer immédiatement — Silex forke le template dans votre compte GitLab et l'ouvre dans l'éditeur. Le nom du site est généré automatiquement (vous pouvez le changer plus tard dans Settings > General).

Vous avez un projet HTML/CSS existant ? Votez pour Import Existing Project sur la feuille de route pour l'import de projets HTML/CSS dans Silex.

Étape 3 : Construire votre première page

L'éditeur affiche trois zones :

• Barre latérale gauche : Panneaux pour les blocs, pages, calques, symboles, polices, variables CSS et paramètres
• Canevas (centre) : Là où vous concevez visuellement
• Panneau droit : Style Manager (propriétés CSS) et contrôles de sélecteur

Ajouter un titre

Dans la barre latérale gauche, cliquez sur Blocs (l'icône +, ou appuyez sur Shift+A). Sous Basics, glissez un bloc Text sur le canevas. Double-cliquez dessus et tapez « Bienvenue sur mon site ». Ensuite, dans le panneau droit, cliquez sur l'icône Element settings (engrenage) et changez le menu déroulant Tag name de DIV à H1.

Ajouter du texte

Glissez un autre bloc Text sous le titre. Double-cliquez et ajoutez une courte description.

Ajouter une image

Sous Media dans le panneau Blocs, glissez un bloc Image sous le texte. Double-cliquez dessus pour ouvrir le gestionnaire de ressources et téléverser une photo.

Les disposer verticalement

Par défaut, les blocs s'empilent verticalement. Pour ajuster l'espacement, sélectionnez un élément, et dans le panneau droit ouvrez la section Dimension pour définir les valeurs de Margin et Padding.

Étape 4 : Ajouter un peu de style

Styliser le titre

Cliquez sur le titre sur le canevas. Dans le panneau droit, ouvrez la section Typography. Changez Color pour une couleur qui vous plaît. Augmentez la Font size pour l'agrandir.

Ajouter une couleur de fond

Cliquez sur l'espace vide du canevas (l'élément Body). Dans le panneau droit, ouvrez Decorations et définissez une Background color.

Centrer le contenu

Sélectionnez le conteneur qui englobe votre contenu et dans la section General définissez :

• Display : Flex

Puis dans la section Flex :

• Flex-direction : Column
• Justify-content : Center
• Align-items : Center

Votre contenu est maintenant centré.

Étape 5 : Publier

Cliquez sur le bouton Publier dans la barre d'outils supérieure (ou appuyez sur Alt+P).

Une boîte de dialogue apparaît affichant « Connected to GitLab.com » avec un bouton Publish. Cliquez dessus.

Silex va alors :

1. Transformer votre design en HTML et CSS
2. Le commiter dans votre dépôt GitLab
3. Déclencher un build awesome (propulsé par Eleventy) via GitLab CI
4. Déployer sur GitLab Pages

En environ 1-2 minutes, votre site est en ligne à une URL du type https://votre-nom-utilisateur.gitlab.io/slug-de-votre-site/.

Étape 6 (optionnelle) : Utiliser votre propre domaine

Votre site est en ligne sur un sous-domaine GitLab Pages. Pour utiliser un domaine personnalisé (comme monsite.com), consultez le guide Domaine personnalisé.

Prochaines étapes

Félicitations — vous avez publié votre premier site !

À partir d'ici :

• Découvrir l'éditeur : Lisez L'éditeur pour comprendre tous les panneaux et outils.
• Concevoir des mises en page responsives : Consultez Flexbox pour disposer les éléments sur toutes les tailles d'écran.
• Connecter des données réelles : Voir CMS et données pour récupérer du contenu depuis WordPress ou un autre service.
• Construire un site complet : Suivez le Tutoriel complet pour créer un portfolio d'agence multi-pages.
• Bloqué ? Demandez sur le chat communautaire — quelqu'un vous aidera.

---

Quiz

Q1 : De quoi avez-vous besoin pour publier un site Silex ?

• A) Un serveur dédié et un domaine
• B) Un compte GitLab pour héberger sur GitLab Pages
• C) Un compte Webflow pour l'intégration

Réponse

B) Un compte GitLab pour héberger sur GitLab Pages — GitLab fournit un hébergement gratuit de sites statiques. Vous pouvez aussi publier via FTP ou sur votre propre serveur.

Q2 : Que se passe-t-il quand vous cliquez sur Publier ?

• A) Silex sauvegarde votre design localement dans le navigateur
• B) Silex transforme votre design en HTML/CSS et le téléverse sur GitLab Pages
• C) Vous devez exporter et téléverser les fichiers manuellement

Réponse

B) Silex transforme votre design en HTML/CSS et le téléverse sur GitLab Pages — La publication est automatique et gère toutes les étapes de construction.

Q3 : Comment centrer le contenu sur votre page ?

• A) Utiliser les outils d'alignement dans le Style Manager (Display: Flex, Justify-content: center)
• B) Utiliser CSS Grid
• C) Silex le fait automatiquement

Réponse

A) Utiliser les outils d'alignement dans le Style Manager — Réglez Display sur Flex, Flex-direction sur column, Justify-content et Align-items sur center.

Q4 : Vous voulez changer la couleur du titre. Où allez-vous ?

• A) La barre latérale gauche (panneau Blocs)
• B) Le panneau droit (Style Manager), puis trouvez Color
• C) La barre d'outils supérieure

Réponse

B) Le panneau droit (Style Manager), puis trouvez Color — Tous les contrôles de style se trouvent dans le panneau droit quand vous sélectionnez un élément.

Q5 : Après la publication, votre site est accessible à quel type d'URL ?

• A) https://votre-domaine.com (vous devez posséder le domaine)
• B) https://votre-nom-utilisateur.gitlab.io/slug-de-votre-site/ (URL par défaut de GitLab Pages)
• C) https://v3.silex.me/votre-site (toujours sur Silex)

Réponse

B) https://votre-nom-utilisateur.gitlab.io/slug-de-votre-site/ — GitLab Pages vous donne un sous-domaine gratuit. Vous pouvez y associer un domaine personnalisé plus tard.