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 écrits dans chaque page en HTML ordinaire. Les variables CSS sont écrites.

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 — À chaque publication, Silex ajoute au dépôt un tag nommé _silex_ suivi d'un nombre. GitLab détecte ce tag et lance automatiquement un pipeline de build. Un commit seul ne le lance pas. C'est là que build awesome (le nouveau nom d'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 _site/ contenant le HTML, le CSS et les ressources finaux. Pour un site statique simple, le contenu de vos pages ne change pas, et chaque page reçoit son propre dossier : about.html est publiée en about/index.html. Les utilisateurs avancés peuvent ajouter des étapes de build (indexation de recherche, optimisation d'images…) via un fichier build.json — voir Personnaliser le build.

6. GitLab Pages déploie — Le dossier _site/ 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/. Silex crée le projet GitLab en privé : après la première publication, réglez Pages sur Everyone pour que les visiteurs voient le site (voir Publier sur GitLab).

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.
  • 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.

Plugins Eleventy

Le build peut faire plus : un sitemap, des images optimisées, un flux RSS. Ils s'ajoutent avec des plugins Eleventy. Pas besoin d'être développeur : vous copiez-collez quelques fichiers dans votre dépôt sur GitLab, depuis votre navigateur. Voir Ajouter un plugin, pas à pas.

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, puis ajoute un tag. GitLab détecte ce tag, construit le site, et le service d'hébergement (GitLab Pages) le 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
  • Fichiers de build — Les fichiers qui construisent et déploient votre site : build.json (à vous de le personnaliser — Silex ne l'écrase jamais), plus build.sh, et la configuration CI (par ex. .gitlab-ci.yml), tous deux générés par Silex (ne les éditez pas)

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.

Publier sur votre propre hébergeur en FTP ou SFTP

La version en ligne de Silex ne se connecte pas aux serveurs FTP. Si votre hébergeur vous donne un accès FTP ou SFTP, vous avez deux façons d'y publier : depuis Silex Desktop, ou avec GitLab, qui y envoie votre site à votre place. Cette section explique la méthode GitLab. À chaque publication, GitLab construit votre site, puis l'envoie. La mise en place prend environ 15 minutes et comprend un copier-coller de texte technique. Vous ne le faites qu'une seule fois.

Avant de commencer, il vous faut :

  • Un compte GitLab, avec votre site stocké dessus. Si votre site était stocké sur FTP, commencez par le déplacer vers Silex Desktop
  • Le nom du serveur de votre hébergeur, votre nom d'utilisateur et votre mot de passe. Vous les trouverez en général dans l'espace client de votre hébergeur ou dans son mail de bienvenue. Préférez SFTP si votre hébergeur le propose : le FTP simple envoie votre mot de passe sans le chiffrer
  • Le nom du dossier de votre site public : sur votre serveur, celui qui contient votre index.html actuel, souvent public_html ou www

Les fichiers de même nom sur votre serveur sont remplacés, par exemple un index.html déjà présent. Les autres fichiers restent. Si un site s'y trouve déjà, copiez-le d'abord sur votre ordinateur avec un client FTP comme FileZilla.

Pour ouvrir votre projet GitLab : dans Silex, le lien se trouve dans Site Settings > General.

1. Publiez votre site une fois depuis Silex. Cela crée un fichier nommé build.json dans votre projet GitLab.

2. Ajoutez les informations de votre serveur dans GitLab. Dans le menu de gauche de votre projet, allez dans Settings → CI/CD, puis ouvrez la section Variables. Pour chaque ligne ci-dessous, cliquez sur Add variable, remplissez Key et Value, puis enregistrez :

Key Value Exemple
FTP_HOST Le nom de votre serveur, précédé de sftp:// ou ftp://. Si votre hébergeur vous a donné un numéro de port, ajoutez-le à la fin sftp://ssh.example.com ou ftp://ftp.example.com:2121
FTP_USER Votre nom d'utilisateur alice
LFTP_PASSWORD Votre mot de passe
FTP_PATH Le dossier de votre site public /public_html

Laissez Protect variable décoché, sinon les valeurs n'arrivent pas jusqu'au build. Réglez Visibility sur Visible pour la première, la deuxième et la quatrième, et sur Masked pour LFTP_PASSWORD. GitLab ne masque qu'une valeur d'au moins 8 caractères sans espace : si la vôtre est refusée, demandez à votre hébergeur un mot de passe plus long.

3. Ajoutez l'envoi au build. Dans la liste des fichiers, sur la page d'accueil de votre projet, cliquez sur build.json, puis sur Edit et Edit single file. Il ne devrait contenir que { "type": "build" } entre crochets. Remplacez tout par ceci :

[
  { "type": "build" },
  { "type": "sh", "value": "apt-get update && apt-get install --no-install-recommends -y lftp ca-certificates openssh-client" },
  { "type": "sh", "value": "lftp -c \"set net:max-retries 2; set net:timeout 20; set sftp:auto-confirm yes; open --env-password -u $FTP_USER $FTP_HOST; mirror -R _site $FTP_PATH\"" }
]

Si le fichier contient d'autres étapes, c'est que quelqu'un l'a personnalisé : gardez-les et ajoutez les deux lignes qui commencent par { "type": "sh", avec une virgule à la fin de chaque étape sauf la dernière. Enregistrez le fichier (GitLab appelle cela Commit changes).

4. Publiez depuis Silex. Attendez le message Your website is now live!, en général quelques minutes. Votre site est alors sur votre serveur : ouvrez-le à votre propre adresse.

Bon à savoir :

  • Le bouton View your website de Silex ouvre toujours l'adresse GitLab Pages, car votre site y est publié aussi
  • Une page supprimée dans Silex reste sur votre serveur. Retirez-la avec un client FTP comme FileZilla
  • En SFTP, le build accepte la clé SSH de votre serveur sans la vérifier. Quelqu'un placé sur le réseau entre GitLab et votre hébergeur pourrait se faire passer pour votre serveur et récupérer votre mot de passe. Cela reste plus sûr que le FTP simple. Pour vérifier la clé, enregistrez-la dans une variable GitLab

Si l'envoi échoue, Silex affiche Build failed et propose View build logs. Regardez les dernières lignes. Login failed veut dire que le nom d'utilisateur ou le mot de passe est faux. The certificate is NOT trusted veut dire que le nom du serveur ne correspond pas à son certificat de sécurité : demandez à votre hébergeur quel nom de serveur utiliser, ou passez en SFTP. Corrigez la variable sur la même page Variables, puis publiez à nouveau.

Publier en FTP ou SFTP depuis Silex Desktop

Silex Desktop, une application pour votre ordinateur, peut envoyer lui-même votre site chez votre hébergeur, en FTP ou SFTP. Vous n'avez pas besoin de compte GitLab pour cela.

Avant de commencer, il vous faut :

  • Votre site dans Silex Desktop. S'il était stocké sur FTP, commencez par le déplacer vers Silex Desktop
  • Le nom du serveur de votre hébergeur, votre nom d'utilisateur et votre mot de passe. Vous les trouverez en général dans l'espace client de votre hébergeur ou dans son mail de bienvenue
  • Le nom du dossier de votre site public, souvent public_html ou www
  • Node.js sur votre ordinateur, si votre site est réglé sur Eleventy : Silex Desktop en a besoin pour publier un tel site en FTP ou SFTP, ou dans un dossier local. Un site réglé sur Automatic utilise Zola dans Silex Desktop et n'a pas besoin de Node.js

À chaque publication, Silex rend ce dossier identique à votre site. Les fichiers du dossier qui ne sont pas dans votre site sont supprimés, par exemple une page retirée dans Silex. Pour vous protéger, Silex refuse un dossier qui contient déjà des fichiers qu'il n'a pas publiés, même un site publié avec la version en ligne de Silex : il indique que le dossier contient déjà des fichiers que Silex n'a pas publiés. Choisissez un nouveau dossier, ou copiez ce que vous voulez garder sur votre ordinateur avec un client FTP comme FileZilla, puis videz le dossier. Votre site public est hors ligne jusqu'à votre prochaine publication. Si votre dossier silex se trouve dans ce dossier, commencez par déplacer votre site vers Silex Desktop. Pour garder d'autres fichiers à côté de votre site, utilisez plutôt GitLab.

  1. Dans Silex Desktop, ouvrez Intégrations. Sous Ajouter à Silex, trouvez FTP / SFTP. Si la carte affiche Installer, cliquez dessus : Silex télécharge le programme dont il a besoin, rclone. Cliquez ensuite sur Utiliser
  2. Dans Ajouter un serveur, choisissez le Protocole, FTP ou SFTP. Préférez SFTP si votre hébergeur le propose
  3. Remplissez Adresse du serveur, Nom d'utilisateur et Mot de passe. Laissez Port vide pour le port habituel, et laissez Nom vide si vous n'utilisez pas rclone vous-même. Silex vérifie qu'il peut se connecter avant d'enregistrer le serveur
  4. Ouvrez votre site et cliquez sur Publish. Si Silex vous le demande, choisissez votre serveur dans la liste
  5. Dans Dossier sur le serveur, écrivez le dossier de votre site public. Le champ Adresse de votre site est facultatif : si vous le remplissez, Silex vous donne un lien vers votre site après la publication
  6. Cliquez sur Publish

En FTP, Silex chiffre la connexion. Si votre serveur ne l'accepte pas, cochez Se connecter sans chiffrement dans Ajouter un serveur : votre mot de passe et vos fichiers circulent alors en clair.

Si Silex dit que le serveur n'a pas laissé Silex écrire dans le dossier, vérifiez le nom du dossier, et que cet utilisateur peut y écrire.

Récupérer votre site dans un fichier zip

La version en ligne de Silex n'a plus de bouton de téléchargement, mais GitLab garde un zip de chaque build.

  1. Publiez votre site depuis Silex et attendez Your website is now live!
  2. Ouvrez votre projet GitLab (le lien se trouve dans Site Settings > General dans Silex). Dans le menu de gauche, allez dans Build → Jobs
  3. Sur le job pages le plus récent marqué Passed, vérifiez la date, puis cliquez sur Download artifacts
  4. Décompressez le fichier. Votre site est le dossier _site qu'il contient

Avec un client FTP comme FileZilla, envoyez le contenu de _site, pas le dossier lui-même, dans le dossier de votre site public.

Un double-clic sur index.html affiche une page sans ses styles. Votre site n'est pas cassé : il a besoin d'un serveur web. Une fois envoyé, il s'affiche correctement.

Ce zip contient le site terminé. Silex ne peut pas l'ouvrir pour le modifier, il ne remplace donc pas votre projet. Sur GitLab.com, un zip est conservé 30 jours. Votre site et votre projet, eux, restent. Publiez à nouveau pour en obtenir un nouveau.

Si vous êtes à l'aise avec un terminal, vous pouvez regarder le site sur votre ordinateur : dans le dossier _site, lancez python3 -m http.server, puis allez sur http://localhost:8000.

Déplacer vers Silex Desktop un site stocké sur FTP

La version en ligne de Silex ne peut plus ouvrir les sites stockés sur un serveur FTP. Vos fichiers sont toujours sur votre serveur, et un site déjà publié reste en ligne. Pour continuer à le modifier, déplacez le site vers Silex Desktop, une application pour votre ordinateur. Silex Desktop peut publier chez votre hébergeur en FTP ou SFTP. Récupérer votre site en zip depuis Silex Desktop est prévu, sans date pour l'instant.

Avant de commencer : après le déplacement, votre site n'est plus que sur un seul ordinateur. Vous pouvez le publier chez votre hébergeur en FTP ou SFTP, ou via une forge comme GitLab ou Codeberg, avec un compte gratuit.

  1. Installez Silex Desktop depuis la page des versions : sous Assets, prenez le fichier qui finit par .exe pour Windows, .dmg pour macOS, .AppImage pour Linux. Ouvrez Silex Desktop une fois, ce qui crée son dossier de sites, puis fermez-le
  2. Installez FileZilla. En haut, remplissez Hôte, Nom d'utilisateur, Mot de passe et, si vous en avez un, Port, puis cliquez sur Connexion rapide. Ce sont les informations que vous utilisiez pour vous connecter à Silex. Si vous les avez perdues, l'espace client de votre hébergeur peut vous les redonner
  3. Ouvrez le dossier silex, à la racine de votre compte FTP. Si vous aviez changé le chemin racine sous Storage options à la connexion, ouvrez plutôt ce dossier. Il y a un dossier par site, avec un long nom aléatoire. Pour les reconnaître, téléchargez le fichier meta.json de chaque dossier et ouvrez-le avec un éditeur de texte : il indique le nom du site
  4. Téléchargez tout le dossier de votre site, sans le renommer. Vérifiez que l'onglet Transferts échoués, en bas de FileZilla, est vide

  5. Placez-le dans le dossier de sites de Silex Desktop. Le fichier website.json doit se trouver directement dans le dossier de votre site :

    Système Dossier
    Linux ~/.local/share/org.silex.desktop/websites
    macOS ~/Library/Application Support/org.silex.desktop/websites
    Windows %APPDATA%\org.silex.desktop\websites

    Ces dossiers sont cachés. Collez le chemin tel quel dans la barre d'adresse de votre explorateur de fichiers (sur macOS : Aller → Aller au dossier dans le Finder).

  6. Ouvrez Silex Desktop. Votre site est dans la liste. S'il n'y est pas, vérifiez que website.json est directement dans le dossier de votre site, et que ce dossier est directement dans websites

Laissez la copie sur votre serveur : vous n'avez pas à la supprimer, et votre site public se trouve peut-être juste à côté. Pour garder votre hébergeur, voir Publier en FTP ou SFTP depuis Silex Desktop. Pour publier sur une forge, voir Publier depuis Silex Desktop. Vous pouvez aussi publier sur GitLab depuis Silex Desktop, puis suivre Publier sur votre propre hébergeur à partir de l'étape 2.

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 Build → Pipelines. Vous verrez le processus de build. En cas d'erreur, le journal indique pourquoi.

Vérifiez qui peut voir le site — Sur GitLab, rendez-vous dans Settings → General → Visibility, project features, permissions et réglez Pages sur Everyone. Le projet lui-même, avec vos fichiers, peut rester privé.

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

Présentation complète — commentée, en anglais :

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