Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Déploiement d'un site web (GitHub Pages / Netlify)

Introduction : Du local au global

Félicitations ! Vous avez appris les bases du HTML et du CSS, et vous avez probablement déjà créé de magnifiques pages web sur votre ordinateur local. C'est une étape formidable. Mais qu'en est-il si vous souhaitez partager votre création avec des amis, votre famille, ou même le monde entier ? Comment faire pour que votre site web soit accessible via une simple adresse URL, et non plus seulement sur votre machine ?

C'est là qu'intervient le déploiement. Le déploiement est le processus qui consiste à rendre votre site web accessible sur Internet. Imaginez que votre site web est un livre que vous avez écrit : le déploiement, c'est comme le publier pour qu'il soit disponible dans toutes les bibliothèques et librairies du monde.

Dans cette leçon, nous allons explorer deux méthodes populaires, gratuites et relativement simples pour déployer vos sites web statiques (ceux que vous construisez avec HTML et CSS purs) : GitHub Pages et Netlify. Ces plateformes simplifient grandement le processus, vous permettant de mettre vos projets en ligne en quelques étapes seulement.

I. Comprendre le Déploiement d'un Site Statique

Avant de plonger dans les outils, comprenons ce qui se passe quand vous déployez un site HTML/CSS.

Qu'est-ce qu'un site statique ?

Un site web statique est composé de fichiers qui ne changent pas à moins que vous ne les modifiiez manuellement. Il s'agit principalement de fichiers :

  • HTML (la structure de votre contenu)
  • CSS (le style de votre contenu)
  • JavaScript (des interactivités côté client, exécutées par le navigateur)
  • Images, vidéos, polices, etc.

Il n'y a pas de base de données ni de logique serveur complexe (comme un site WordPress ou un backend en Node.js, Python, PHP). Pour les sites statiques, le déploiement est généralement plus simple.

Le rôle du serveur web

Quand vous mettez votre site en ligne, vous placez vos fichiers sur un serveur web. Un serveur web est un ordinateur puissant qui est connecté en permanence à Internet et qui est configuré pour "servir" (envoyer) vos fichiers à quiconque en fait la demande via son navigateur web (Chrome, Firefox, Safari, etc.).

Les plateformes comme GitHub Pages et Netlify gèrent ces serveurs pour vous, vous épargnant la complexité de leur configuration.

II. Déploiement avec GitHub Pages

GitHub Pages est un service d'hébergement statique gratuit fourni par GitHub. C'est un excellent point de départ pour les développeurs car il s'intègre parfaitement avec le processus de versionnement que vous utilisez probablement déjà avec Git et GitHub.

Prérequis

Pour utiliser GitHub Pages, vous avez besoin de :

  1. Un compte GitHub.
  2. Git installé sur votre machine locale (si ce n'est pas déjà fait).
  3. Un projet de site web HTML/CSS sur votre machine.

Étapes de Déploiement

Nous allons supposer que vous avez déjà un projet HTML/CSS sur votre ordinateur, par exemple, un dossier nommé mon-super-site contenant un fichier index.html et un dossier css avec un fichier style.css.

1. Initialiser un Dépôt Git Local

Ouvrez votre terminal (ou invite de commande) et naviguez jusqu'à la racine de votre projet.

cd /chemin/vers/mon-super-site

Initialisez un nouveau dépôt Git :

git init

Ajoutez tous vos fichiers au suivi de Git et faites votre premier commit :

git add .
git commit -m "Initial commit de mon super site"

2. Créer un Dépôt sur GitHub

  1. Connectez-vous à votre compte GitHub.
  2. Cliquez sur le bouton "+" en haut à droite, puis sélectionnez "New repository" (Nouveau dépôt).
  3. Donnez un nom à votre dépôt (par exemple, mon-super-site). Assurez-vous qu'il est Public (nécessaire pour GitHub Pages avec un dépôt gratuit).
  4. Ne cochez pas "Add a README file" ou ".gitignore" ou "Choose a license" si vous avez déjà des fichiers locaux.
  5. Cliquez sur "Create repository".

3. Lier votre Dépôt Local au Dépôt GitHub

Une fois votre dépôt créé sur GitHub, vous verrez des instructions pour le lier à un dépôt local existant. Vous aurez besoin de l'URL de votre dépôt. Elle ressemblera à https://github.com/votre-nom-utilisateur/mon-super-site.git.

Dans votre terminal local (toujours à la racine de votre projet) :

git branch -M main
git remote add origin https://github.com/votre-nom-utilisateur/mon-super-site.git
git push -u origin main
  • git branch -M main : Renomme votre branche principale en main (standard moderne).
  • git remote add origin ... : Lie votre dépôt local à votre dépôt distant sur GitHub.
  • git push -u origin main : Pousse vos fichiers locaux vers la branche main de votre dépôt GitHub. Le -u configure le suivi pour les prochaines fois.

Vos fichiers sont maintenant sur GitHub !

4. Configurer GitHub Pages

C'est l'étape finale pour le déploiement :

  1. Sur votre dépôt GitHub, cliquez sur l'onglet "Settings" (Paramètres).
  2. Dans le menu latéral gauche, cliquez sur "Pages".
  3. Sous la section "Source", dans le menu déroulant "Branch", sélectionnez la branche sur laquelle vous souhaitez déployer (généralement main).
  4. Laissez le dossier sur /(root) si votre fichier index.html est à la racine de votre dépôt. Si votre site est dans un sous-dossier, spécifiez-le ici.
  5. Cliquez sur "Save".

GitHub Pages prendra quelques instants pour déployer votre site. Une fois terminé, un message "Your site is published at..." (Votre site est publié à l'adresse...) apparaîtra avec l'URL de votre site. Elle sera généralement de la forme https://votre-nom-utilisateur.github.io/mon-super-site/.

Important : Votre page d'accueil doit impérativement être nommée index.html et se trouver à la racine du dossier que vous spécifiez pour le déploiement.

Avantages et Inconvénients de GitHub Pages

Avantages :

  • Gratuit et facile à configurer pour les projets statiques.
  • Intégré à l'écosystème GitHub (gestion de version, collaboration).
  • Idéal pour les portfolios, les sites de projets open source, la documentation simple.
  • Supporte les domaines personnalisés (ex: www.mon-site.com).

Inconvénients :

  • Limité aux sites statiques (pas de backend, pas de base de données).
  • Les builds peuvent être un peu lents pour les gros projets.
  • Moins de fonctionnalités avancées que Netlify (pas de CI/CD avancée, pas de formulaires intégrés, pas de fonctions serverless, etc.).

III. Déploiement avec Netlify

Netlify est une plateforme plus complète pour le déploiement de sites web, offrant une expérience de développement web moderne (appelée "Jamstack"). Elle excelle dans le déploiement continu à partir de dépôts Git.

Prérequis

Pour utiliser Netlify, vous avez besoin de :

  1. Un compte Netlify.
  2. Un dépôt Git existant sur GitHub, GitLab ou Bitbucket contenant votre projet.

Étapes de Déploiement

Nous allons utiliser le même projet (mon-super-site) que nous avons déjà poussé sur GitHub.

1. Se Connecter à Netlify

  1. Allez sur Netlify.com.
  2. Cliquez sur "Sign up" (S'inscrire) ou "Log in" (Se connecter).
  3. Choisissez de vous inscrire/connecter avec votre compte GitHub (recommandé pour une intégration facile).

2. Importer un Projet depuis Git

  1. Une fois connecté à votre tableau de bord Netlify, cliquez sur le bouton "Add new site" (Ajouter un nouveau site) en haut à droite, puis sélectionnez "Import an existing project" (Importer un projet existant).
  2. Choisissez votre fournisseur Git (par exemple, GitHub). Vous devrez peut-être autoriser Netlify à accéder à vos dépôts.
  3. Sélectionnez le dépôt que vous souhaitez déployer (dans notre cas, mon-super-site).

3. Configurer les Paramètres de Déploiement

Netlify va tenter de détecter automatiquement vos paramètres de build. Pour un site HTML/CSS pur, il n'y a généralement rien à configurer.

  • Owner (Propriétaire) : Votre compte ou organisation GitHub.
  • Branch to deploy (Branche à déployer) : Laissez main (ou la branche que vous utilisez).
  • Base directory (Répertoire de base) : Laissez vide si votre index.html est à la racine de votre dépôt. Si votre site est dans un sous-dossier (ex: src/), spécifiez-le.
  • Build command (Commande de build) : Laissez vide pour un site statique HTML/CSS. (Pour des projets plus complexes comme React, Next.js, ou un générateur de site statique comme Jekyll, vous mettriez ici une commande comme npm run build ou jekyll build).
  • Publish directory (Répertoire de publication) : Laissez vide ou . pour un site statique. (Pour un site React par exemple, ce serait build ou dist).

Cliquez sur "Deploy site" (Déployer le site).

4. Le Déploiement Automatique et Continu

Netlify va automatiquement construire et déployer votre site. Cela prend généralement quelques secondes. Une fois le déploiement terminé, Netlify vous donnera une URL temporaire unique (par exemple, https://glowing-llama-123456.netlify.app/). Vous pouvez changer cette URL dans les paramètres du site Netlify.

La magie de Netlify réside dans le déploiement continu :

  • Chaque fois que vous poussez des changements (un git push) vers la branche configurée (main) de votre dépôt GitHub, Netlify détectera automatiquement ces changements, construira et redéploiera votre site. Votre site sera toujours à jour sans aucune intervention manuelle.

Avantages et Inconvénients de Netlify

Avantages :

  • Déploiement continu (CI/CD intégré) : Mises à jour automatiques à chaque git push.
  • CDN (Content Delivery Network) intégré : Vos sites sont rapides car distribués sur des serveurs partout dans le monde.
  • Fonctionnalités avancées : Support pour les formulaires, les fonctions serverless (lambda), l'A/B testing, les prévisualisations de déploiement (deploy previews), les redirect.
  • Support des domaines personnalisés avec certificats SSL gratuits (HTTPS).
  • Interface utilisateur intuitive.
  • Plan gratuit généreux pour les petits projets.

Inconvénients :

  • Peut être légèrement plus complexe à appréhender initialement que GitHub Pages si vous n'avez pas de dépôt Git existant.
  • Les fonctionnalités avancées peuvent nécessiter de lire la documentation.
  • Comme GitHub Pages, il est optimal pour les sites statiques ou les architectures "Jamstack" (qui restent essentiellement statiques sur le frontend).

IV. GitHub Pages vs. Netlify : Quand choisir quoi ?

Le choix entre GitHub Pages et Netlify dépend de vos besoins spécifiques.

  • Choisissez GitHub Pages si :

    • Vous débutez et voulez une solution simple et rapide pour un portfolio ou un petit projet personnel.
    • Votre site est purement statique et n'a pas besoin de fonctionnalités avancées.
    • Vous êtes déjà très à l'aise avec Git et GitHub et souhaitez une intégration maximale.
    • Vous avez un projet open source que vous souhaitez documenter et déployer facilement.

  • Choisissez Netlify si :

    • Vous souhaitez un déploiement continu automatique à chaque modification de votre code.
    • Vous avez besoin de performances rapides grâce à un CDN global.
    • Vous prévoyez d'ajouter des fonctionnalités telles que des formulaires, des fonctions backend simples (fonctions serverless), ou des redirections.
    • Vous travaillez avec des frameworks ou des générateurs de sites statiques (React, Vue, Astro, Jekyll, Hugo, Gatsby, Next.js) qui nécessitent une étape de "build".
    • Vous voulez des prévisualisations pour chaque pull request ou branche.
    • Vous recherchez une plateforme offrant plus de potentiel d'évolution pour vos projets futurs.

Pour vos premiers sites HTML/CSS, les deux options sont excellentes. Netlify offre généralement une expérience utilisateur plus polie et plus de fonctionnalités pour le futur.

Conclusion

Félicitations ! Vous avez maintenant les connaissances nécessaires pour transformer vos projets web locaux en sites accessibles à quiconque sur Internet. Le déploiement est une étape cruciale qui concrétise votre travail de développeur.

Nous avons exploré :

  • Le concept de déploiement de sites statiques.
  • Comment utiliser GitHub Pages pour un déploiement simple et rapide, directement depuis votre dépôt GitHub.
  • Comment tirer parti de Netlify pour des déploiements continus et des fonctionnalités plus avancées, tout en conservant une grande simplicité.

N'hésitez pas à expérimenter avec les deux plateformes. Mettez en ligne votre portfolio, votre premier site de présentation, ou tout autre projet sur lequel vous travaillez. La meilleure façon d'apprendre est de pratiquer ! Le fait d'avoir un site en ligne peut également être un excellent atout pour présenter vos compétences lorsque vous commencerez à chercher des opportunités.

Bon déploiement !