Aller au contenu principal

Exercice Pratique : Workflow Git

Table des matières​

  1. Objectifs de l'exercice
  2. Prérequis
  3. Partie 1 : Création du projet
  4. Partie 2 : Premier commit
  5. Partie 3 : Modifications et commits
  6. Partie 4 : Connexion à GitHub
  7. Partie 5 : Push vers GitHub
  8. Solution complète
  9. Points clés à retenir

1 - Objectifs de l'exercice​


À la fin de cet exercice, vous saurez :

  • ✅ Initialiser un dépôt Git
  • ✅ Créer et suivre des fichiers
  • ✅ Faire des commits avec des messages appropriés
  • ✅ Consulter l'historique
  • ✅ Connecter votre dépôt local à GitHub
  • ✅ Pousser votre code vers GitHub

🔝 Retour à la table des matières​


2 - Prérequis​


Assurez-vous d'avoir :

  • Git installé et configuré
  • Un compte GitHub créé
  • Clé SSH configurée (ou utilisez HTTPS)
  • Un terminal ouvert

🔝 Retour à la table des matières​


3 - Partie 1 : Création du projet​


Étape 1.1 : Créer le dossier du projet​

mkdir mon-portfolio
cd mon-portfolio

Étape 1.2 : Initialiser Git​

git init

Vérification :

ls -la

Vous devez voir le dossier .git.

Étape 1.3 : Vérifier le statut​

git status

Résultat attendu :

On branch main

No commits yet

nothing to commit (create/copy files and use "git add" to track)

🔝 Retour à la table des matières​


4 - Partie 2 : Premier commit​


Étape 2.1 : Créer le fichier README​

echo "# Mon Portfolio" > README.md
echo "" >> README.md
echo "Bienvenue sur mon portfolio de développeur." >> README.md

Étape 2.2 : Vérifier le statut​

git status

Résultat attendu :

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        README.md

Étape 2.3 : Ajouter au staging​

git add README.md

Étape 2.4 : Vérifier le staging​

git status

Résultat attendu :

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   README.md

Étape 2.5 : Premier commit​

git commit -m "feat: initialiser le projet avec README"

Étape 2.6 : Vérifier l'historique​

git log --oneline

Résultat attendu :

abc1234 feat: initialiser le projet avec README

🔝 Retour à la table des matières​


5 - Partie 3 : Modifications et commits​


Étape 3.1 : Créer la page HTML​

Créez un fichier index.html avec ce contenu :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Jean Dupont</h1>
        <p>Développeur DevOps</p>
    </header>
    <main>
        <section id="about">
            <h2>À propos</h2>
            <p>Passionné par l'automatisation et le cloud.</p>
        </section>
    </main>
</body>
</html>

Étape 3.2 : Créer le fichier CSS​

Créez un fichier style.css :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 3rem;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    margin-bottom: 2rem;
}

h2 {
    color: #667eea;
    margin-bottom: 1rem;
}

Étape 3.3 : Vérifier les fichiers non suivis​

git status

Résultat attendu :

Untracked files:
        index.html
        style.css

Étape 3.4 : Ajouter les deux fichiers​

git add index.html style.css
# ou
git add .

Étape 3.5 : Commit des fichiers HTML et CSS​

git commit -m "feat: ajouter la page d'accueil et les styles"

Étape 3.6 : Modifier le README​

Ajoutez du contenu au README :

echo "" >> README.md
echo "## Technologies utilisées" >> README.md
echo "- HTML5" >> README.md
echo "- CSS3" >> README.md
echo "- Git" >> README.md

Étape 3.7 : Commit de la modification​

git add README.md
git commit -m "docs: ajouter les technologies au README"

Étape 3.8 : Vérifier l'historique complet​

git log --oneline

Résultat attendu :

def5678 docs: ajouter les technologies au README
ghi9012 feat: ajouter la page d'accueil et les styles
abc1234 feat: initialiser le projet avec README

🔝 Retour à la table des matières​


6 - Partie 4 : Connexion à GitHub​


Étape 4.1 : Créer un dépôt sur GitHub​

  1. Allez sur github.com
  2. Cliquez sur le + en haut à droite → New repository
  3. Remplissez :
    • Repository name : mon-portfolio
    • Description : "Mon portfolio de développeur"
    • Visibility : Public (ou Private)
    • NE PAS cocher "Add a README file" (on en a déjà un)
  4. Cliquez Create repository

Étape 4.2 : Copier l'URL du dépôt​

GitHub affiche les instructions. Copiez l'URL SSH :

[email protected]:votre-username/mon-portfolio.git

Étape 4.3 : Ajouter le remote​

git remote add origin [email protected]:votre-username/mon-portfolio.git

Étape 4.4 : Vérifier le remote​

git remote -v

Résultat attendu :

origin  [email protected]:votre-username/mon-portfolio.git (fetch)
origin  [email protected]:votre-username/mon-portfolio.git (push)

🔝 Retour à la table des matières​


7 - Partie 5 : Push vers GitHub​


Étape 5.1 : Pousser vers GitHub​

git push -u origin main

💡 L'option -u configure le tracking pour les futurs push/pull.

Résultat attendu :

Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (9/9), 1.23 KiB | 1.23 MiB/s, done.
Total 9 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), done.
To github.com:votre-username/mon-portfolio.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Étape 5.2 : Vérifier sur GitHub​

  1. Rafraîchissez la page de votre dépôt sur GitHub
  2. Vous devez voir :
    • README.md avec le contenu affiché
    • index.html
    • style.css
    • 3 commits dans l'historique

🎉 Félicitations !​

Votre code est maintenant sur GitHub !

🔝 Retour à la table des matières​


8 - Solution complète​


Voici toutes les commandes de l'exercice en résumé :

# Partie 1 : Création
mkdir mon-portfolio
cd mon-portfolio
git init

# Partie 2 : Premier commit
echo "# Mon Portfolio" > README.md
echo "" >> README.md
echo "Bienvenue sur mon portfolio de développeur." >> README.md
git add README.md
git commit -m "feat: initialiser le projet avec README"

# Partie 3 : Développement
# (créer index.html et style.css)
git add .
git commit -m "feat: ajouter la page d'accueil et les styles"

echo "" >> README.md
echo "## Technologies utilisées" >> README.md
echo "- HTML5" >> README.md
echo "- CSS3" >> README.md
echo "- Git" >> README.md
git add README.md
git commit -m "docs: ajouter les technologies au README"

# Partie 4 & 5 : GitHub
git remote add origin [email protected]:votre-username/mon-portfolio.git
git push -u origin main

🔝 Retour à la table des matières​


9 - Points clés à retenir​


Workflow Git standard​

1. Modifier des fichiers
2. git status (vérifier)
3. git add (préparer)
4. git commit -m "message" (enregistrer)
5. git push (synchroniser)

Bonnes pratiques​

PratiquePourquoi
Commits fréquentsHistorique granulaire
Messages clairsCompréhension facile
Un commit = un changementFacilite le rollback
Vérifier avant commitÉvite les erreurs

Prochaine étape​

Dans le prochain chapitre, nous étudierons les cas pratiques de merge et rebase !

🔝 Retour à la table des matières​