Git & GitHub : versionner ton portfolio

Avant de commencer

Pourquoi Git va changer ta vie de dev

Sans Git, sauvegarder = faire des copies portfolio-final, portfolio-final-2, portfolio-VRAIMENT-final… le cauchemar. Avec Git, tu enregistres des versions de ton projet : tu peux voir l'historique, comparer, et revenir à n'importe quel état. Et avec GitHub, tout est sauvegardé en ligne et partageable. C'est l'outil que tous les développeurs utilisent, tous les jours — et un vrai plus pour ton portfolio.

Ce que tu sauras faire à la fin

0. C'est quoi « versionner » ?

Versionner, c'est enregistrer des points de sauvegarde de ton projet au fil du temps. Chaque sauvegarde (un commit) garde l'état complet de tes fichiers à ce moment-là, avec un message qui décrit ce que tu as fait.

1. Installer & configurer Git

Étape 1 — Vérifier que Git est là

git --version

git version 2.43.0

Étape 2 — Te présenter à Git (une seule fois)

Git marque chaque commit avec ton nom et ton email. On les règle une fois pour toutes :

git config --global user.name "Marc Dupont"
git config --global user.email "marc@exemple.fr"

Étape 3 — Relire ce que tu as réglé

git config --global user.name
git config --global user.email

Marc Dupont
marc@exemple.fr

Étape 4 — Régler le nom de branche par défaut (évite un piège courant)

Avant Git 2.28 (sorti juillet 2020), la branche créée par git init s'appelait master. Depuis, Git laisse le choix — mais si le réglage n'est pas fait, il affiche un avertissement à chaque git init. GitHub utilise main par défaut depuis octobre 2020. Pour éviter tout conflit :

git config --global init.defaultBranch main

2. Initialiser un dépôt

On transforme le dossier de ton portfolio en dépôt Git.

cd ~/mon-site
git init

Initialized empty Git repository in /home/marc/mon-site/.git/

Vérifier que le dossier .git existe

ls -a

.  ..  .git  index.html  style.css

3. Les 3 zones de Git

Git ne te fait pas passer directement de « j'écris du code » à « c'est enregistré ». Il y a une étape intermédiaire, et c'est le truc qui déroute tous les débutants. Comprends ça maintenant, et tout le reste devient simple.

Vert = on avance (add → commit → push). Violet = on récupère / on revient en arrière (restore, pull).

4. Le cycle : add → commit

Maintenant que tu connais les zones, enregistrer une version est limpide : on met dans le panier (add), puis on grave (commit).

Étape 1 — Voir ce qui a changé

git status

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        index.html
        style.css

nothing added to commit but untracked files present

Étape 2 — Mettre dans le panier (add)

git add .

Étape 3 — Vérifier le panier

git status

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   index.html
        new file:   style.css

Étape 4 — Graver (commit)

git commit -m "Première version de mon portfolio"

[main (root-commit) a1b2c3d] Première version de mon portfolio
 2 files changed, 40 insertions(+)

Étape 5 (bonus) — Inspecter le panier avant de graver

Une fois git add fait, tu peux relire une dernière fois ce qui va entrer dans le commit :

git diff --staged

5. Écrire un bon message de commit

Un message de commit, ce n'est pas une formalité : c'est ce que toi dans 3 semaines (ou un recruteur) liras pour comprendre ton historique. Un bon message dit ce que fait le commit, en clair.

6. L'historique & un 2e commit

Voir l'historique

git log --oneline

a1b2c3d Première version de mon portfolio

git show a1b2c3d

Variantes utiles de git log

Modifier, puis enregistrer à nouveau

Change quelque chose dans ta page (ajoute une section, une couleur). Avant d'ajouter, regarde ce que tu as modifié :

git diff

diff --git a/index.html b/index.html
@@ -10,6 +10,9 @@
   <h1>Mon portfolio</h1>
+  <section id="projets">
+    <h2>Mes projets</h2>
+  </section>

Puis le cycle habituel :

git add .
git commit -m "Ajoute la section projets"

e4f5g6h Ajoute la section projets
a1b2c3d Première version de mon portfolio

7. Ignorer des fichiers (.gitignore)

Certains fichiers ne doivent jamais être versionnés : fichiers temporaires du système, dépendances lourdes (réinstallables), et surtout les secrets (mots de passe, clés d'API). On les liste dans un fichier nommé exactement .gitignore, à la racine du dépôt.

Créer le .gitignore

echo "node_modules/" > .gitignore
echo ".DS_Store" >> .gitignore
echo "*.log" >> .gitignore
echo ".env" >> .gitignore

Que veulent dire ces lignes ?

Syntaxe des patterns .gitignore

Diagnostiquer pourquoi un fichier est ignoré (ou pas)

Situation courante : tu penses avoir ignoré un fichier, mais git status le propose encore — ou l'inverse, un fichier disparaît du suivi sans raison. Pour comprendre quelle règle s'applique :

git check-ignore -v .env

.gitignore:4:.env	.env

Trois niveaux de .gitignore — lequel choisir ?

8. C'est quoi GitHub ?

Git vit sur ta machine. GitHub est un site web qui héberge tes dépôts en ligne : une copie de sécurité, accessible partout, et partageable. (Git ≠ GitHub : on peut utiliser Git tout seul, sans jamais aller en ligne. GitHub, c'est juste le coffre-fort distant le plus populaire — il en existe d'autres comme GitLab.)

Git (local) garde ton historique ; GitHub (en ligne) en garde une copie. On envoie avec push, on récupère avec pull.

GitHub vs les alternatives — quand choisir quoi

9. S'authentifier sur GitHub

C'est l'étape qui bloque tout le monde, alors on la traite à fond, avant d'essayer de pousser. Depuis 2021, GitHub n'accepte plus ton mot de passe de compte pour envoyer du code. Il faut prouver ton identité autrement. Choisis une des méthodes ci-dessous (la 1 est la plus simple).

Méthode 1 (recommandée) — GitHub CLI

L'outil officiel gh gère l'authentification pour toi, via ton navigateur.

gh auth login

! First copy your one-time code: ABCD-1234
Press Enter to open github.com in your browser...
✓ Authentication complete.
✓ Logged in as ton-pseudo

Méthode 2 — Jeton d'accès personnel (PAT)

Un Personal Access Token est un mot de passe spécial, long et généré par GitHub, que tu utilises à la place de ton mot de passe quand Git le demande.

Classic vs Fine-grained — lequel choisir ?

Pour le portfolio, un PAT classic avec la portée repo cochée suffit. Procédure :

1. Sur github.com : ton avatar → Settings → tout en bas Developer settings.
2. Personal access tokens → Tokens (classic) → Generate new token (classic).
3. Donne-lui un nom évocateur (ex. « PC lycée »), une expiration de 90 jours, et coche uniquement la case repo (accès complet aux dépôts privés et publics).
4. Clique Generate token et copie-le tout de suite (il ne sera plus jamais réaffiché — même GitHub ne le connaît que sous forme hachée).

Mémorisation automatique : le credential helper

Tu ne veux pas retaper ton jeton à chaque push. Git peut le stocker via un credential helper :

Méthode 3 — VS Code

Si tu codes dans VS Code : clique sur l'icône compte (en bas à gauche) → Sign in to GitHub. VS Code ouvre le navigateur, tu autorises, et il gère l'authentification de Git automatiquement.

Comparaison des 3 méthodes

10. Créer un dépôt GitHub & le relier

Étape 1 — Créer le dépôt en ligne

1. Sur github.com, clique le + en haut à droite → New repository.
2. Nom : portfolio. Laisse-le Public.
3. Ne coche PAS « Add a README », ni .gitignore, ni licence : on a déjà des fichiers en local, et cocher créerait un commit côté GitHub qui entrerait en conflit (voir chapitre 11).
4. Clique Create repository.

GitHub affiche alors l'adresse du dépôt, du type https://github.com/ton-pseudo/portfolio.git.

Étape 2 — Relier ton dépôt local au dépôt distant

git remote add origin https://github.com/ton-pseudo/portfolio.git
git branch -M main

Étape 3 — Vérifier le lien

git remote -v

origin  https://github.com/ton-pseudo/portfolio.git (fetch)
origin  https://github.com/ton-pseudo/portfolio.git (push)

11. Envoyer ton code en ligne (push)

git push -u origin main

Si tu as fait le chapitre 9, l'authentification passe toute seule. Sinon, Git te la demandera ici.

Enumerating objects: 4, done.
Writing objects: 100% (4/4), 1.20 KiB, done.
To https://github.com/ton-pseudo/portfolio.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

Recharge la page de ton dépôt sur github.com : tes fichiers y sont !

12. Lire ton dépôt sur github.com & le README

Te repérer sur la page du dépôt

Ajouter un README.md

Le README.md est la vitrine de ton dépôt : GitHub l'affiche automatiquement sur la page d'accueil. C'est la première chose qu'un recruteur lit. Il est écrit en Markdown (.md) : un texte simple où quelques symboles donnent la mise en forme.

# Mon Portfolio

Site personnel présentant mon parcours et mes projets BTS SIO.

## Technologies
- HTML5
- CSS3

## Me contacter
[Mon profil GitHub](https://github.com/ton-pseudo)

Crée ce fichier nommé exactement README.md à la racine, puis versionne-le comme le reste :

git add README.md
git commit -m "Ajoute le README de présentation"
git push

13. Cloner un dépôt existant

Jusqu'ici tu es parti d'un dossier local. Le cas inverse est tout aussi courant : un dépôt existe déjà en ligne (le tien depuis un autre PC, celui d'un camarade, un projet open-source) et tu veux le récupérer entier sur ta machine. C'est cloner.

git clone https://github.com/ton-pseudo/portfolio.git

Cloning into 'portfolio'...
remote: Enumerating objects: 8, done.
Receiving objects: 100% (8/8), done.

14. Revenir en arrière

Le super-pouvoir de Git : annuler. Tu as cassé ta page ? Reviens à un état qui marchait.

Annuler des modifications non commitées

git restore index.html

Sortir un fichier du panier (sans perdre tes modifs)

git restore --staged index.html

Regarder une ancienne version

Avec git log --oneline, tu vois l'identifiant de chaque commit. On peut consulter le code d'un commit précis ou y revenir — on approfondira ce retour en arrière (et les branches) à la séance « Git en équipe ».

git stash — mettre de côté sans commiter

Situation typique : tu bosses sur ta page, tu n'as pas fini (donc pas de commit propre à faire), mais tu dois récupérer le travail d'un camarade avec git pull — et Git refuse car tu as des modifications non commitées. Solution : ranger temporairement tes modifications dans une cachette.

git stash

Saved working directory and index state WIP on main: a1b2c3d Première version

Après avoir fait ta manip (git pull, changé de branche, etc.), tu récupères ce que tu avais rangé :

git stash pop

On branch main
Changes not staged for commit:
        modified:   index.html
Dropped refs/stash@{0}

Chapitre 14 bis — Annuler un commit : revert vs reset

Deux commandes permettent d'annuler des commits, mais elles n'ont pas du tout le même effet. Confondre les deux est l'une des erreurs les plus dangereuses en Git professionnel.

git revert — annuler proprement (la méthode sûre)

git revert crée un nouveau commit qui fait l'inverse d'un commit précédent. L'historique reste intact — on ajoute, on n'efface pas.

git revert a1b2c3d

[main f7a9b1c] Revert "Ajoute la section projets"
 1 file changed, 3 deletions(-)

git reset — réécrire l'historique (méthode locale seulement)

git reset déplace HEAD (et ta branche) vers un commit précédent. Il existe 3 modes :

git reflog — la vraie bouée de sauvetage

Tu as fait git reset --hard et tu réalises que tu avais besoin de ces commits. Pas de panique : Git garde secrètement un journal de tous les déplacements de HEAD, pendant environ 30 jours (valeur de gc.reflogExpire). C'est le reflog.

git reflog

f7a9b1c (HEAD -> main) HEAD@{0}: reset: moving to HEAD~2
e4f5g6h HEAD@{1}: commit: Ajoute la section projets
a1b2c3d HEAD@{2}: commit (initial): Première version de mon portfolio

git reset --hard e4f5g6h

--force vs --force-with-lease (le push forcé responsable)

Si tu dois absolument forcer un push (cas rare, jamais sur main partagé), préfère la version sécurisée :

15. Mini-projet : portfolio versionné & en ligne

La mission

1. Ton portfolio est un dépôt Git (git init + config faite).
2. Au moins 3 commits avec des messages clairs à l'impératif (ex. « Met en place la base », « Ajoute la section projets », « Applique le thème violet »).
3. Un .gitignore (même minimal) versionné.
4. Un README.md de présentation, visible sur la page GitHub.
5. Le tout poussé sur GitHub, dépôt public, fichiers visibles en ligne.
6. Tu sais montrer ton historique (git log --oneline) et l'URL de ton dépôt.

Pour finir

Ton antisèche (le cycle Git)

Vérifie tes acquis

Glossaire