Survivre avec Git et GitHub : Le Guide Ultime pour les Débutants

Tu souhaites apprendre à utiliser Git et GitHub mais tu ne sais pas par où commencer ? Pas de panique ! Ce guide te prend par la main à chaque étape pour te montrer comment créer un projet, faire des commits, gérer des branches, et collaborer efficacement.

On va construire un projet de A à Z ensemble, en utilisant Git et GitHub, avec des astuces clés à chaque étape pour te faciliter la vie.

1. Créer et Initialiser ton Projet avec Git

🔄 Installer Git (si ce n’est pas déjà fait)

1. Vérifie si Git est installé :

   git --version
   

   Si tu vois quelque chose comme git version 2.x.x, c’est que Git est déjà installé. Sinon, rends-toi sur git-scm.com pour télécharger la version correspondante à ton système.

2. Configure ton identité Git :

   git config --global user.name "Ton Nom"
   git config --global user.email "ton.email@example.com"
   

🔄 Créer un nouveau projet

1. Crée un dossier pour ton projet :

   mkdir mon-premier-projet
   cd mon-premier-projet
   

2. Initialise un dépôt Git :

   git init
   

   ✅ Tip : Le dossier .git caché contient toute l’historique de ton projet. Ne le modifie pas manuellement !

🔄 Ajoute ton premier fichier et fais ton premier commit

1. Crée un fichier index.html :

   echo "<h1>Bienvenue dans mon projet Git !</h1>" > index.html
   

2. Vérifie l’état de ton projet :

   git status
   

   Tu verras que index.html est un fichier non suivi.

3. Ajoute le fichier à l’index de Git :

   git add index.html
   

   ✅ Tip : Tu peux ajouter tous les fichiers modifiés avec git add .

4. Fais ton premier commit :

   git commit -m "Ajout du fichier index.html avec un titre"
   

   ✅ Tip : Utilise des messages clairs pour tes commits. Ils doivent expliquer ce que tu as fait.

2. Continuer à Travailler : Deuxième Commit et Historique Git

🔄 Modifier ton fichier et faire un nouveau commit

1. Ajoute un paragraphe dans index.html :

   echo "<p>Ceci est ma première page versionnée avec Git.</p>" >> index.html
   

2. Vérifie les modifications :

   git status
   git diff
   

   ✅ Tip : git diff montre les lignes exactes qui ont été modifiées.

3. Ajoute et commit les changements :

   git add index.html
   git commit -m "Ajout d'un paragraphe de description"
   

🔄 Visualiser l’historique des commits

1. Voir l’historique complet des commits (format détaillé) :

   git log
   

   Cette commande affiche pour chaque commit :

   • Le hash unique du commit (un identifiant long).
   • Le nom de l’auteur.
   • La date du commit.
   • Le message de commit.

   Exemple de sortie :

   commit 2f5b6e1a6f3b5d4a3c7d9e5b1f9a7c2e9f8d1e7f
   Author: Ton Nom <ton.email@example.com>
   Date:   Mon Feb 6 10:00:00 2024 +0200
   
       Ajout d'un paragraphe de description
   
   commit a1d2f3e4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0
   Author: Ton Nom <ton.email@example.com>
   Date:   Mon Feb 6 09:30:00 2024 +0200
   
       Ajout du fichier index.html avec un titre
   

2. Voir l’historique en mode condensé (pratique pour les gros projets) :

   git log --oneline --graph --decorate
   

   • --oneline : Affiche chaque commit sur une seule ligne.
   • --graph : Montre la structure des branches sous forme d’arborescence.
   • --decorate : Ajoute des informations sur les branches et les tags.

   Exemple de sortie condensée :

   * 2f5b6e1 (HEAD -> main) Ajout d'un paragraphe de description
   * a1d2f3e Ajout du fichier index.html avec un titre
   

   ✅ Tip : Utilise git log pour des détails complets et git log --oneline --graph --decorate pour une vue rapide de l’état de ton projet.

3. Créer et Gérer des Branches

Les branches te permettent de travailler sur des fonctionnalités sans affecter le code principal.

🔄 Créer une branche pour une nouvelle fonctionnalité

1. Crée une branche ajout-footer :

   git checkout -b ajout-footer
   

   ✅ Tip : git checkout -b crée et bascule directement sur la nouvelle branche.

2. Ajoute un footer dans index.html :

   echo "<footer>Projet géré avec Git - 2024</footer>" >> index.html
   

3. Ajoute et commit le changement :

   git add index.html
   git commit -m "Ajout d'un footer au site"
   

🔄 Revenir sur la branche principale et fusionner

1. Retourne sur la branche main :

   git checkout main
   

2. Fusionne la branche ajout-footer dans main :

   git merge ajout-footer
   

3. Vérifie l’historique des branches :

   git log --oneline --graph --decorate
   

   Tu verras la fusion de la branche avec une représentation graphique.

🔄 Supprimer la branche une fois fusionnée

1. Supprime la branche ajout-footer :

   git branch -d ajout-footer
   

   ✅ Tip : Supprime toujours les branches locales une fois qu’elles sont fusionnées pour garder ton projet propre.

4. Envoyer Ton Projet sur GitHub

🔄 Créer un dépôt sur GitHub

1. Va sur GitHub et clique sur New Repository.
2. Donne-lui un nom comme mon-premier-projet.
3. Ne coche pas l’option pour initialiser avec un README (puisque Git est déjà initialisé en local).

🔄 Lier ton dépôt local à GitHub

1. Ajoute le dépôt distant :

   git remote add origin https://github.com/ton_nom_utilisateur/mon-premier-projet.git
   

2. Envoie ton code sur GitHub :

   git push -u origin main
   

   ✅ Tip : -u associe ta branche locale main avec celle sur GitHub, donc pour les prochains push, tu pourras simplement faire git push.

5. Bonus : Travailler en Équipe avec des Branches et Pull Requests

🔄 Créer une nouvelle branche pour une fonctionnalité collaborative

1. Crée une branche ajout-navbar :

   git checkout -b ajout-navbar
   

2. Ajoute une barre de navigation dans index.html :

   echo "<nav><ul><li>Accueil</li><li>Contact</li></ul></nav>" | cat - index.html > temp && mv temp index.html
   

3. Commit la modification :

   git add index.html
   git commit -m "Ajout d'une barre de navigation"
   

4. Envoie la branche sur GitHub :

   git push -u origin ajout-navbar
   

🔄 Créer une Pull Request sur GitHub

1. Va sur le dépôt GitHub.
2. Clique sur Compare & Pull Request.
3. Donne un titre et une description claire, puis clique sur Create Pull Request.

🔄 Fusionner et supprimer la branche

1. Une fois la Pull Request validée, clique sur Merge Pull Request.
2. Supprime la branche sur GitHub et localement :

   git branch -d ajout-navbar
   git push origin --delete ajout-navbar
   

6. Commandes Git Essentielles Récapitulatives

• git status : Voir les fichiers modifiés.
• git add . : Ajouter tous les fichiers modifiés.
• git commit -m "Message" : Enregistrer les modifications.
• git log : Voir l’historique détaillé des commits.
• git log --oneline --graph --decorate : Visualiser rapidement l’historique et les branches.
• git branch : Voir les branches existantes.
• git checkout -b nouvelle-branche : Créer et basculer sur une nouvelle branche.
• git merge nom-de-la-branche : Fusionner une branche dans la branche active.
• git push : Envoyer les changements sur GitHub.
• git pull : Récupérer les derniers changements depuis GitHub.

7. Conclusion : Tu Maîtrises Git et GitHub !

🌟 Tu sais maintenant créer un projet, faire des commits, gérer des branches, et collaborer avec GitHub ! En suivant ces étapes, tu peux travailler en toute confiance et garder ton code propre et organisé.

🚀 Prochaine étape : Apprendre à gérer les conflits Git et améliorer ton workflow collaboratif.