Aller au contenu

Comment fonctionne la publication

La publication dans Silex transforme votre design visuel en un site web en ligne, prêt à accueillir des visiteurs.

Lorsque vous cliquez sur Publier, Silex convertit votre site en fichiers HTML et CSS propres, les envoie vers un service de stockage (comme GitLab), puis construit et déploie automatiquement votre site sur le web. L'ensemble du processus est conçu pour être fluide — vous cliquez sur un bouton et votre site est en ligne.

Le pipeline de publication : du design au site en ligne

Voici ce qui se passe en coulisses lorsque vous publiez :

1. Vous cliquez sur Publier — La boîte de dialogue de publication s'ouvre. Vous choisissez où stocker et héberger votre site web. Pour la plupart des designers, il s'agit de GitLab Pages (hébergement gratuit inclus avec GitLab).

2. Silex transforme votre design — Votre design visuel est converti en HTML et CSS propres et sémantiques. Les Symboles sont résolus en composants réutilisables. Les variables CSS sont écrites. Les images et médias sont optimisés et préparés.

3. Les fichiers sont commités dans Git — Les fichiers transformés (HTML, CSS, ressources) sont commités dans un dépôt Git. Si vous utilisez GitLab, cela se fait automatiquement — Silex gère le commit Git pour vous.

4. GitLab CI lance un build — GitLab détecte le nouveau commit et lance automatiquement un pipeline de build. C'est là que build awesome (propulsé par Eleventy) entre en jeu.

5. Build awesome construit votre site — Build awesome est un générateur de sites statiques. Il prend vos fichiers HTML et les traite : il applique les shortcodes build awesome (si vous les utilisez), gère les pages de collection (pages générées à partir de données), et prépare tout pour le déploiement. Build awesome produit un dossier public/ contenant le HTML, le CSS et les ressources finaux.

6. GitLab Pages déploie — Le dossier public/ est automatiquement déployé sur GitLab Pages, un service d'hébergement gratuit. Votre site est désormais en ligne à une URL comme https://votreutilisateur.gitlab.io/votreprojet/.

7. Optionnel : domaine personnalisé — Vous pouvez faire pointer un domaine personnalisé (par ex. monsite.com) vers votre URL GitLab Pages à l'aide d'enregistrements DNS.

Pourquoi build awesome ?

Build awesome est un outil de build léger qui se situe entre vos fichiers de design et le site web en ligne. Bien que votre design Silex soit du HTML statique, build awesome ajoute des fonctionnalités puissantes sans que vous ayez besoin d'écrire du code :

  • Pages de collection — Si vous connectez votre site à un CMS (comme WordPress), build awesome peut générer plusieurs pages à partir d'un seul modèle. Par exemple, un design de page pour les articles de blog devient 10 pages réelles — une pour chaque article dans votre base de données.
  • Traitement des données — Build awesome peut transformer les formats de fichiers, optimiser les images et minifier le code.
  • Shortcodes — Vous pouvez insérer des blocs spéciaux dans votre design que build awesome traite lors du build.

Pour les sites statiques simples sans CMS, le travail de build awesome est léger — il déplace principalement vos fichiers dans le bon dossier et les prépare pour le déploiement.

Le rôle des connecteurs de stockage et d'hébergement

Silex sépare deux concepts :

Stockage — là où vos fichiers et ressources de site web se trouvent pendant la conception (et où ils sont commités lors de la publication). Par défaut, c'est un dépôt GitLab.

Hébergement — là où votre site web en ligne est servi. Généralement au même endroit — GitLab Pages récupère les fichiers de votre dépôt GitLab et les sert.

Lorsque vous cliquez sur Publier, vous vous authentifiez auprès de votre service de stockage (GitLab). Silex y commit vos fichiers. Le service d'hébergement (GitLab Pages) détecte alors automatiquement le nouveau commit et déploie.

Qu'est-ce qui est publié ?

Lorsque vous cliquez sur Publier, Silex envoie ces fichiers vers votre stockage :

  • Pages HTML — Une par page (par ex. index.html, about.html, contact.html)
  • CSS — Les styles de votre site, incluant toutes les règles que vous avez définies dans le Style Manager
  • Ressources — Images, vidéos, polices et tout média que vous avez ajouté
  • Fichiers de données — Si vous utilisez un CMS, les liaisons de données et expressions sont stockées pour que build awesome puisse les traiter lors du build
  • .gitlab-ci.yml — La configuration de build pour GitLab CI (si vous utilisez l'hébergement GitLab)
  • Configuration build awesome — La configuration de build awesome pour que le build s'exécute correctement

Silex gère tout cela automatiquement. Vous n'avez pas besoin de comprendre ce que fait chaque fichier — sachez simplement que tout le nécessaire pour construire et déployer votre site est inclus.

Résolution des problèmes de publication

Si votre site ne se publie pas ou affiche une erreur :

Vérifiez votre connexion — Assurez-vous que vous êtes connecté à votre service de stockage (GitLab) dans Silex. La boîte de dialogue de publication affiche le statut.

Surveillez le pipeline CI/CD — Après la publication, rendez-vous sur la page de votre projet GitLab et cliquez sur CI/CD → Pipelines. Vous verrez le processus de build. En cas d'erreur, le journal indique pourquoi.

Vérifiez les permissions des fichiers — Sur GitLab, votre projet doit être public ou le pipeline CI/CD doit avoir la permission de déployer. Rendez-vous dans Paramètres → Pages et vérifiez que la source du build est correctement configurée.

Vérifiez le domaine — Si vous avez configuré un domaine personnalisé, vérifiez que vos enregistrements DNS sont corrects et pointent vers GitLab Pages.

En savoir plus

Quiz

Q1 : Que fait build awesome dans le pipeline de publication ?

  • A) Il convertit votre design Silex en HTML et CSS
  • B) Il héberge votre site web sur internet
  • C) Il construit votre site à partir de vos fichiers HTML, traite les données CMS et prépare tout pour le déploiement
Réponse

C) Il construit votre site à partir de vos fichiers HTML, traite les données CMS et prépare tout pour le déploiement — Build awesome est l'étape de build entre vos fichiers et le déploiement. Silex gère la conversion design-vers-HTML ; GitLab Pages gère l'hébergement.

Q2 : Lorsque vous publiez sur GitLab, où Silex stocke-t-il vos fichiers ?

  • A) Directement sur GitLab Pages (le serveur en ligne)
  • B) Dans un dépôt GitLab (stockage Git)
  • C) Sur votre ordinateur local
Réponse

B) Dans un dépôt GitLab (stockage Git) — Silex commit vos fichiers dans un dépôt Git. Le pipeline CI/CD de GitLab construit et déploie ensuite automatiquement à partir de là.

Q3 : Que se passe-t-il après avoir cliqué sur Publier ?

  • A) Votre site est immédiatement en ligne
  • B) Silex commit les fichiers dans Git, GitLab CI construit le site avec build awesome, et GitLab Pages le déploie
  • C) Vous devez lancer manuellement une commande de build
Réponse

B) Silex commit les fichiers dans Git, GitLab CI construit le site avec build awesome, et GitLab Pages le déploie — L'ensemble du processus est automatisé. Une fois que vous cliquez sur Publier, Silex gère tout.

Q4 : Pouvez-vous utiliser un domaine personnalisé avec GitLab Pages ?

  • A) Non, vous devez utiliser le domaine par défaut votreutilisateur.gitlab.io
  • B) Oui, en configurant des enregistrements DNS et en paramétrant le domaine dans les réglages de GitLab Pages
  • C) Uniquement si vous passez à un plan payant
Réponse

B) Oui, en configurant des enregistrements DNS et en paramétrant le domaine dans les réglages de GitLab Pages — Les domaines personnalisés sont gratuits et disponibles pour tous les utilisateurs. Consultez la page Domaine personnalisé pour les instructions détaillées.

Q5 : Quelle est la relation entre le stockage et l'hébergement dans Silex ?

  • A) Ce sont deux services complètement séparés sans aucun lien
  • B) Le stockage est l'endroit où les fichiers se trouvent pendant la conception ; l'hébergement est l'endroit d'où le site en ligne est servi. Généralement, les deux sont sur GitLab.
  • C) Le stockage et l'hébergement sont la même chose
Réponse

B) Le stockage est l'endroit où les fichiers se trouvent pendant la conception ; l'hébergement est l'endroit d'où le site en ligne est servi. Généralement, les deux sont sur GitLab. — Silex sépare ces concepts pour que vous puissiez utiliser des services différents si nécessaire, bien que la plupart des utilisateurs utilisent GitLab pour les deux.

Éditer cette page sur GitLab