GraphAndWeb - Partageons nos compétences GraphAndWeb

Un site gratuit sur le web en 5 leçons – 1.Git: les bases

Publié le 26 juin 2020

Catégories: Code Web

Git, c’est quoi

Bienvenue dans la première partie de ce tutoriel. Cette première partie est consacrée à GIT. Même si vous ne comprenez pas tout du premier coup, ne vous inquiétez pas. Vous allez voir, de nouveaux horizons vont s’ouvrir.

Git est le système de versioning de fichiers le plus connu et le plus répandu. Alors d’abord un système de versioning, qu’est ce que c’est ?
Vous avez sûrement déjà été confronté à ce problème, vous avez écrit un texte sur votre ordinateur (sur word par exemple). Puis vous êtes venu modifier ce document avec de nouvelles informations. Par la suite, vous vous rendez compte que les bonnes informations étaient celles que vous aviez remplies en première intention et pas moyen de mettre la main dessus car vous avez écrasé en enregistrant. Vous êtes bon pour recommencer le travail. Si vous aviez enregistré un fichier version 1 et un fichier version 2, ça aurait été tellement plus facile de retrouver votre ancien contenu. Voilà un exemple basique où Git vous aurait rendu un fier service car son travail, c’est de sauvegarder automatiquement les changements de versions des fichiers. Vous ne perdrez plus jamais une partie de votre travail. Vous pouvez même extrapoler cette idée, car Git vous permettra de travailler en équipe avec un nombre infini de changements.
Voilà la magie de Git résumée en quelques lignes.

Passons à la pratique

Pour pouvoir utiliser Git, il faut d’abord l’installer sur votre machine. C’est disponible quasi sur toutes les machines donc pas de soucis. Il y a même des installeurs pour les distributions les plus courantes donc plus d’excuses, vous ne devez même pas ouvrir le terminal pour installer. Vous trouverez les infos pour installer facilement ici.
Vous pouvez vérifier dans le terminal que Git est bien installé en tapant la ligne suivante:

$ git --version

Si votre terminal vous renvoie un numéro de version, c’est que Git est bien installé.
Maintenant que Git est installé, vous allez pouvoir l’utiliser sur votre machine. Lorsqu’il sera appelé pour un dossier, il va automatiquement créer un dossier .git à l’intérieur (les fichiers et dossiers précédés d’un point sont cachés sur la plupart des systèmes). Et il va y enregistrer l’ensemble des modifications. Vous aurez donc un historique de vos changements dans ce petit dossier.

Ok, c’est installé mais je ne vois toujours pas comment utiliser tout ça. Pas de soucis, c’est juste ci-dessous.

Github

On a installé un outil localement qui gère quand on l’active les versions des fichiers stockés dans un dossier. Mais toute la puissance de Git, c’est de pouvoir mettre cet historique en sécurité sur un serveur et de pouvoir y accéder partout et tout le temps et même à plusieurs. C’est ce que propose Github. Mais ce n’est pas le seul, il y a aussi Gitlab, Bitbucket, … Mais je ne vais pas faire une étude de marché des différents pourvoyeurs, je vous laisse faire votre marché. Sachez que vous pouvez aussi héberger votre propre serveur Git mais là on s’attaque à un gros morceau et ce n’est pas l’objet de ce cours.
On va donc utiliser Github dans le cadre de ce tutoriel, vous allez voir, ça marche très bien dans sa version gratuite. Si vous voulez faire des dépôts privés, je vous conseille Gitlab qui est très bien aussi.

Première étape, inscription gratuite sur Github via ce lien: https://github.com/.
Maintenant que vous êtes inscrit, il faut communiquer avec le service. Pour communiquer avec le service Github et transférer les fichiers, il faut montrer patte blanche pour s’authentifier. Il existe 2 méthodes: les clés ssh (à privilégier) et les connexions https.
Voici un lien qui va vous aider pour enregistrer la clé ssh de votre machine sur Github: se connecter en ssh à Github. Les clés ssh s’ajoutent dans les settings de votre compte Github. A partir du moment où votre clé ssh est enregistrée sur Github, vous pouvez communiquer avec le serveur sans avoir besoin de vous authentifier à chaque fois (le service utilise la signature ssh de la machine).
Si jamais vous ne vous en sortez pas avec les clés ssh, envoyez-moi un petit mail, je ferai peut-être un article spécifique pour cette question. Sinon, vous pouvez opter pour la solution https. Vous devrez vous authentifier chaque fois que vous communiquez avec le serveur mais ça fonctionne aussi. Via ce lien, un petit explicatif sur comment switcher du service ssh au service https et vice-versa.

Les premiers pas avec Git

Dans un premier temps, on peut créer un nouveau dépôt (ou repository) sur Github directement. Il faut inscrire le nom de son projet et il y a quelques options. Vous pouvez voir cela dans l’image ci-dessous.

créer un nouveau dépôt sur Git

Quand le dépot est créé, vous allez tomber sur ceci:

Option d'un dépôt vide sur Github

Lier le dossier local avec le dépôt Github

Maintenant que le dépôt est créé, il faut le lier avec un dossier sur notre machine. Il y a plusieurs options qui sont définies dans l’image précédente mais dans le cas qui nous occupe, on va créer un nouveau dossier et du nouveau contenu.

J’ouvre mon terminal ou je vais dans le terminal de mon éditeur de code (par exemple vscode) et je procède comme ceci:

  1. Je me place dans un dossier. Je peux lister les dossiers avec la commande ls. Pour rentrer et sortir des dossier, je peux utiliser la commande cd. Si je suis dans vscode, je peux créer un dossier comme d’habitude et le glisser dans vscode. Le terminal va automatiquement se placer dans le bon dossier (je vous avais dit que vscode était pratique).

  2. Maintenant que je suis dans le bon dossier, je peux initialiser git pour ce dossier:

$ git init

  1. Je peux maintenant créer un petit document dans mon dossier. De mon côté, j’ai simplement créé un fichier texte que j’ai appelé premiers-pas.txt. Et j’y ai ajouté 1 ligne de contenu. Vous pouvez le trouver dans mon dépôt Github git-lesbases.

  2. Quand j’ai sauvé mon fichier, je peux tapper les commandes suivantes:

git remote add origin git@github.com:NomDUtilisateur/NomDuDepot.git
git add .
git commit -m "Commentaire du premier commit"
git push -u origin master

Plusieurs choses à expliquer. La première ligne cible le bon dossier sur votre compte Github. Ensuite on ajoute les fichiers existants (ici le fichier texte qu’on vient de créer). On crée notre premier commit. Ca c’est un mot important, un commit, c’est une version. Chaque fois qu’on va pousser un commit, on pousse une version de notre code vers notre dépôt. On pourra donc revenir à cette version à tout moment. On voit que l’on peut mettre un commentaire lorsque l’on commit pour s’y retrouver plus facilement.
Et pour terminer on pousse les fichiers avec la dernière ligne vers la branche master. Mais on ne va pas rentrer dans le principe des branches ici, ce sera pour un autre tutoriel.

Si ces étapes se sont déroulées sans embrouilles, vous pouvez naviguer sur le site de Github et voir que votre fichier a bien été uploadé et est maintenant présent dans votre dépôt.

Le train-train habituel: modifications, commit et push

A partir du moment où l’on a initialisé son git et que l’on a poussé son premier commit, on a déjà quasi tout compris à git. Il existe encore pas mal de subtilités et de possibilités mais pour commencer, c’est déjà pas mal. Je vous laisse vous entrainer avec vos premiers dépôt git en suivant les manoeuvres suivantes: je modifie mes fichiers, je les enregistre et je tappe les commandes suivantes dans le terminal:

git add *
git commit -m "Nom de mon commit"
git push origin master

Mes modifications sont prise en compte sur mon dépôt et je peux parcourir mes version sur celui-ci.

N’hésitez pas à tester. Vous verrez vous prendrez vite le plis. Pour ceux qui sont réfractaires au terminal, sachez qu’il existe des plugins git à installer dans les différents éditeurs de code pour traiter les commandes du terminal de manière plus visuelle. Il existe aussi des outils graphiques pour gérer git. Voici un lien pour ceux que ça intéresse.

A bientôt pour la suite !

Table des matières:

  1. Git: les bases
  2. HTML & CSS
  3. Les grilles
  4. Les templates
  5. La publication et l’hébergement