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 réglages de l'élément (icône engrenage en haut du panneau de droite) 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.

Votre site est déjà enregistré dans un projet GitLab : vous vous êtes connecté avec GitLab pour le créer.

  1. Cliquez sur le bouton Publish dans la barre d'outils supérieure (ou appuyez sur Alt+P)
  2. La boîte de dialogue de publication s'ouvre et affiche « Connected to GitLab.com ». Si elle affiche plutôt « You need to select a hosting connector to publish your website. », cliquez sur le bouton GitLab, et autorisez Silex si GitLab vous le demande
  3. Cliquez sur Publish

La boîte de dialogue de publication affichant « Connected to GitLab.com » avec un bouton Publish

Silex envoie vos fichiers sur GitLab. La boîte de dialogue affiche « Publication in progress... » avec une barre de progression.

Attendre le build

GitLab construit ensuite votre site avec build awesome (propulsé par Eleventy). Inutile de quitter Silex : la boîte de dialogue affiche l'état du build (Queued, Building…) et un bouton View build logs qui ouvre le build sur GitLab. Cela prend 1 à 3 minutes.

Quand le build est terminé, la boîte de dialogue affiche « Your website is now live! » avec deux boutons :

  • View your website ouvre votre site en ligne
  • GitLab Pages settings ouvre la page Pages de votre projet GitLab

Si le build échoue, la boîte de dialogue affiche « Publication error » et « Build failed », avec un bouton View build logs (voir le dépannage ci-dessous).

Trouver votre URL en ligne

Une fois le build réussi, votre site est en ligne : le bouton View your website l'ouvre. 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 la boîte de dialogue de publication, cliquez sur View build logs pour voir les journaux d'erreur sur GitLab
  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 Publish 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 (« Your website is now live! » dans la boîte de dialogue de publication)
  2. Dans GitLab, allez dans Settings → General, dépliez Visibility, project features, permissions, et vérifiez que Pages est réglé sur Everyone. Votre projet peut rester privé : ce réglage n'ouvre que le site, pas vos fichiers (voir le contrôle d'accès de GitLab Pages)
  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 un enregistrement DNS A qui pointe vers GitLab Pages, et l'enregistrement TXT que GitLab vous donne pour vérifier le domaine
  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 Publish
  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 éléments 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 éléments
  • 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