• 6 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 1/19/24

Travaillez depuis votre dépôt local Git

Appréhendez le fonctionnement de Git

Jusqu’à maintenant, vous avez découvert l’utilité du contrôle de versions, et initialisé un dépôt Git. Bravo !

Avant de découvrir les commandes de base, je vous conseille de lire le schéma ci-dessous pour mieux appréhender le fonctionnement de Git. Ne vous inquiétez pas, je vais tout vous expliquer !

Fonctionnement et commandes de base de Git
Fonctionnement et commandes de base de Git

Ce schéma représente le fonctionnement de Git. Il est composé de 3 zones qui forment le dépôt local, et du dépôt distant GitHub.

Regardons plus en détail les différentes zones du dépôt local.

Le Working directory

Cette zone correspond au dossier du projet sur votre ordinateur.

Souvenez-vous, dans la partie précédente nous avons initialisé le dépôt “PremierProjet”. Eh bien ce dépôt, c’est la zone bleue du schéma.

Le Stage ou index

Cette zone est un intermédiaire entre le working directory et le repository. Elle représente tous les fichiers modifiés que vous souhaitez voir apparaître dans votre prochaine version de code.

Le Repository

Lorsque l’on crée de nouvelles versions d’un projet (vous vous souvenez, les 3 versions différentes du gâteau ?), c’est dans cette zone qu’elles sont stockées.

Ces 3 zones sont donc présentes dans votre ordinateur, en local.

En-dessous, vous trouvez le repository GitHub, c’est-à-dire votre dépôt distant.

Alors comment ça marche ?

Prenons un exemple pour y voir plus clair !

Imaginez un projet composé de 3 fichiers : fichier1, fichier2 et fichier3.

Nous faisons une modification sur fichier1, puis une modification sur fichier2, depuis le working directory. Super ! Nous avons maintenant une version évoluée de notre projet.

Nous aimerions sauvegarder cette version grâce à Git, c'est-à-dire la stocker dans le repository.

Comment faire ?

Pour commencer, nous allons envoyer les fichiers modifiés (fichier1 et fichier2) du working directory vers l’index. On dit qu’on va indexer fichier1 et fichier2. Une fois les fichiers indexés, nous pouvons créer une nouvelle version de notre projet.

Et maintenant, à vous de jouer !

Je vous propose de mettre en place une base de projet web, avec un fichier HTML et un fichier CSS pour mettre tout cela en pratique.

Initialisez un dépôt

Allez dans votre dépôt Git

Avant tout, vous devez vous situer dans le dépôt Git du projet.

Pour vous en assurer, tapez la commande “pwd” dans Git Bash. Si vous avez créé les mêmes dossiers que moi et que le résultat de la commande “pwd” est :

c:/users/JohnDoe/Documents/PremierProjet/

… c’est que vous êtes bien situé ! Sinon, pas de panique, il suffit d’utiliser la commande “cd” pour vous replacer dans le dossier/dépôt Git du projet.

Ensuite, initialisez un dépôt en vous basant sur l’exemple “PremierProjet” du chapitre précédent. Je vous conseille de suivre pas à pas la vidéo ci-dessous !

Créez les premiers fichiers

Dans notre dossier “PremierProjet”, créez un fichier “index.html” avec ce contenu :

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
   <h1>Un super titre</h1>
</body>
</html>

Puis, créez un fichier “styles.css” avec ce contenu :

h1 {
   color: red;
}

Vous pouvez ouvrir le fichier “index.html” dans un navigateur pour vérifier que tout fonctionne bien. Si c’est le cas, vous devriez avoir une page blanche avec le titre “Un super titre” en rouge.

Maintenant que vous avez une première base intéressante pour travailler sur votre projet web, créez une version du projet dans son état actuel.

Indexez vos fichiers avec la commande git add

Vous avez créé 2 fichiers, index.html et styles.css. Ces fichiers sont situés dans le dépôt Git. Pour créer une nouvelle version de votre projet, vous allez maintenant indexer les fichiers. Pour cela, retournez dans l’outil “Git Bash”.

Vous pouvez maintenant faire passer les fichiers index.html et styles.css vers l’index en utilisant la commande “git add” suivie du nom du fichier :

$ git add index.html styles.css

Voilà, vous avez indexé vos deux fichiers !

Créez une nouvelle version avec la commande git commit

Maintenant que vos fichiers modifiés sont indexés, vous pouvez créer une version, c'est-à-dire archiver le projet en l’état. Pour ce faire, utilisez la commande "git commit" :

git commit -m “Ajout des fichiers html et css de base”

“Ajout des fichiers html et css de base” est le message rattaché au commit grâce à l'argument "-m".

Vos modifications sont maintenant enregistrées avec la description “Ajout des fichiers html et css de base”.

La description est très importante pour retrouver le fil de vos commits, et revenir sur un commit en particulier. Ne la négligez pas ! Il ne serait pas pratique de nommer des commits du type "version 1", "version 2", "version 2.1", car vous seriez alors obligé de lire le fichier pour connaître les modifications réalisées. Avec un message clair, vous pouvez tout de suite identifier les modifications effectuées.

Félicitations ! Vous venez de créer une version de votre projet !

Envoyez votre commit sur le dépôt distant avec la commande git push

Créer une version de votre projet, c’est super, mais il faut désormais passer votre commit du repository à votre dépôt distant. On dit qu’il faut “pusher” votre commit.

Mais avant ça, il va nous falloir un peu de configuration et d’explications.

Il existe deux protocoles : SSH et HTTPS. Lorsque vous souhaitez envoyer du code sur GitHub, vous pouvez utiliser HTTPS : on vous demandera une confirmation de votre identifiant et mot de passe pour chaque action sensible. Vous pouvez aussi opter pour le protocole SSH, qui fonctionne via un système de clés privées et publiques.

Le protocole SSH permet de vous authentifier sur GitHub sans confirmer votre mot de passe ou code de confirmation pour chaque action. Il permet aussi de vous identifier lorsque vous faites un commit.

Le protocole SSH est largement utilisé dans le monde professionnel. Suivez le processus de la génération d'une clé publique à la configuration dans ce screencast :

Ajoutons ensemble votre clé SSH à votre compte GitHub. Avant de passer à cette étape, vous devez au préalable :

  • avoir généré une clé SSH publique ;

  • avoir ajouté votre clé à ssh-agent si nécessaire ;

  • avoir copié votre clé SSH.

Tout est bon pour vous ? Si oui, on continue ! Rendez-vous sur GitHub, puis dans votre profil. Dans vos paramètres, sélectionnez SSH and GPG Keys.

Sélectionnez SSH and GPG Keys dans la section paramètres.
Sélectionnez SSH and GPG Keys dans la section paramètres.

Ajoutez la clé préalablement copiée. Vous devriez avoir un format similaire :

Ajoutez votre clé SSH à votre compte GitHub.
Ajoutez votre clé SSH à votre compte GitHub.
Configuration de la clé SSH du compte GitHub.
Configuration de la clé SSH du compte GitHub.

Et voilà ! Vous avez configuré votre première clé SSH. Vous allez pouvoir push votre code sur GitHub via le protocole SSH !

Pour commencer, vous allez devoir “relier” votre dépôt local au dépôt distant que vous avez créé sur GitHub précédemment. Pour cela :

  • Cliquez sur la petite image en haut tout à droite. 

  • Cliquez sur “your repositories”.

  • Cliquez sur le repository créé dans la première partie du cours, “OpenclassroomsProject”.

Vous devriez avoir un écran comme celui-ci :

Reliez votre dépôt local au dépôt distant
Reliez votre dépôt local au dépôt distant

Dans la bannière "Quick setup", sélectionnez SSH (à gauche de l’URL), puis copiez le lien qui est généré.

Maintenant, retournez sur Git Bash, vérifiez que vous êtes bien dans votre repository et tapez la commande suivante :

git remote add 
origin git@github.com:EtudiantOC/OpenclassroomsProject.git

Vous l’aurez compris, le lien à saisir est le lien que vous venez de copier.

Ensuite, tapez la commande :

git branch -M main

Ça y est ! Vous avez relié le dépôt local au dépôt distant. Vous pouvez donc envoyer des commits du repository vers le dépôt distant GitHub en utilisant la commande suivante :

git push -u origin main 

Bravo, la version du projet est maintenant stockée dans le cloud !

Reprenez le fichier HTML créé. Disons que vous allez modifier le titre “Un super titre” en “Un super titre !”.

Pour créer une version du projet avec le fichier HTML à jour et l’envoyer sur le dépôt distant GitHub, vous allez :

  • Indexer le fichier HTML modifié grâce à la commande : 

git add index.html
  • Créer une nouvelle version grâce à la commande :

git commit -m “Modification du titre H1”
  • Envoyer la nouvelle version sur le dépôt distant grâce à la commande :

git push origin main

Et voilà ! Vous savez maintenant utiliser les commandes  git add  ,  git commit  et  git push . Vous serez amené à les utiliser régulièrement. Je vous conseille donc de vous entraîner, et pourquoi pas, de regarder régulièrement le schéma ci-dessus pour mémoriser les commandes de base. 

Fonctionnement et commandes de base de Git
Fonctionnement et commandes de base de Git

En résumé

  • Le protocole SSH permet d’authentifier une personne grâce à une clé unique et personnelle.

  • Vous pouvez ajouter une clé SSH sur votre compte GitHub afin de vous authentifier plus rapidement.

  • git add permet d’ajouter des fichiers dans l’index, qui est une zone intermédiaire dans laquelle stocker les fichiers modifiés.

  • git commit permet de créer une nouvelle version avec les fichiers situés dans l’index.

  • git commit -m permet de créer une nouvelle version et de préciser le message rattaché au commit.

  • git push permet d’envoyer les modifications faites en local vers un dépôt distant. 

Maintenant que vous savez utiliser les commandes Git de base, il est temps de vous initier aux branches ; allons voir de plus près comment les utiliser.

Example of certificate of achievement
Example of certificate of achievement