BUT Réseau et Télécoms - 1ère année
Durée estimée : 2 heures
À la fin de ce TP, vous serez capable de :
mindmap
root((GitHub Pages))
Préparation
Compte GitHub
Installation Git
Clé SSH
Configuration
Projet Local
Initialisation Git
Fichiers du site
README.md
.gitignore
Dépôt GitHub
Création repository
Connexion SSH
Push du code
Gestion versions
Déploiement
GitHub Pages
GitHub Actions
Automatisation
Site en ligne
Maintenance
Workflow quotidien
Commits réguliers
Mises à jour
Collaboration
Imaginez que vous travaillez sur un projet de développement web. Vous apportez des modifications, ajoutez de nouvelles fonctionnalités, puis réalisez que votre dernière modification a tout cassé. Sans contrôle de version, vous devriez tout refaire manuellement ou espérer avoir fait une sauvegarde récente.
Le contrôle de version (ou source control) est un système qui enregistre les modifications apportées à vos fichiers au fil du temps. C'est comme une machine à remonter le temps pour votre code.
Analogie : Git est comme Word (le logiciel), GitHub est comme OneDrive (le stockage en ligne).
Avant de commencer, lisez attentivement cette section !
Si vous utilisez un navigateur avec la traduction automatique activée (Chrome, Edge, etc.), désactivez-la immédiatement pour les sites de développement comme GitHub, Stack Overflow, documentation technique, etc. Et en général, si vous utilisez plus l'anglais au quotidien vous progresserez plus vite.
Le développement informatique se fait en anglais. Les mots-clés, fonctions et commandes sont en anglais. Si votre navigateur traduit automatiquement :
# Code original (qui fonctionne)
print("Hello")
read("file.txt")
# Code traduit par le navigateur (qui NE fonctionne PAS)
imprime("Bonjour")
lit("fichier.txt")
❌ Résultat : Votre code ne fonctionnera jamais !
Sur Chrome/Edge :
Conseil pro : Apprenez le vocabulaire technique en anglais dès maintenant. C'est un investissement qui vous servira toute votre carrière !
Avant de commencer, assurez-vous d'avoir :
jean-dupont, jdupont-dev, jeandupontxX_dark_coder_Xx, kikoolol123🎉 Félicitations ! Vous avez maintenant un compte GitHub.
Git est l'outil en ligne de commande qui permet de gérer vos versions de code localement.
mainxcode-select --install
git --version
git version 2.43.0✅ Si vous voyez un numéro de version, Git est correctement installé !
En 2020, la communauté du développement a commencé à adopter "main" comme nouveau standard pour plusieurs raisons :
💡 Bon à savoir : Si vous travaillez sur un ancien projet utilisant "master", toutes les commandes restent identiques, il suffit de remplacer main par master dans les commandes.
Git a besoin de savoir qui vous êtes pour associer vos modifications à votre identité. Cette configuration est obligatoire.
Dans votre terminal (Git Bash sur Windows ou Terminal sur macOS), tapez :
git config --global user.name "Votre Nom"
git config --global user.email "votre.email@exemple.com"
Remplacez :
"Votre Nom" par votre nom complet (ex: "Jean Dupont")"votre.email@exemple.com" par l'email utilisé pour GitHubExemple :
git config --global user.name "Jean Dupont"
git config --global user.email "jean.dupont@exemple.com"
git config --global --list
Vous devriez voir :
user.name=Jean Dupont
user.email=jean.dupont@exemple.com
💡 Vérifiez une dernière fois :
git status
Vous devriez voir tous vos fichiers en vert, prêts à être commités.
SSH est un protocole sécurisé qui permet de s'authentifier sur GitHub sans avoir à taper son mot de passe à chaque fois.
Une clé SSH fonctionne comme une paire de clés physiques :
id_ed25519) : Reste sur votre ordinateur, ne doit JAMAIS être partagéeid_ed25519.pub) : Peut être partagée, vous la donnez à GitHubC'est comme une serrure (GitHub) et une clé (votre ordinateur). Seule votre clé peut ouvrir cette serrure.
Pourquoi ed25519 ?
Dans votre terminal, tapez :
ssh-keygen -t ed25519 -C "votre.email@exemple.com"
Remplacez votre.email@exemple.com par votre email GitHub.
Vous verrez :
Generating public/private ed25519 key pair.
Enter file in which to save the key (/home/user/.ssh/id_ed25519):
Enter passphrase (empty for no passphrase):
Vous verrez un message de confirmation avec un "randomart" (dessin ASCII).
✅ Votre paire de clés SSH est créée !
Les fichiers sont dans le dossier ~/.ssh/ :
~/.ssh/id_ed25519 : votre clé privée (🔒 SECRÈTE)~/.ssh/id_ed25519.pub : votre clé publique (📢 partageable)Dans votre terminal, tapez :
cat ~/.ssh/id_ed25519.pub
Vous verrez quelque chose comme :
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGzT... votre.email@exemple.com
Sélectionnez TOUT le texte affiché (de ssh-ed25519 jusqu'à votre email) et copiez-le :
⚠️ Important : Copiez TOUTE la ligne, y compris ssh-ed25519 au début et votre email à la fin.
PC personnel ou Mac IUT✅ Votre clé SSH est maintenant ajoutée à GitHub !
Avant d'aller plus loin, vérifions que la connexion entre votre ordinateur et GitHub fonctionne.
Dans votre terminal, tapez :
ssh -T git@github.com
La première fois, vous verrez un message comme :
The authenticity of host 'github.com (140.82.121.4)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
Are you sure you want to continue connecting (yes/no/[fingerprint])?
Tapez yes et appuyez sur Entrée.
Vous devriez ensuite voir :
Hi VotreUsername! You've successfully authenticated, but GitHub does not provide shell access.
✅ Parfait ! La connexion SSH fonctionne.
❌ Si vous avez une erreur :
Avant de créer votre premier dépôt, comprenons les concepts de base.
Un dépôt (ou repository, souvent abrégé repo) est un dossier qui contient :
.git/)Quand vous créez un dépôt sur GitHub, vous choisissez sa visibilité :
🌍 Public : Tout le monde peut voir votre code (mais seuls vous et vos collaborateurs peuvent le modifier)
🔒 Private : Seuls vous et les personnes que vous invitez peuvent voir le code
Le README.md est la "page d'accueil" de votre dépôt. C'est la première chose que les visiteurs voient.
Il est écrit en Markdown, un langage de mise en forme simple :
# Mon Portfolio
Ceci est mon site web personnel créé en BUT Informatique.
## Technologies utilisées
- HTML5
- CSS3
- GitHub Pages
## Auteur
Jean Dupont - Étudiant en BUT Informatique
Le .md signifie Markdown.
Voici les commandes que nous allons utiliser aujourd'hui :
| Commande | Description |
|---|---|
git init |
Initialise un nouveau dépôt Git dans le dossier actuel |
git add <fichier> |
Prépare un fichier pour être enregistré (staging) |
git add . |
Prépare TOUS les fichiers modifiés |
git commit -m "message" |
Enregistre les modifications avec un message descriptif |
git push |
Envoie vos commits locaux vers GitHub |
git status |
Affiche l'état actuel de votre dépôt |
git log |
Affiche l'historique des commits |
Voici le cycle de travail avec Git :
flowchart TD
A[Modifier vos fichiers] --> B[git add .]
B --> C[git commit -m 'Description']
C --> D[git push]
D --> E[Modifications en ligne sur GitHub! 🎉]
E --> F{Nouvelles modifications?}
F -->|Oui| A
F -->|Non| G[Fin]
style A fill:#e1f5ff
style B fill:#fff4e1
style C fill:#ffe1f5
style D fill:#e1ffe1
style E fill:#ffd700
style G fill:#ddd
💡 Analogie :
git add = Mettre des colis dans un chariotgit commit = Emballer le chariot avec une étiquettegit push = Envoyer le colis à la poste (GitHub)mon-portfolioMon site web personnel - BUT Informatique (optionnel mais recommandé)✅ Votre dépôt est créé !
GitHub vous montre maintenant une page avec des instructions. Ne fermez pas cette page, nous allons utiliser ces commandes.
Vous devriez voir une section "…or create a new repository on the command line" avec des commandes comme :
echo "# mon-portfolio" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:VotreUsername/mon-portfolio.git
git push -u origin main
💡 Gardez cette page ouverte, nous allons utiliser ces commandes.
Ctrl + ù (Windows) / ⌘ + ù (Mac)Sur Windows, assurez-vous d'utiliser Git Bash :
PS (PowerShell), cliquez sur la flèche vers le bas à côté du + et sélectionnez Git BashDans le terminal VS Code, tapez :
git init
Vous verrez : Initialized empty Git repository in ...
✅ Git est maintenant actif dans ce dossier !
Retournez sur la page GitHub de votre dépôt vide. Copiez la ligne qui ressemble à :
git remote add origin git@github.com:VotreUsername/mon-portfolio.git
⚠️ IMPORTANT : Assurez-vous que l'URL commence par git@github.com: et pas par https://. C'est l'URL SSH qui utilise votre clé.
Collez cette commande dans votre terminal VS Code et appuyez sur Entrée.
git branch -M main
Cela renomme votre branche par défaut en main (c'est la convention moderne sur GitHub).
✅ Votre dépôt local est maintenant lié à GitHub !
Le Markdown est un langage de mise en forme ultra-simple. Voici les bases :
# Titre de niveau 1 (le plus grand)
## Titre de niveau 2
### Titre de niveau 3
**texte en gras**
*texte en italique*
- Liste à puces
- Deuxième élément
- Troisième élément
1. Liste numérotée
2. Deuxième élément
3. Troisième élément
[Lien cliquable](https://www.exemple.com)
`code inline`
Code sur plusieurs lignes
Dans VS Code :
README.md (attention aux majuscules !)# Mon Portfolio
Bienvenue sur mon site web personnel !
## À propos
Je suis étudiant en première année de BUT Informatique.
Ce site présente mes projets et mes compétences en développement web.
## Technologies utilisées
- HTML5
- CSS3
- GitHub Pages
## Auteur
**Votre Nom**
Étudiant en BUT Informatique - Promotion 2024
Ctrl + S ou ⌘ + S)Dans le terminal VS Code, tapez les commandes suivantes une par une :
git add README.md
Cette commande prépare le fichier README.md pour être enregistré.
git commit -m "Ajout du fichier README"
Cette commande enregistre le fichier avec un message descriptif.
git push -u origin main
Cette commande envoie votre commit sur GitHub.
La première fois, vous verrez beaucoup de texte défiler. À la fin, vous devriez voir :
To github.com:VotreUsername/mon-portfolio.git
* [new branch] main -> main
✅ Votre README est maintenant en ligne !
README.md affiché avec la mise en forme Markdown !Maintenant, modifions le README pour comprendre le cycle complet.
Dans VS Code, modifiez votre README.md, par exemple ajoutez une section :
## Contact
- Email : votre.email@exemple.com
- GitHub : [@VotreUsername](https://github.com/VotreUsername)
Sauvegardez (Ctrl + S ou ⌘ + S)
Dans le terminal, tapez :
git add README.md
git commit -m "Ajout de la section Contact"
git push
Retournez sur GitHub et rechargez la page : vos modifications sont en ligne !
💡 Vous avez compris le workflow Git ! C'est toujours : add → commit → push
Avant de publier votre site, nous allons préparer tous les fichiers nécessaires.
Créons d'abord un fichier .gitignore pour éviter d'envoyer des fichiers inutiles.
Le fichier .gitignore liste les fichiers et dossiers que Git doit ignorer. C'est essentiel pour :
.DS_Store sur Mac, Thumbs.db sur Windows).gitignore à la racine# Fichiers système
.DS_Store
Thumbs.db
Desktop.ini
# Fichiers VS Code (optionnel)
.vscode/
# Fichiers temporaires
*.tmp
*.log
*~
# Node modules (si vous utilisez npm plus tard)
node_modules/
# Fichiers de sauvegarde
*.bak
*.swp
✅ Git ignorera maintenant ces fichiers automatiquement !
Assurez-vous d'avoir :
index.html à la racine de votre projet (c'est la page d'accueil)style.css ou dans un dossier css/)images/ par exemple)⚠️ Important : Le fichier principal doit s'appeler index.html pour que GitHub Pages l'affiche par défaut.
Vérifions ce qui sera envoyé sur GitHub :
git status
Vous devriez voir :
Vous ne devriez PAS voir :
Si vous voyez des fichiers indésirables, ajoutez-les dans .gitignore !
✅ Vos fichiers sont prêts à être publiés !
Maintenant que vos fichiers sont prêts, envoyons-les sur GitHub !
Dans le terminal VS Code, tapez :
git add .
Le point . signifie "tous les fichiers" (sauf ceux dans .gitignore).
Pour être sûr :
git status
💡 Vérifiez une dernière fois :
Vous devriez voir tous vos fichiers en vert, prêts à être commités.
git commit -m "Ajout du site web complet"
git push
✅ Votre site est maintenant sur GitHub !
Retournez sur la page de votre dépôt GitHub et rechargez : vous devriez voir tous vos fichiers.
Maintenant que votre site est sur GitHub, activons GitHub Pages pour le rendre accessible en ligne.
GitHub Pages est un service gratuit qui transforme votre dépôt en site web public. C'est parfait pour :
mon-portfoliomain/ (root)Vous verrez un message : "Your site is ready to be published at https://VotreUsername.github.io/mon-portfolio/"
⏳ Attendez 1-2 minutes, puis rafraîchissez la page. Le message deviendra : "Your site is live at ..."
✅ GitHub Pages est activé !
Cliquez sur le lien ou allez sur https://VotreUsername.github.io/mon-portfolio/
🎉 Votre site est en ligne ! Vous devriez voir votre page index.html s'afficher.
💡 Note : Si vous voyez une erreur 404 ou le README au lieu de votre site :
index.html (pas index.htm ou autre)Pour l'instant, votre site est en ligne, mais si vous le modifiez et poussez les changements, la mise à jour peut prendre du temps. Automatisons ce processus !
Les GitHub Actions sont des automatisations qui s'exécutent sur GitHub. Une GitHub Action est un robot automatique qui exécute des tâches pour vous. Par exemple :
Notre action va :
mainDans VS Code :
.github à la racine de votre projet..github, créez un sous-dossier workflowsVotre arborescence doit ressembler à :
mon-portfolio/
├── .github/
│ └── workflows/
├── .gitignore
├── README.md
├── index.html
├── style.css
└── ...
.github/workflows/, créez un nouveau fichier nommé deploy.ymlname: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
environment: github-pages
permissions:
contents: read
pages: write
id-token: write
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v4
with:
path: .
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
main⚠️ Important sur le path :
Dans la section Upload artifact, il y a path: .
path: . signifie : "Prends TOUT à la racine du dépôt"site/, vous mettriez path: sitePour ce TP, laissez path: . car votre site est à la racine.
Dans le terminal :
git add .github/
git commit -m "Ajout de la GitHub Action pour le déploiement automatique"
git push
⏳ Attendez que la coche soit verte (environ 30 secondes à 2 minutes)
✅ Parfait ! Votre déploiement automatique est actif !
Pour vérifier que tout fonctionne :
index.html localement (changez un titre, ajoutez du texte, etc.)git add index.html
git commit -m "Test de déploiement automatique"
git push
🎉 Félicitations ! Votre pipeline de déploiement automatique fonctionne !
### 14.2 Étapes simples
1. **Modifiez** vos fichiers localement dans VS Code
2. **Sauvegardez** vos modifications (`Ctrl + S` ou `⌘ + S`)
3. Dans le terminal :
```bash
git add .
git commit -m "Description de vos modifications"
git push
💡 Astuce : Vous n'êtes pas obligé d'attendre que le déploiement se termine. Vous pouvez continuer à travailler et pousser d'autres modifications. Chaque push déclenche un nouveau déploiement.
Un bon message de commit explique ce que vous avez fait et pourquoi.
✅ Bons messages :
"Ajout de la section À propos""Correction du bug d'affichage du menu""Amélioration du responsive sur mobile""Ajout de la page projets avec 3 projets"❌ Mauvais messages :
"Update""fix""ça marche""asdfghjkl"💡 Astuce : Écrivez votre message comme si vous complétiez la phrase : "Ce commit va..."
# Voir l'état actuel (fichiers modifiés, à commiter, etc.)
git status
# Ajouter un fichier spécifique
git add nom-du-fichier.html
# Ajouter tous les fichiers modifiés
git add .
# Commiter avec un message
git commit -m "Votre message"
# Envoyer sur GitHub
git push
# Voir l'historique des commits
git log
# Voir l'historique condensé (une ligne par commit)
git log --oneline
# Voir les différences avant de commiter
git diff
# Annuler les modifications d'un fichier (avant git add)
git checkout -- nom-du-fichier.html
# Retirer un fichier de la staging area (après git add mais avant commit)
git reset nom-du-fichier.html
# Voir les fichiers ignorés par .gitignore
git status --ignored
Vérifiez que vous avez bien accompli toutes les étapes :
mon-portfolio créé sur GitHub (Étape 7)https://VotreUsername.github.io/mon-portfolio/ (Étape 12)🎉 Si tout est coché : BRAVO, vous maîtrisez les bases de Git, GitHub Pages et GitHub Actions !
Cause : Votre clé SSH n'est pas correctement configurée.
Solution :
ssh -T git@github.comCause : Vous n'êtes pas dans un dossier Git ou vous n'avez pas fait git init.
Solution :
# Vérifier que vous êtes dans le bon dossier
pwd # affiche le dossier actuel
# Si besoin, aller dans le bon dossier
cd chemin/vers/votre/projet
# Initialiser Git si pas encore fait
git init
Cause : Git n'a pas votre configuration user.name et user.email.
Solution :
git config --global user.name "Votre Nom"
git config --global user.email "votre.email@exemple.com"
Cause : Votre fichier principal ne s'appelle pas index.html ou il n'est pas à la racine.
Solution :
index.htmlCause : Plusieurs possibilités (syntaxe YAML incorrecte, permissions manquantes, etc.)
Solution :
deploy.yml est identique à celui du TPCause : Différence de fin de ligne entre Windows et Unix (c'est normal !).
Solution : C'est juste un avertissement, pas une erreur. Git gère ça automatiquement grâce à la configuration faite lors de l'installation. Vous pouvez ignorer ce message.
Une fois à l'aise avec les bases, vous pourrez apprendre :
Les branches : Travailler sur plusieurs versions en parallèle
git branch nouvelle-fonctionnalite
git checkout nouvelle-fonctionnalite
Les pull requests : Proposer des modifications et les faire réviser
Les conflits : Gérer quand deux personnes modifient le même fichier
Git clone : Télécharger un projet existant
git clone git@github.com:username/projet.git
Les tags : Marquer des versions spécifiques
git tag v1.0.0
Pour pratiquer, essayez de :
id_ed25519) ne doit JAMAIS être partagée ou uploadéeGit et GitHub ne sont pas que des outils techniques, c'est aussi une culture :
À la fin de ce TP, vous devriez être capable de :
Félicitations ! Vous venez de franchir une étape majeure dans votre parcours de développeur.
Git et GitHub sont utilisés par des millions de développeurs dans le monde entier, des étudiants aux ingénieurs des GAFAM. Maîtriser ces outils vous ouvre les portes de la collaboration moderne et du développement professionnel.
Ce n'est que le début ! Git a encore beaucoup à vous offrir : branches, merges, pull requests, forks, rebase, et bien plus. Mais vous avez maintenant les fondations solides pour construire là-dessus.
"Code is like humor. When you have to explain it, it's bad."
— Cory House
Mais contrairement au code, l'historique Git doit toujours être explicite ! 😉
Bon développement et bonne continuation ! 🚀
┌──────────────────────────────────────────────────────┐
│ COMMANDES GIT ESSENTIELLES │
├──────────────────────────────────────────────────────┤
│ CONFIGURATION │
│ git config --global user.name "Nom" │
│ git config --global user.email "email@exemple.com" │
│ │
│ INITIALISATION │
│ git init Créer un dépôt │
│ git clone <url> Cloner un dépôt │
│ │
│ MODIFICATIONS │
│ git status Voir l'état │
│ git add <fichier> Ajouter un fichier │
│ git add . Ajouter tous les fichiers│
│ git commit -m "message" Commiter │
│ git push Pousser sur GitHub │
│ │
│ INFORMATION │
│ git log Historique complet │
│ git log --oneline Historique condensé │
│ git diff Voir les différences │
│ │
│ ANNULATION │
│ git checkout -- <fichier> Annuler modifications │
│ git reset <fichier> Retirer du staging │
└──────────────────────────────────────────────────────┘
# Titre 1
## Titre 2
### Titre 3
**Gras**
*Italique*
***Gras et italique***
- Liste
- À puces
1. Liste
2. Numérotée
[Lien](https://exemple.com)
`code inline`
Bloc de code
> Citation
---
Ligne horizontale
mon-portfolio/
├── .github/
│ └── workflows/
│ └── deploy.yml
├── .gitignore
├── README.md
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/
│ ├── photo.jpg
│ └── logo.png
└── pages/
├── about.html
└── contact.html
Git Documentation - git-scm.com/doc
GitHub Docs - docs.github.com
GitHub Pages Documentation - docs.github.com/pages
GitHub Actions Documentation - docs.github.com/actions
Pro Git Book par Scott Chacon et Ben Straub - git-scm.com/book
GitHub Skills - skills.github.com
Learn Git Branching - learngitbranching.js.org
Atlassian Git Tutorials - atlassian.com/git/tutorials
Git Cheat Sheet par GitHub - training.github.com/downloads/
Markdown Guide - markdownguide.org
Understanding the GitHub Flow - guides.github.com/introduction/flow
Git - the simple guide par Roger Dudler - rogerdudler.github.io/git-guide
SSH Protocol - ssh.com/academy/ssh
Visual Studio Code Git Integration - code.visualstudio.com/docs/sourcecontrol/overview
GitLens Extension - gitlens.amod.io
GitHub Security Best Practices - docs.github.com/security
Removing sensitive data from a repository - docs.github.com/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository
Stack Overflow - Git Questions - stackoverflow.com/questions/tagged/git
GitHub Community Forum - github.community
Git mailing list - git.vger.kernel.org
Auteur : Ronan LE MEILLAT - SCTG Development
Audience : Étudiant en BUT R&T
Version du document : 2.0
Dernière mise à jour : Janvier 2026
Licence : CC BY-SA 4.0