Aller au contenu

Publication : mettre votre site en ligne

Votre site est conçu, stylisé et prêt. Mettons-le maintenant en ligne sur internet pour que les visiteurs puissent le voir.

Prérequis

Avant de publier, assurez-vous que :

  • Vos trois pages sont complètes : index, about, contact
  • Le header et le footer sont configurés en tant que Symboles
  • Tous les liens entre les pages utilisent des chemins relatifs (commençant par ./)
  • Votre site a une belle apparence sur mobile, tablette et desktop (utilisez l'aperçu par appareil dans la barre d'outils)
  • Si vous utilisez un formulaire de contact, vous avez configuré l'action du formulaire dans les Element settings (icône engrenage) de l'élément Form

Publier sur GitLab Pages

GitLab Pages est l'option de publication par défaut dans Silex. C'est gratuit, rapide et inclut le HTTPS automatique.

Dans Silex :

  1. Cliquez sur le bouton Publier dans la barre d'outils supérieure
  2. La boîte de dialogue de publication s'ouvre
  3. Choisissez GitLab Pages comme service d'hébergement
  4. Si vous n'êtes pas encore connecté, cliquez sur Login to GitLab
  5. Une nouvelle fenêtre s'ouvre vous demandant d'autoriser Silex
  6. Connectez-vous à votre compte GitLab (créez-en un sur gitlab.com si nécessaire)
  7. Cliquez sur Authorize
  8. Fermez la fenêtre de connexion — vous reviendrez automatiquement dans Silex
  9. La boîte de dialogue de publication affiche votre nom d'utilisateur GitLab et une coche verte

Vous êtes maintenant authentifié. Vous pouvez publier quand vous le souhaitez.

Publier votre site :

  1. Dans la boîte de dialogue de publication, entrez un nom de projet pour votre site web (par ex. portfolio-agence, mon-site)
  2. Optionnellement, ajoutez une description (elle apparaîtra sur la page de votre projet GitLab)
  3. Assurez-vous que la Visibilité du projet est définie sur Public (pour que les visiteurs puissent voir votre site)
  4. Cliquez sur Publier

Silex téléverse vos fichiers sur GitLab et les commit en tant que dépôt Git. Vous verrez un message « Publication en cours... ». Cela prend 30 secondes à 2 minutes.

Attendre le build

Après la publication, GitLab lance automatiquement un job de build utilisant build awesome (propulsé par Eleventy). Cela prépare votre site pour l'hébergement.

Dans la boîte de dialogue de publication, cliquez sur « Watch CI/CD status » (ou « View on GitLab ») pour voir la progression du build.

Vous serez redirigé vers la page de votre projet GitLab. Naviguez vers CI/CD → Pipelines pour suivre le build :

  • Cercle bleu = build en cours (prend 1 à 3 minutes)
  • Coche verte = build réussi, le site est en ligne
  • X rouge = build échoué (voir le dépannage ci-dessous)

Trouver votre URL en ligne

Une fois le build réussi, votre site est en ligne. L'URL par défaut est :

https://votreutilisateur.gitlab.io/nomduprojet/

Par exemple, si votre nom d'utilisateur GitLab est alice et votre projet est portfolio-agence :

https://alice.gitlab.io/portfolio-agence/

Trouver cette URL dans GitLab :

  1. Rendez-vous sur la page de votre projet
  2. Cliquez sur Deploy → Pages (barre latérale gauche)
  3. Cherchez « Access pages at » — c'est l'URL de votre site
  4. Cliquez sur le lien pour visiter votre site en ligne

Visitez la page d'accueil, cliquez sur les liens de navigation pour vérifier que les pages se chargent, et vérifiez que votre site a une belle apparence sur différents appareils.

Dépannage du build

Le build a échoué :

  1. Dans CI/CD → Pipelines, cliquez sur le job échoué pour voir les journaux d'erreur
  2. Cherchez des mots-clés comme « error » ou « failed »
  3. Problèmes courants :
  4. Liens internes incorrects (doivent commencer par ./)
  5. Ressources ou images manquantes
  6. URL d'action de formulaire inexistantes

Corrigez le problème dans Silex, puis cliquez à nouveau sur Publier pour re-téléverser et déclencher un nouveau build.

Le site ne charge pas à l'URL :

  1. Vérifiez que le build a réussi (coche verte dans CI/CD)
  2. Dans GitLab, allez dans Settings → General et vérifiez que le projet est Public
  3. Dans Deploy → Pages, vérifiez que le domaine est listé
  4. Videz le cache de votre navigateur et réessayez

Voir Publier sur GitLab pour un dépannage détaillé.

Configurer un domaine personnalisé (optionnel)

Si vous possédez un domaine (par ex. monagence.com), vous pouvez le faire pointer vers votre site GitLab Pages au lieu d'utiliser l'URL par défaut votreutilisateur.gitlab.io.

Étapes :

  1. Vous aurez besoin d'accéder aux paramètres DNS de votre domaine (chez votre registrar — par exemple Le Bureau (coopérative), Gandi, ou tout autre registrar de votre choix)
  2. Ajoutez des enregistrements DNS A pointant vers les adresses IP de GitLab
  3. Dans votre projet GitLab, allez dans Deploy → Pages et ajoutez votre domaine
  4. Attendez la propagation DNS (5 minutes à 24 heures, généralement 10 à 60 minutes)
  5. Votre domaine est maintenant configuré

Voir Domaine personnalisé pour les instructions détaillées.

Effectuer des mises à jour

Votre site est en ligne, mais vous n'avez pas terminé. Lorsque vous apportez des modifications dans Silex :

  1. Éditez votre site dans l'éditeur
  2. Cliquez à nouveau sur Publier
  3. GitLab construit et déploie automatiquement la dernière version
  4. Votre site se met à jour (généralement en 2 à 3 minutes)

Il n'y a pas de limite au nombre de fois que vous pouvez publier. Publiez aussi souvent que vous apportez des modifications.

Prochaines étapes

Votre site est maintenant en ligne et accessible au monde entier. Voici quelques pistes à explorer :

Améliorer le SEO : Ajoutez des titres, des descriptions et des balises meta à chaque page. Voir SEO.

Ajouter plus de contenu : Créez plus de pages ou ajoutez des articles de blog dans WordPress.

Configurer un domaine personnalisé : Si vous possédez un domaine, faites-le pointer vers votre site GitLab Pages. Voir Domaine personnalisé.

Surveiller les statistiques : Ajoutez un service de suivi (comme Google Analytics) via du code personnalisé. Voir Code personnalisé.

Optimiser les performances : Optimisez les images, minifiez le CSS ou ajoutez des en-têtes de cache. Ce sont des sujets avancés traités dans la documentation développeur.

Récapitulatif

Vous avez construit et publié avec succès un site web professionnel d'agence. Voici ce que vous avez appris :

  • Créer et structurer plusieurs pages
  • Utiliser les Symboles pour les composants partagés (header, footer)
  • Construire un système de design avec des variables CSS
  • Connecter WordPress comme source de données
  • Lier du contenu dynamique à des composants
  • Publier sur GitLab Pages
  • Configurer un domaine personnalisé

Félicitations ! Votre site est en ligne et prêt à accueillir des visiteurs.

Pages connexes

Vous l'avez fait !

Vous venez de construire et publier un vrai site web avec des outils open source. Votre code vous appartient, vos compétences sont transférables, et votre site est en ligne.

Envie de continuer ?

Éditer cette page sur GitLab