Bases du versionnage avec Git

Introduction au versionnage

Lorsque vous développez un site web, qu'il s'agisse de fichiers HTML, CSS ou JavaScript, vous effectuez de nombreux changements : ajout de nouvelles sections, modification de styles, correction de bugs, etc. Sans un bon système, gérer ces modifications peut rapidement devenir un cauchemar :

Perte de travail : Comment revenir à une version précédente si une modification casse tout ?
Historique flou : Qui a modifié quoi, quand et pourquoi ?
Collaboration difficile : Comment plusieurs personnes peuvent-elles travailler sur le même projet sans s'écraser mutuellement leurs modifications ?

C'est là qu'intervient le versionnage, ou contrôle de version. C'est un système qui enregistre les modifications apportées à un fichier ou à un ensemble de fichiers au fil du temps, afin que vous puissiez rappeler des versions spécifiques plus tard.

Pourquoi Git ?

Parmi les nombreux systèmes de contrôle de version, Git est de loin le plus populaire et le plus utilisé dans l'industrie. Il est :

Distribué : Chaque développeur dispose d'une copie complète de l'historique du projet, ce qui permet de travailler hors ligne et offre une grande robustesse.
Rapide et efficace : Conçu pour gérer de très grands projets avec rapidité.
Flexible : Il supporte différents types de flux de travail.
Supporté par une vaste communauté : De nombreuses ressources et plateformes (comme GitHub, GitLab, Bitbucket) l'utilisent.

Pour un développeur HTML/CSS, Git devient un outil indispensable pour :

Suivre les évolutions de votre design.
Expérimenter de nouvelles fonctionnalités sans peur de casser l'existant.
Collaborer efficacement avec d'autres développeurs ou designers.
Revertir facilement des erreurs ou des changements indésirables.

Concepts fondamentaux de Git

Avant de plonger dans les commandes, comprenons quelques termes clés :

Dépôt (Repository / Repo)

Un dépôt Git est un dossier qui contient tous les fichiers de votre projet, ainsi que l'historique complet de toutes les modifications qui y ont été apportées. C'est le cœur de votre projet versionné.
- Il contient un sous-dossier caché nommé .git/ qui stocke toutes les informations nécessaires à Git pour suivre votre projet.
Validation (Commit)

Un "commit" est un instantané (snapshot) de votre projet à un moment donné. C'est l'action d'enregistrer vos modifications dans l'historique de Git. Chaque commit a :
- Un message descriptif qui explique ce qui a été modifié.
- Un identifiant unique (un hash SHA-1).
- L'auteur et la date du commit.
- Une référence aux commits précédents (son "parent").
Branche (Branch)

Une branche est une ligne de développement indépendante. Par défaut, Git crée une branche principale nommée main (ou parfois master).
- Elles permettent de travailler sur de nouvelles fonctionnalités ou des corrections de bugs sans affecter la stabilité du code principal.
- Vous pouvez créer une nouvelle branche, y faire vos modifications, et une fois que tout est prêt, la fusionner avec la branche principale.
Fusion (Merge)

La fusion est le processus qui consiste à intégrer les modifications d'une branche dans une autre. Par exemple, après avoir développé une nouvelle fonctionnalité sur une branche dédiée, vous la fusionnerez dans la branche main.
Dépôt distant (Remote Repository)

Un dépôt distant est une version de votre dépôt hébergée sur un serveur web (par exemple, sur GitHub). Cela permet la collaboration entre développeurs et sert de sauvegarde centralisée de votre projet.

Installation et configuration de Git

1. Installation de Git

Pour installer Git sur votre système, vous pouvez suivre les instructions officielles sur le site de Git : https://git-scm.com/downloads

Windows : Téléchargez et exécutez l'installeur Git Bash.
macOS : Installez via Homebrew (brew install git) ou les outils de ligne de commande Xcode (xcode-select --install).
Linux : Utilisez votre gestionnaire de paquets (sudo apt install git pour Debian/Ubuntu, sudo yum install git pour Fedora/CentOS).

2. Configuration initiale

Après l'installation, il est essentiel de configurer votre nom d'utilisateur et votre adresse e-mail. Ces informations seront intégrées à chaque commit que vous effectuerez, ce qui est crucial pour identifier l'auteur des modifications.

Ouvrez votre terminal ou invite de commande et exécutez les commandes suivantes :

git config --global user.name "Votre Nom Complet"
git config --global user.email "votre.email@example.com"

--global indique que cette configuration s'appliquera à tous les dépôts Git sur votre machine. Si vous souhaitez une configuration spécifique pour un projet, vous pouvez omettre --global en étant dans le dossier du projet.

Pour vérifier votre configuration :

git config --list

Flux de travail de base avec Git (local)

Maintenant, explorons les commandes de base pour versionner un projet HTML/CSS localement.

1. Initialiser un dépôt Git (`git init`)

Pour commencer à versionner un projet, vous devez initialiser un dépôt Git dans son dossier racine.

Naviguez vers votre dossier de projet dans le terminal :

cd chemin/vers/mon-site-web/

Puis, initialisez le dépôt :

git init

Cette commande crée un sous-dossier caché .git/ qui contient toutes les informations de suivi de version.

2. Vérifier l'état du dépôt (`git status`)

La commande git status est votre meilleure amie. Elle vous indique l'état actuel de votre dépôt :

Quels fichiers ont été modifiés.
Quels fichiers sont prêts à être validés (staged).
Quels fichiers ne sont pas suivis par Git.

git status

Lorsque vous venez d'initialiser un dépôt, git status vous montrera probablement tous vos fichiers comme "untracked" (non suivis).

3. Staging : Préparer les modifications pour le commit (`git add`)

Avant de pouvoir enregistrer vos modifications (faire un commit), vous devez les "mettre en scène" ou "indexer" (stage). Cela signifie que vous sélectionnez les fichiers ou parties de fichiers que vous souhaitez inclure dans votre prochain commit.

Pour ajouter un fichier spécifique au staging area :

git add index.html

Pour ajouter tous les fichiers modifiés et non suivis dans le répertoire courant au staging area :

git add .

Le staging area (ou index) est une zone intermédiaire où vous assemblez votre prochain commit. Vous pouvez ajouter et retirer des fichiers de cette zone avant de les valider.

4. Enregistrer les modifications : Le commit (`git commit`)

Une fois vos modifications stagées, vous pouvez les valider. Un commit est une capture de l'état de votre projet à un instant T.

git commit -m "Message descriptif de mon commit"

L'option -m (pour message) vous permet de spécifier un message de commit concis directement en ligne de commande.
Conseil : Rédigez des messages de commit clairs et significatifs. Ils sont essentiels pour comprendre l'historique de votre projet. Un bon message explique ce qui a été fait et pourquoi.

5. Consulter l'historique des commits (`git log`)

Pour voir l'historique de tous les commits effectués dans votre dépôt :

git log

git log affiche chaque commit avec son identifiant (hash), l'auteur, la date et le message.
Utilisez q pour quitter la vue git log.

6. Examiner les différences (`git diff`)

git diff vous permet de voir les modifications que vous avez apportées.

git diff : Affiche les modifications non stagées (entre votre répertoire de travail et le staging area).
git diff --staged : Affiche les modifications stagées (entre le staging area et le dernier commit).

git diff
git diff --staged

Exemple pratique : Versionner un site HTML/CSS

Créons un petit projet et appliquons ce que nous avons appris.

Créez un dossier de projet et initialisez Git :

mkdir mon-premier-site-git
cd mon-premier-site-git
git init

Créez vos fichiers HTML et CSS initiaux :

index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Premier Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bienvenue sur mon site !</h1>
    <p>Ceci est la version initiale de ma page d'accueil.</p>
</body>
</html>

style.css :

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
}
h1 {
    color: #0056b3;
}

Vérifiez l'état et ajoutez les fichiers :

git status
# Output: Fichiers index.html et style.css en tant que "untracked"

git add .
git status
# Output: Fichiers index.html et style.css en tant que "changes to be committed"

Faites votre premier commit :

git commit -m "Initial commit: Ajout de la structure HTML de base et des styles"
git status
# Output: "nothing to commit, working tree clean"

Modifiez votre site et faites un nouveau commit :

Modifiez index.html pour ajouter une section de navigation :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Premier Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur mon site !</h1>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <p>Ceci est la version initiale de ma page d'accueil.</p>
</body>
</html>

Modifiez style.css pour styliser la navigation :

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    color: #333;
}
h1 {
    color: #0056b3;
}
nav ul {
    list-style: none;
    padding: 0;
    background-color: #333;
    overflow: hidden;
}
nav ul li {
    float: left;
}
nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav ul li a:hover {
    background-color: #555;
}

Vérifiez les modifications et commitez-les :

git status
# Output: index.html et style.css sont modifiés mais non stagés

git diff
# Affiche les différences non stagées

git add .
git diff --staged
# Affiche les différences stagées

git commit -m "Ajout de la navigation et stylisation de la barre de navigation"

Consultez l'historique :
```
git log
```
Vous devriez voir vos deux commits, avec leurs messages et détails respectifs.

Travailler avec les branches

Les branches sont une fonctionnalité puissante de Git qui vous permet de développer des fonctionnalités, de corriger des bugs ou d'expérimenter de nouvelles idées dans un environnement isolé, sans affecter la stabilité de la branche principale (main).

1. Lister les branches (`git branch`)

Pour voir quelles branches existent dans votre dépôt et sur quelle branche vous êtes actuellement :

git branch

La branche actuelle sera précédée d'un astérisque (*).

2. Créer une nouvelle branche (`git branch <nom-branche>`)

Pour créer une nouvelle branche (par exemple, pour une nouvelle fonctionnalité de "pied de page") :

git branch feature-footer

Cette commande crée la branche mais ne vous y déplace pas automatiquement.

3. Changer de branche (`git checkout <nom-branche>` ou `git switch <nom-branche>`)

Pour basculer vers une autre branche, vous pouvez utiliser git checkout (la commande traditionnelle) ou git switch (une commande plus récente et plus claire pour le changement de branche) :

git checkout feature-footer
# OU
git switch feature-footer

Votre répertoire de travail sera mis à jour pour refléter l'état des fichiers de cette branche.

4. Créer et basculer en une seule commande

Pour créer une nouvelle branche et basculer dessus immédiatement, utilisez :

git checkout -b nouvelle-branche
# OU
git switch -c nouvelle-branche

5. Fusionner des branches (`git merge <nom-branche>`)

Une fois que vous avez terminé de travailler sur une branche et que vous êtes satisfait des modifications, vous pouvez fusionner cette branche dans la branche principale (ou toute autre branche).

Assurez-vous d'être sur la branche de destination (celle où vous voulez ramener les changements, souvent main) :
```
git switch main
```
Fusionnez la branche de fonctionnalité dans la branche actuelle :
```
git merge feature-footer
```

Git essaiera de fusionner les modifications automatiquement. En cas de conflits de fusion (lorsque Git ne sait pas comment combiner deux modifications sur la même ligne de code), Git vous le signalera, et vous devrez résoudre ces conflits manuellement.

6. Supprimer une branche (`git branch -d <nom-branche>`)

Une fois qu'une branche est fusionnée et que vous n'en avez plus besoin, il est conseillé de la supprimer pour garder votre liste de branches propre :

git branch -d feature-footer

L'option -d (pour delete) ne permet de supprimer la branche que si elle a été entièrement fusionnée.
Si vous voulez forcer la suppression d'une branche (même si elle n'est pas fusionnée), utilisez -D (attention : cela peut entraîner la perte de travail non fusionné).

Exemple pratique avec les branches

Continuons notre projet mon-premier-site-git. Nous allons créer une nouvelle section "À propos" sur une branche dédiée.

Vérifiez que vous êtes sur main :
```
git switch main
git status
```

Créez une nouvelle branche pour la section "À propos" et basculez dessus :

git switch -c feature-about
git status
# Output: "On branch feature-about"

Créez un nouveau fichier about.html sur cette branche :

about.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>À Propos - Mon Premier Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>À Propos de Nous</h1>
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <p>Bienvenue sur la page À Propos. Nous sommes une entreprise dédiée à la création de superbes sites web.</p>
</body>
</html>

Ajoutez et commitez le nouveau fichier sur feature-about :

git add about.html
git commit -m "Ajout de la page 'À Propos' (feature-about)"

Revenez à la branche main :

git switch main
git status
# Vous remarquerez que about.html n'existe pas dans le dossier, car il n'est pas sur la branche main

Fusionnez la branche feature-about dans main :

git merge feature-about
# Output: Git devrait indiquer un "fast-forward" merge si aucun autre commit n'a été fait sur main.

Maintenant, le fichier about.html est présent sur votre branche main.

Supprimez la branche de fonctionnalité (si vous n'en avez plus besoin) :
```
git branch -d feature-about
```
- Vous avez maintenant intégré la nouvelle fonctionnalité à votre code principal, de manière propre et sécurisée !

Conclusion

Félicitations ! Vous avez appris les bases du versionnage avec Git, un outil indispensable pour tout développeur. Vous savez maintenant comment :

Initialiser un dépôt Git.
Vérifier l'état de votre projet.
Stager et valider (committer) vos modifications.
Consulter l'historique de votre projet.
Créer, basculer et fusionner des branches pour organiser votre travail.

Ces compétences sont fondamentales pour gérer vos projets HTML/CSS, qu'ils soient personnels ou collaboratifs. Git vous offre la tranquillité d'esprit en vous permettant de suivre chaque modification, de revenir en arrière en cas d'erreur et de travailler efficacement en équipe.

Ceci n'est que le début de votre parcours avec Git. Pour aller plus loin, vous explorerez les dépôts distants (comme GitHub), les pull requests, la résolution de conflits avancée et d'autres commandes puissantes. Mais avec ces bases solides, vous êtes déjà bien équipé pour des pratiques de développement modernes !

Bases du versionnage avec Git

Introduction au versionnage

Pourquoi Git ?

Concepts fondamentaux de Git

Dépôt (Repository / Repo)

Validation (Commit)

Branche (Branch)

Fusion (Merge)

Dépôt distant (Remote Repository)

Installation et configuration de Git

1. Installation de Git

2. Configuration initiale

Flux de travail de base avec Git (local)

1. Initialiser un dépôt Git (git init)

2. Vérifier l'état du dépôt (git status)

3. Staging : Préparer les modifications pour le commit (git add)

4. Enregistrer les modifications : Le commit (git commit)

5. Consulter l'historique des commits (git log)

6. Examiner les différences (git diff)