TP : Publier son site web avec GitHub Pages

BUT Réseau et Télécoms - 1ère année
Durée estimée : 2 heures

🎯 Objectifs du TP

À la fin de ce TP, vous serez capable de :

Comprendre les concepts fondamentaux du contrôle de version avec Git
Créer et configurer un compte GitHub
Utiliser Git en ligne de commande pour gérer votre code
Publier votre site web HTML/CSS sur GitHub Pages
Collaborer efficacement avec d'autres développeurs

🗺️ Vue d'ensemble du TP

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

📚 Introduction : Qu'est-ce que le contrôle de version ?

Pourquoi le contrôle de version est essentiel

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.

Les avantages du contrôle de version

Historique complet : Chaque modification est enregistrée avec qui l'a faite, quand et pourquoi
Retour en arrière : Vous pouvez revenir à n'importe quelle version précédente
Collaboration : Plusieurs personnes peuvent travailler simultanément sur le même projet
Branches : Vous pouvez expérimenter sans risquer de casser le code principal
Sauvegarde : Votre code est stocké sur des serveurs distants (comme GitHub)

Git et GitHub : quelle différence ?

Git : C'est le logiciel de contrôle de version que vous installez sur votre ordinateur
GitHub : C'est une plateforme en ligne qui héberge vos projets Git et facilite la collaboration

Analogie : Git est comme Word (le logiciel), GitHub est comme OneDrive (le stockage en ligne).

⚠️ IMPORTANT : Configuration du navigateur

Avant de commencer, lisez attentivement cette section !

Désactivez la traduction automatique

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.

Pourquoi c'est critique ?

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 !

Comment désactiver la traduction

Sur Chrome/Edge :

Paramètres → Langues
Décochez "Me proposer de traduire les pages..."
Ou cliquez sur l'icône de traduction dans la barre d'adresse et sélectionnez "Ne jamais traduire ce site"

Conseil pro : Apprenez le vocabulaire technique en anglais dès maintenant. C'est un investissement qui vous servira toute votre carrière !

📝 Étape 0 : Prérequis

Avant de commencer, assurez-vous d'avoir :

✅ Un site web HTML/CSS fonctionnel (celui créé lors du TP précédent)
✅ Visual Studio Code installé
✅ Une adresse email valide

🆕 Étape 1 : Créer un compte GitHub

1.1 Inscription

Rendez-vous sur github.com
Cliquez sur Sign up (S'inscrire)
Remplissez le formulaire :
- Email : Utilisez votre email universitaire ou personnel
- Password : Choisissez un mot de passe fort (minimum 15 caractères ou 8 avec des chiffres et minuscules)
- Username : Choisissez un nom d'utilisateur professionnel (il sera visible publiquement)
  - ✅ Bon : jean-dupont, jdupont-dev, jeandupont
  - ❌ Évitez : xX_dark_coder_Xx, kikoolol123

1.2 Vérification

Vérifiez votre email et cliquez sur le lien de confirmation
Connectez-vous à GitHub
Vous pouvez sauter les questions optionnelles sur vos centres d'intérêt

🎉 Félicitations ! Vous avez maintenant un compte GitHub.

💻 Étape 2 : Installer Git

Git est l'outil en ligne de commande qui permet de gérer vos versions de code localement.

2.1 Installation selon votre système d'exploitation

🪟 Windows

Téléchargez Git depuis git-scm.com
Lancez l'installateur
Configuration importante lors de l'installation :
- ✅ Cochez "Git Bash Here" (permet d'ouvrir un terminal Git depuis n'importe quel dossier)
- ✅ Sélectionnez "Use Git from Git Bash only" ou "Git from the command line and also from 3rd-party software"
- ✅ NE PAS installer Git Credential Manager (décochez cette option)
- ✅ Line ending conversion : "Checkout as-is, commit Unix-style line endings" (conversion automatique CRLF → LF)
- ✅ Nom de la branche initiale : Sélectionnez "Override the default branch name for new repositories" et tapez main
Cliquez sur Next jusqu'à Install, puis Finish

🍎 macOS

Ouvrez le Terminal (Applications > Utilitaires > Terminal)
Tapez la commande :
```
xcode-select --install
```
Cliquez sur Install dans la fenêtre qui s'ouvre
Acceptez la licence et attendez la fin du téléchargement

2.2 Vérification de l'installation

Sur Windows :

Ouvrez Git Bash (clic droit sur le bureau ou dans un dossier → "Git Bash Here")

Sur macOS/Linux :

Ouvrez le Terminal

Pour tous :

Tapez la commande :
```
git --version
```
Vous devriez voir quelque chose comme : git version 2.43.0

✅ Si vous voyez un numéro de version, Git est correctement installé !

Le changement vers "main"

En 2020, la communauté du développement a commencé à adopter "main" comme nouveau standard pour plusieurs raisons :

Neutralité du langage : "main" (principale) est descriptif sans connotation historique problématique
Clarté sémantique : Le terme "main" décrit mieux sa fonction (branche principale)
Adoption industrielle : GitHub, GitLab, et Bitbucket ont tous adopté "main" par défaut
Alignement des pratiques : Uniformise les conventions dans l'industrie

Impact pratique

Anciens projets : Peuvent toujours utiliser "master" (aucune obligation de changer)
Nouveaux projets : Recommandé d'utiliser "main"
Commandes Git : Fonctionnent de la même manière, seul le nom change

💡 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.

⚙️ Étape 2.5 : Configuration globale de Git

Git a besoin de savoir qui vous êtes pour associer vos modifications à votre identité. Cette configuration est obligatoire.

2.5.1 Configurer votre nom et email

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 GitHub

Exemple :

git config --global user.name "Jean Dupont"
git config --global user.email "jean.dupont@exemple.com"

2.5.2 Vérifier la configuration

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.

🔐 Étape 3 : Créer une clé SSH

SSH est un protocole sécurisé qui permet de s'authentifier sur GitHub sans avoir à taper son mot de passe à chaque fois.

3.1 Qu'est-ce qu'une clé SSH ?

Une clé SSH fonctionne comme une paire de clés physiques :

🔑 Clé privée (id_ed25519) : Reste sur votre ordinateur, ne doit JAMAIS être partagée
🔓 Clé publique (id_ed25519.pub) : Peut être partagée, vous la donnez à GitHub

C'est comme une serrure (GitHub) et une clé (votre ordinateur). Seule votre clé peut ouvrir cette serrure.

Pourquoi ed25519 ?

Cela signifie que nous utilisons l'algorithme de chiffrement Ed25519, qui est plus sécurisé et plus rapide que les anciens algorithmes comme RSA. Il utilise des clés plus courtes tout en offrant une sécurité élevée. Les mathématiques derrière Ed25519 sont basées sur des courbes elliptiques, ce qui le rend efficace pour les opérations cryptographiques.

3.2 Générer votre paire de clés

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):

Appuyez sur Entrée (pour accepter l'emplacement par défaut)
Quand on vous demande un mot de passe (passphrase) :
```
Enter passphrase (empty for no passphrase):
```
Appuyez sur Entrée (pas de mot de passe pour simplifier)
Confirmez en appuyant à nouveau sur Entrée

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)

📤 Étape 4 : Ajouter la clé SSH à GitHub

4.1 Afficher votre clé publique

Dans votre terminal, tapez :

Sur macOS/Linux et Windows (Git Bash) :

cat ~/.ssh/id_ed25519.pub

Vous verrez quelque chose comme :

ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIGzT... votre.email@exemple.com

4.2 Copier la clé

Sélectionnez TOUT le texte affiché (de ssh-ed25519 jusqu'à votre email) et copiez-le :

Windows (Git Bash) : Sélectionnez avec la souris, puis clic droit → Copy
macOS : Sélectionnez avec la souris, puis ⌘+C
Linux : Sélectionnez avec la souris, puis Ctrl+Shift+C

⚠️ Important : Copiez TOUTE la ligne, y compris ssh-ed25519 au début et votre email à la fin.

4.3 Ajouter la clé sur GitHub

Allez sur github.com et connectez-vous
Cliquez sur votre photo de profil (en haut à droite)
Sélectionnez Settings (Paramètres)
Dans le menu de gauche, cliquez sur SSH and GPG keys
Cliquez sur le bouton vert New SSH key
Remplissez le formulaire :
- Title : Donnez un nom descriptif, par exemple : PC personnel ou Mac IUT
- Key : Collez votre clé publique copiée précédemment
Cliquez sur Add SSH key
GitHub peut vous demander votre mot de passe pour confirmer

✅ Votre clé SSH est maintenant ajoutée à GitHub !

🔗 Étape 5 : Tester la connexion SSH

Avant d'aller plus loin, vérifions que la connexion entre votre ordinateur et GitHub fonctionne.

5.1 Tester la connexion

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 :

Vérifiez que vous avez bien copié toute la clé publique
Vérifiez que la clé est bien ajoutée dans les paramètres GitHub
Recommencez depuis l'étape 3 si nécessaire

📦 Étape 6 : Comprendre Git et les dépôts

Avant de créer votre premier dépôt, comprenons les concepts de base.

6.1 Qu'est-ce qu'un dépôt (repository) ?

Un dépôt (ou repository, souvent abrégé repo) est un dossier qui contient :

📁 Vos fichiers de projet (HTML, CSS, images, etc.)
📜 L'historique complet de toutes les modifications
⚙️ Des fichiers de configuration Git (dans le dossier caché .git/)

6.2 Public vs Private

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)
- ✅ Idéal pour des projets open source, portfolios, partage de connaissances
- ✅ Gratuit sans limitation
🔒 Private : Seuls vous et les personnes que vous invitez peuvent voir le code
- ✅ Idéal pour des projets professionnels, clients, code sensible
- ✅ Gratuit sur GitHub (limité avant, maintenant illimité, mais les actions CI/CD sont limitées)

6.3 Le fichier README.md

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.

6.4 Les commandes Git essentielles

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

6.5 Le workflow Git de base

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 chariot
git commit = Emballer le chariot avec une étiquette
git push = Envoyer le colis à la poste (GitHub)

🚀 Étape 7 : Créer votre dépôt "mon-portfolio"

7.1 Créer le dépôt sur GitHub

Allez sur github.com
Cliquez sur le + en haut à droite, puis New repository
Remplissez le formulaire :
- Repository name : mon-portfolio
- Description : Mon site web personnel - BUT Informatique (optionnel mais recommandé)
- Public : ✅ Cochez (pour que GitHub Pages fonctionne gratuitement)
- Initialize this repository with : ❌ Ne cochez RIEN (ni README, ni .gitignore, ni license)
Cliquez sur Create repository

✅ Votre dépôt est créé !

7.2 Page d'instructions

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.

🔧 Étape 8 : Initialiser Git localement

8.1 Ouvrir votre projet dans VS Code

Ouvrez Visual Studio Code
Ouvrez le dossier contenant votre site web (Fichier → Ouvrir le dossier...)
Ouvrez un terminal intégré dans VS Code :
- Menu : Terminal → Nouveau terminal
- Ou raccourci : Ctrl + ù (Windows) / ⌘ + ù (Mac)

Sur Windows, assurez-vous d'utiliser Git Bash :

Si le terminal affiche PS (PowerShell), cliquez sur la flèche vers le bas à côté du + et sélectionnez Git Bash

8.2 Initialiser le dépôt Git

Dans le terminal VS Code, tapez :

git init

Vous verrez : Initialized empty Git repository in ...

✅ Git est maintenant actif dans ce dossier !

8.3 Configurer l'origine (remote)

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.

8.4 Définir la branche principale

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 !

📝 Étape 9 : Créer et publier un README

9.1 Comprendre le Markdown

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)

![Texte alternatif pour une image](url-de-l-image.jpg)

`code inline`

Code sur plusieurs lignes

9.2 Créer votre README.md

Dans VS Code :

Créez un nouveau fichier : Fichier → Nouveau fichier
Sauvegardez-le avec le nom : README.md (attention aux majuscules !)
Écrivez votre contenu. Exemple :

# 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

Sauvegardez le fichier (Ctrl + S ou ⌘ + S)

9.3 Premier commit et push

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 !

9.4 Vérifier sur GitHub

Retournez sur la page de votre dépôt sur GitHub (rechargez la page)
Vous devriez voir votre fichier README.md affiché avec la mise en forme Markdown !

9.5 Modifier et pousser à nouveau

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

📁 Étape 10 : Préparer votre site pour le déploiement

Avant de publier votre site, nous allons préparer tous les fichiers nécessaires.

10.1 Le fichier .gitignore

Créons d'abord un fichier .gitignore pour éviter d'envoyer des fichiers inutiles.

Qu'est-ce que .gitignore ?

Le fichier .gitignore liste les fichiers et dossiers que Git doit ignorer. C'est essentiel pour :

❌ Ne pas envoyer des fichiers temporaires
❌ Ne pas envoyer des fichiers système (.DS_Store sur Mac, Thumbs.db sur Windows)
❌ Ne pas envoyer des fichiers de configuration locaux
❌ Ne pas envoyer des gros fichiers inutiles

Créer le .gitignore

Dans VS Code, créez un fichier .gitignore à la racine
Ajoutez ce contenu :

# 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

Sauvegardez

✅ Git ignorera maintenant ces fichiers automatiquement !

10.2 Vérifier vos fichiers HTML/CSS

Assurez-vous d'avoir :

Un fichier index.html à la racine de votre projet (c'est la page d'accueil)
Vos fichiers CSS (par exemple style.css ou dans un dossier css/)
Vos images (dans un dossier images/ par exemple)

⚠️ Important : Le fichier principal doit s'appeler index.html pour que GitHub Pages l'affiche par défaut.

10.3 Vérifier les fichiers à envoyer

Vérifions ce qui sera envoyé sur GitHub :

git status

Vous devriez voir :

✅ Vos fichiers HTML, CSS
✅ Vos images
✅ README.md
✅ .gitignore

Vous ne devriez PAS voir :

❌ Fichiers système (.DS_Store, etc.)
❌ Fichiers de configuration éditeur

Si vous voyez des fichiers indésirables, ajoutez-les dans .gitignore !

✅ Vos fichiers sont prêts à être publiés !

📤 Étape 11 : Pousser votre site sur GitHub

Maintenant que vos fichiers sont prêts, envoyons-les sur GitHub !

11.1 Ajouter tous les fichiers

Dans le terminal VS Code, tapez :

git add .

Le point . signifie "tous les fichiers" (sauf ceux dans .gitignore).

11.2 Vérifier ce qui va être commité

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.

11.3 Committer les modifications

git commit -m "Ajout du site web complet"

11.4 Pousser sur GitHub

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.

🌐 Étape 12 : Activer GitHub Pages

Maintenant que votre site est sur GitHub, activons GitHub Pages pour le rendre accessible en ligne.

12.1 Qu'est-ce que GitHub Pages ?

GitHub Pages est un service gratuit qui transforme votre dépôt en site web public. C'est parfait pour :

📝 Sites personnels et portfolios
📚 Documentation de projets
🎨 Sites vitrines
🎓 Projets étudiants

12.2 Activer Pages

Sur GitHub, allez sur votre dépôt mon-portfolio
Cliquez sur Settings (Paramètres) en haut
Dans le menu de gauche, cliquez sur Pages
Dans la section Source :
- Branch : Sélectionnez main
- Folder : Laissez / (root)
Cliquez sur Save

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é !

12.3 Voir votre site en ligne

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 :

Vérifiez que votre fichier s'appelle bien index.html (pas index.htm ou autre)
Vérifiez qu'il est bien à la racine du dépôt
Attendez encore 1-2 minutes, GitHub peut mettre un peu de temps

⚙️ Étape 13 : Automatiser le déploiement avec GitHub Actions

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 !

13.1 Qu'est-ce qu'une GitHub Action ?

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 :

✅ Tester votre code automatiquement
✅ Déployer votre site web
✅ Envoyer des notifications
✅ Compiler votre code

Notre action va :

Détecter quand vous poussez du code sur la branche main
Prendre tous vos fichiers
Les envoyer automatiquement sur GitHub Pages
Votre site est mis à jour en 1-2 minutes ! 🎉

13.2 Créer le dossier pour les workflows

Dans VS Code :

Créez un nouveau dossier .github à la racine de votre projet
- Important : le nom commence par un point .
Dans ce dossier .github, créez un sous-dossier workflows

Votre arborescence doit ressembler à :

mon-portfolio/
├── .github/
│   └── workflows/
├── .gitignore
├── README.md
├── index.html
├── style.css
└── ...

13.3 Créer le fichier de workflow

Dans le dossier .github/workflows/, créez un nouveau fichier nommé deploy.yml
Copiez-collez ce contenu :

name: 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

Sauvegardez le fichier

13.4 Comprendre le fichier

name : Le nom de l'action ("Deploy to GitHub Pages")
on: push: branches: - main : L'action se déclenche quand vous poussez sur main
jobs : Les tâches à exécuter
runs-on: ubuntu-latest : L'action s'exécute sur un serveur Linux de GitHub
steps : Les étapes de déploiement (récupération du code, configuration, upload, déploiement)

⚠️ Important sur le path :

Dans la section Upload artifact, il y a path: .

path: . signifie : "Prends TOUT à la racine du dépôt"
Si votre site était dans un sous-dossier site/, vous mettriez path: site

Pour ce TP, laissez path: . car votre site est à la racine.

13.5 Pousser la GitHub Action

Dans le terminal :

git add .github/
git commit -m "Ajout de la GitHub Action pour le déploiement automatique"
git push

13.6 Vérifier que l'Action fonctionne

Allez sur votre dépôt GitHub
Cliquez sur l'onglet Actions (en haut)
Vous devriez voir votre workflow "Deploy to GitHub Pages" en cours d'exécution (point orange 🟠)
Cliquez dessus pour voir les détails en temps réel

⏳ Attendez que la coche soit verte (environ 30 secondes à 2 minutes)

✅ Parfait ! Votre déploiement automatique est actif !

13.7 Tester l'automatisation

Pour vérifier que tout fonctionne :

Modifiez votre index.html localement (changez un titre, ajoutez du texte, etc.)
Sauvegardez

Poussez les modifications :

git add index.html
git commit -m "Test de déploiement automatique"
git push

Allez dans l'onglet Actions sur GitHub : une nouvelle exécution démarre automatiquement ! 🚀
Attendez qu'elle se termine (coche verte ✅)
Rafraîchissez votre site : vos modifications sont en ligne !

🎉 Félicitations ! Votre pipeline de déploiement automatique fonctionne !

🔄 Étape 14 : Workflow quotidien pour mettre à jour votre site

git push ↓
GitHub Action déploie automatiquement (1-2 min) ↓
Votre site est mis à jour ! 🎉


### 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

Vérifiez sur GitHub (optionnel) : Allez dans l'onglet Actions pour voir le déploiement en cours
Attendez 1-2 minutes : GitHub Actions déploie automatiquement
Rafraîchissez votre site : les modifications sont en ligne !

💡 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.

14.3 Bonnes pratiques pour les messages de commit

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..."

📚 Commandes Git récapitulatives

Commandes de base

# 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

Commandes utiles en cas de problème

# 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

🎯 Checklist de fin de TP

Vérifiez que vous avez bien accompli toutes les étapes :

🎉 Si tout est coché : BRAVO, vous maîtrisez les bases de Git, GitHub Pages et GitHub Actions !

🚨 Problèmes courants et solutions

Problème 1 : "Permission denied (publickey)"

Cause : Votre clé SSH n'est pas correctement configurée.

Solution :

Vérifiez que la clé est bien ajoutée sur GitHub (Settings → SSH and GPG keys)
Retestez la connexion : ssh -T git@github.com
Si ça ne fonctionne pas, recommencez l'étape 3 (création de clé SSH)

Problème 2 : "fatal: not a git repository"

Cause : 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

Problème 3 : "Please tell me who you are"

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"

Problème 4 : Le site n'affiche pas mon HTML

Cause : Votre fichier principal ne s'appelle pas index.html ou il n'est pas à la racine.

Solution :

Renommez votre fichier principal en index.html
Placez-le à la racine du dépôt
Commitez et poussez

Problème 5 : L'Action GitHub échoue

Cause : Plusieurs possibilités (syntaxe YAML incorrecte, permissions manquantes, etc.)

Solution :

Allez dans l'onglet Actions sur GitHub
Cliquez sur le workflow qui a échoué
Lisez les logs d'erreur
Vérifiez que votre fichier deploy.yml est identique à celui du TP
Vérifiez que GitHub Pages est bien activé dans Settings → Pages

Problème 6 : "CRLF will be replaced by LF"

Cause : 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.

🎓 Pour aller plus loin

Concepts avancés à explorer

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
```

Ressources utiles

Documentation Git officielle : git-scm.com/doc
GitHub Guides : guides.github.com
Formation Git interactive : learngitbranching.js.org
Aide-mémoire Git : training.github.com/downloads/fr/github-git-cheat-sheet
Pro Git Book (gratuit) : git-scm.com/book/fr/v2

Projets suggérés

Pour pratiquer, essayez de :

Créer un second dépôt pour un autre projet
Collaborer avec un camarade sur un dépôt commun
Contribuer à un projet open source
Créer un blog avec Jekyll et GitHub Pages
Automatiser d'autres tâches avec GitHub Actions

📝 Notes importantes à retenir

Les 3 règles d'or de Git

Commitez souvent : Mieux vaut 10 petits commits qu'un énorme commit
Messages clairs : Vos futurs collaborateurs (et votre futur vous) vous remercieront
Testez avant de pousser : Vérifiez que votre code fonctionne localement

Sécurité

🔒 Ne commitez JAMAIS : mots de passe, clés API, tokens, informations personnelles
🔒 Votre clé privée SSH (id_ed25519) ne doit JAMAIS être partagée ou uploadée
🔒 Si vous commitez accidentellement un secret, changez-le immédiatement (le simple fait de le supprimer du dépôt ne suffit pas car il reste dans l'historique)

Philosophie du développement collaboratif

Git et GitHub ne sont pas que des outils techniques, c'est aussi une culture :

💬 Communication : Expliquez vos choix dans les messages de commit
🤝 Collaboration : Partagez votre code, aidez les autres, contribuez
📖 Documentation : Un bon README vaut mieux que 1000 commentaires
🎨 Open Source : Contribuer à des projets libres enrichit toute la communauté

🎯 Objectifs pédagogiques atteints

À la fin de ce TP, vous devriez être capable de :

✅ Expliquer ce qu'est le contrôle de version et pourquoi c'est essentiel
✅ Utiliser Git en ligne de commande pour gérer vos projets
✅ Créer et gérer des dépôts sur GitHub
✅ Comprendre le workflow add → commit → push
✅ Publier un site web statique avec GitHub Pages
✅ Configurer une GitHub Action pour le déploiement automatique
✅ Utiliser .gitignore pour exclure des fichiers
✅ Écrire des messages de commit clairs et utiles

🎉 Conclusion

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 ! 🚀

📎 Annexes

Annexe A : Aide-mémoire Git (à imprimer)

┌──────────────────────────────────────────────────────┐
│             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       │
└──────────────────────────────────────────────────────┘

Annexe B : Syntaxe Markdown

# Titre 1
## Titre 2
### Titre 3

**Gras**
*Italique*
***Gras et italique***

- Liste
- À puces

1. Liste
2. Numérotée

[Lien](https://exemple.com)
![Image](url-image.jpg)

`code inline`

Bloc de code


> Citation

---
Ligne horizontale

Annexe C : Structure d'un bon projet web

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

📚 Sources et références

Documentation officielle

Git Documentation - git-scm.com/doc
- Documentation complète de Git, tutoriels et références des commandes
GitHub Docs - docs.github.com
- Documentation officielle de GitHub, guides et API
GitHub Pages Documentation - docs.github.com/pages
- Guide complet pour publier des sites avec GitHub Pages
GitHub Actions Documentation - docs.github.com/actions
- Documentation sur l'automatisation avec GitHub Actions

Livres et ressources pédagogiques

Pro Git Book par Scott Chacon et Ben Straub - git-scm.com/book
- Livre complet sur Git, disponible gratuitement en ligne en français
GitHub Skills - skills.github.com
- Cours interactifs gratuits proposés par GitHub
Learn Git Branching - learngitbranching.js.org
- Tutoriel interactif pour apprendre Git de manière ludique

Guides et tutoriels

Atlassian Git Tutorials - atlassian.com/git/tutorials
- Tutoriels détaillés sur Git par l'équipe Atlassian (Bitbucket)
Git Cheat Sheet par GitHub - training.github.com/downloads/
- Aide-mémoire des commandes Git essentielles
Markdown Guide - markdownguide.org
- Guide complet de la syntaxe Markdown

Articles et concepts

Understanding the GitHub Flow - guides.github.com/introduction/flow
- Comprendre le workflow collaboratif sur GitHub
Git - the simple guide par Roger Dudler - rogerdudler.github.io/git-guide
- Guide simple de Git en français
SSH Protocol - ssh.com/academy/ssh
- Documentation sur le protocole SSH

Outils et extensions

Visual Studio Code Git Integration - code.visualstudio.com/docs/sourcecontrol/overview
- Documentation sur l'intégration Git dans VS Code
GitLens Extension - gitlens.amod.io
- Extension VS Code pour visualiser l'historique Git

Concepts de sécurité

GitHub Security Best Practices - docs.github.com/security
- Guide des bonnes pratiques de sécurité sur GitHub
Removing sensitive data from a repository - docs.github.com/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository
- Guide pour supprimer des données sensibles d'un dépôt

Communauté et support

Stack Overflow - Git Questions - stackoverflow.com/questions/tagged/git
- Forum de questions/réponses sur Git
GitHub Community Forum - github.community
- Forum communautaire GitHub
Git mailing list - git.vger.kernel.org
- Liste de diffusion officielle de Git

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

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
.github		.github
doc_helper		doc_helper
.gitignore		.gitignore
LICENSE.md		LICENSE.md
README.md		README.md

Uh oh!

License

sctg-development/publier-son-site-web-sur-pages

Folders and files

Latest commit

History

Repository files navigation

TP : Publier son site web avec GitHub Pages

🎯 Objectifs du TP

🗺️ Vue d'ensemble du TP

📚 Introduction : Qu'est-ce que le contrôle de version ?

Pourquoi le contrôle de version est essentiel

Les avantages du contrôle de version

Git et GitHub : quelle différence ?

⚠️ IMPORTANT : Configuration du navigateur

Désactivez la traduction automatique

Pourquoi c'est critique ?

Comment désactiver la traduction

📝 Étape 0 : Prérequis

🆕 Étape 1 : Créer un compte GitHub

1.1 Inscription

1.2 Vérification

💻 Étape 2 : Installer Git

2.1 Installation selon votre système d'exploitation

🪟 Windows

🍎 macOS

2.2 Vérification de l'installation

Sur Windows :

Sur macOS/Linux :

Pour tous :

Le changement vers "main"

Impact pratique

⚙️ Étape 2.5 : Configuration globale de Git

2.5.1 Configurer votre nom et email

2.5.2 Vérifier la configuration

🔐 Étape 3 : Créer une clé SSH

3.1 Qu'est-ce qu'une clé SSH ?

3.2 Générer votre paire de clés

📤 Étape 4 : Ajouter la clé SSH à GitHub

4.1 Afficher votre clé publique

Sur macOS/Linux et Windows (Git Bash) :

4.2 Copier la clé

4.3 Ajouter la clé sur GitHub

🔗 Étape 5 : Tester la connexion SSH

5.1 Tester la connexion

📦 Étape 6 : Comprendre Git et les dépôts

6.1 Qu'est-ce qu'un dépôt (repository) ?

6.2 Public vs Private

6.3 Le fichier README.md

6.4 Les commandes Git essentielles

6.5 Le workflow Git de base

🚀 Étape 7 : Créer votre dépôt "mon-portfolio"

7.1 Créer le dépôt sur GitHub

7.2 Page d'instructions

🔧 Étape 8 : Initialiser Git localement

8.1 Ouvrir votre projet dans VS Code

8.2 Initialiser le dépôt Git

8.3 Configurer l'origine (remote)

8.4 Définir la branche principale

📝 Étape 9 : Créer et publier un README

9.1 Comprendre le Markdown

9.2 Créer votre README.md

9.3 Premier commit et push

9.4 Vérifier sur GitHub

9.5 Modifier et pousser à nouveau

📁 Étape 10 : Préparer votre site pour le déploiement

10.1 Le fichier .gitignore

Qu'est-ce que .gitignore ?

Créer le .gitignore

10.2 Vérifier vos fichiers HTML/CSS

10.3 Vérifier les fichiers à envoyer

📤 Étape 11 : Pousser votre site sur GitHub

11.1 Ajouter tous les fichiers

11.2 Vérifier ce qui va être commité

11.3 Committer les modifications

11.4 Pousser sur GitHub

🌐 Étape 12 : Activer GitHub Pages

12.1 Qu'est-ce que GitHub Pages ?

12.2 Activer Pages

12.3 Voir votre site en ligne

Packages