Git vs GitHub : la différence, ton premier commit et ton premier push

Tu as projet_final.zip, projet_final_v2.zip, projet_final_vraiment_final.zip… et tu ne sais plus quelle version marche ? On te demande « le lien GitHub de ton projet » et tu ne sais pas si GitHub, c'est Git ? Ce guide te répond pas à pas, avec Salma et son portfolio.

Git et GitHub, ce n'est pas la même chose#

Git est un logiciel installé sur ton ordinateur. Il garde l'historique de chaque version du projet : qui a changé quoi, et quand. Il fonctionne sans Internet : tout l'historique est rangé dans un dossier caché, .git, à l'intérieur du projet.

GitHub est un site web. Il héberge ton dépôt et son historique en ligne, pour travailler en équipe ou montrer ton travail. Il en existe d'autres, comme GitLab ou Bitbucket ; Git reste le même partout.

Ton premier dépôt : git init et git status#

Ouvre un terminal (Git Bash sous Windows, Terminal sous macOS) et vérifie que Git est installé :

git --version
git config --global user.name "Salma"
git config --global user.email "salma@example.com"

Entre dans le dossier du projet et crée le dépôt :

cd portfolio
git init -b main
git status

-b main donne à la branche principale le nom utilisé par GitHub. git status deviendra ton réflexe : il dit ce qui a changé et ce qui n'est pas encore enregistré.

git add et git commit : la photo du projet#

Un commit, c'est une photo du projet à un instant donné, à laquelle tu peux revenir. Avant la photo, tu choisis qui entre dans le cadre : c'est la staging area, et on y ajoute les fichiers avec git add.

git add index.html
git commit -m "Ajoute la page d'accueil"
git log --oneline

La boucle de tous les jours : tu modifies, git status, git add, git commit. Avant d'enregistrer, git diff montre les lignes ajoutées (+) et retirées (−).

.gitignore : ton .env ne part jamais sur GitHub#

Dans le cours Node.js (E14), le fichier .env contient les mots de passe et les clés. Il doit rester chez toi. Crée un fichier .gitignore :

.env
node_modules/

git status ne montre plus le .env. Fais-le avant le premier push : un secret enregistré dans un commit reste dans l'historique, même si tu supprimes le fichier ensuite.

Les branches : essayer sans casser main#

Tu veux ajouter une section contact sans toucher à la version qui marche ? Crée une branche, travaille dessus, puis fusionne-la dans main :

git switch -c contact
git add index.html
git commit -m "Ajoute la section contact"
git switch main
git merge contact

La règle : une branche par idée, un commit par étape, et un merge seulement quand tu es sûr.

GitHub : git remote et git push#

Sur GitHub, crée un dépôt portfolio vide (sans README : ton projet existe déjà). Puis :

git remote add origin https://github.com/<compte>/portfolio.git
git push -u origin main

origin n'est qu'un nom : « la copie sur GitHub ». La première fois, GitHub te demande de te connecter par le navigateur ou avec un jeton : le mot de passe du compte n'est plus accepté ici, et un jeton ne s'affiche jamais dans une capture.

En équipe, on ne pousse pas directement sur main : on pousse une branche et on ouvre une pull request, pour qu'une autre personne relise le diff avant le merge. Ensuite, git pull ramène les changements de GitHub sur ton ordinateur.