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¶
- Un navigateur web (Chrome, Firefox, Safari ou Edge)
- Un compte gratuit sur une instance GitLab (voir ci-dessous)
- 5 minutes
Étape 1 : Créer un compte GitLab¶
Silex stocke les fichiers de votre site sur GitLab et publie sur GitLab Pages. Vous avez besoin d'un compte gratuit sur l'une de ces plateformes :
- 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é. Idéal si vous préférez un hébergement éthique.
Pour créer un compte GitLab.com :
- Rendez-vous sur gitlab.com/users/sign_up
- Remplissez votre nom, nom d'utilisateur, email et mot de passe
- Vérifiez votre email (consultez votre boîte de réception)
- Vérifiez votre numéro de téléphone par SMS (requis par GitLab pour les nouveaux comptes)
C'est tout — votre compte est prêt.
Alternative : stockage FTP. Si vous avez déjà un hébergeur web avec un accès FTP, vous pouvez utiliser Silex sans GitLab. Sur l'écran de connexion, cliquez sur « Utilisateurs avancés » 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 : Se connecter à Silex¶
Ouvrez https://v3.silex.me dans votre navigateur.
Cliquez sur GitLab.com (ou votre instance préférée) et autorisez Silex à accéder à votre compte. Cela permet à Silex de créer un dépôt pour les fichiers de votre site et de publier sur GitLab Pages.
Une fois connecté, vous voyez le tableau de bord avec un message de bienvenue (« Welcome, let's get started »). Deux boutons sont disponibles : + Create website pour partir d'une page vierge, ou From a template pour utiliser un design prêt à l'emploi. Si vous n'avez pas encore de sites, le tableau de bord affiche un état vide avec une illustration et le message « Ready to start your journey? ».
Si vous cliquez sur From a template, vous verrez la page des templates communautaires avec des designs gratuits que vous pouvez utiliser comme point de départ.
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.
Étape 3 : Créer votre site¶
À partir d'une page vierge : Cliquez sur + Create website dans le tableau de bord. Silex crée un nouveau projet GitLab et ouvre l'éditeur avec un canevas vide.
À partir d'un template : Après avoir cliqué sur Edit in Silex sur la page d'un template, Silex forke automatiquement 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 4 : 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 5 : 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 6 : 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 :
- Transformer votre design en HTML et CSS
- Le commiter dans votre dépôt GitLab
- Déclencher un build awesome (propulsé par Eleventy) via GitLab CI
- 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 7 (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.