Préparer et créer le dépôt

Enregistrer le premier commit

12 min Git — versionner son code Gratuit

Objectif : Ajouter les fichiers initiaux du site et créer une première version enregistrée.

Un dépôt vient d’être initialisé, mais il ne contient encore aucune version du site. Vous allez créer ses trois fichiers de départ, choisir ceux que Git doit inclure, puis enregistrer cette étape comme premier commit.

Le dépôt du dossier suivi-site a été initialisé dans la leçon précédente. Placez-vous dans ce dossier avant de créer les fichiers, afin que les commandes Git s’appliquent au bon projet. L’identité globale utilisée pour signer vos commits a également été configurée auparavant.

Créer les fichiers initiaux

Le projet fil rouge contient index.html, style.css et README.md. Le HTML reprend le squelette convenu, la feuille CSS déclare les variables autorisées dans :root et les utilise pour les styles, et le README explique les étapes Git déjà réalisées. Aucun fichier de configuration personnel ne doit être ajouté au projet.

index.htmlHTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Suivi du site — Atelier</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="atelier-page">
  <header class="atelier-entete">
    <a class="atelier-marque" href="index.html">Atelier — suivi du site</a>
    <nav class="atelier-navigation" aria-label="Navigation principale">
      <a href="#historique">Historique</a>
      <a href="#publication">Publication</a>
    </nav>
  </header>

  <main class="atelier-principal">
    <section class="atelier-introduction" aria-labelledby="titre-projet">
      <p>Petit site statique</p>
      <h1 id="titre-projet">Les versions du projet</h1>
      <p>Un suivi des changements enregistrés et de la première publication du site.</p>
    </section>

    <section class="atelier-etat" aria-labelledby="titre-etat">
      <h2 id="titre-etat">État du dépôt</h2>
      <p>Dernier contrôle : le dépôt est prêt pour sa première version.</p>
    </section>

    <section class="atelier-historique" id="historique" aria-labelledby="titre-historique">
      <h2 id="titre-historique">Historique des modifications</h2>
      <article class="atelier-entree">
        <h3>Créer la page d’accueil</h3>
        <p>Première étape du suivi : préparer les fichiers du site.</p>
        <time datetime="2025-01-10">10 janvier 2025</time>
      </article>
    </section>

    <section class="atelier-publication" id="publication" aria-labelledby="titre-publication">
      <h2 id="titre-publication">Première publication</h2>
      <p>Le dépôt local sera relié à un dépôt distant pour partager le site et son historique.</p>
      <a class="atelier-bouton" href="https://example.com/">Consulter le dépôt distant</a>
    </section>
  </main>

  <footer class="atelier-pied">
    <p>Projet d’apprentissage — suivi d’un petit site statique.</p>
  </footer>
</body>
</html>

Aperçu du rendu

Chargement de l'aperçu…

style.cssCSS

:root {
  --atelier-couleur-fond: #f5f3ef;
  --atelier-couleur-surface: #ffffff;
  --atelier-couleur-texte: #242b35;
  --atelier-couleur-accent: #176b55;
  --atelier-couleur-secondaire: #647067;
  --atelier-espace: 1rem;
  --atelier-espace-large: 2rem;
  --atelier-rayon: 0.75rem;
  --atelier-police: system-ui, sans-serif;
  --atelier-taille-texte: 1rem;
}

body.atelier-page {
  margin: var(--atelier-espace-large);
  background: var(--atelier-couleur-fond);
  color: var(--atelier-couleur-texte);
  font-family: var(--atelier-police);
  font-size: var(--atelier-taille-texte);
}

.atelier-entete,
.atelier-navigation {
  display: flex;
  gap: var(--atelier-espace);
}

.atelier-entete {
  align-items: center;
  justify-content: space-between;
}

.atelier-marque,
.atelier-navigation a {
  color: var(--atelier-couleur-accent);
}

.atelier-principal {
  max-width: 50rem;
  margin: var(--atelier-espace-large) auto;
}

.atelier-introduction,
.atelier-etat,
.atelier-historique,
.atelier-publication,
.atelier-entree {
  margin-bottom: var(--atelier-espace-large);
  padding: var(--atelier-espace-large);
  border-radius: var(--atelier-rayon);
  background: var(--atelier-couleur-surface);
}

.atelier-etat,
.atelier-entree time {
  color: var(--atelier-couleur-secondaire);
}

.atelier-bouton {
  display: inline-block;
  padding: var(--atelier-espace);
  border-radius: var(--atelier-rayon);
  background: var(--atelier-couleur-accent);
  color: var(--atelier-couleur-surface);
}

.atelier-pied {
  color: var(--atelier-couleur-secondaire);
}

Aperçu du rendu

Chargement de l'aperçu…

Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.

README.mdTexte

# Suivi du site — Atelier

Petit site statique utilisé pour apprendre à versionner un projet avec Git.

## Étapes Git

1. Configurer l’identité Git globale sur l’ordinateur, sans ajouter de configuration personnelle au projet.
2. Créer le dossier `suivi-site` et y initialiser le dépôt avec `git init`.
3. Ajouter les fichiers du site à la zone de préparation avec `git add`.
4. Enregistrer une première version avec `git commit`.
5. Relier ensuite le dépôt local à un dépôt distant et y publier les commits.

Préparer puis enregistrer

La zone de préparation est l’espace où vous sélectionnez le contenu qui entrera dans le prochain commit. La commande git add y place les fichiers choisis. Vous pouvez donc préparer explicitement les trois fichiers du site, plutôt que de demander à Git d’inclure indistinctement tout le dossier.

Depuis le terminalTerminal

cd suivi-site
git add index.html style.css README.md

La commande git add prépare le contenu tel qu’il existe au moment où vous l’exécutez. Ensuite, git commit crée une version à partir de ce contenu et l’enregistre dans le dépôt local. Un message court décrit ici l’action accomplie : Créer la page d’accueil du site commence par un verbe à l’impératif, conformément aux conventions du projet.

Créer le premier commitTerminal

git commit -m "Créer la page d’accueil du site"

Résultat attendu

[main (root-commit) a1b2c3d] Créer la page d’accueil du site
 3 files changed, 105 insertions(+)
 create mode 100644 README.md
 create mode 100644 index.html
 create mode 100644 style.css

La sortie varie selon votre version de Git, le nom de votre branche et le contenu exact des fichiers. Elle indique notamment qu’un root-commit vient d’être créé et que trois fichiers ont été inclus. Ce premier commit sert de point de départ à l’historique du projet.

Vérifier le résultat

Vous pouvez demander à Git de présenter l’historique avec git log -1 --oneline. Cette commande fournit une vérification ponctuelle du commit créé ; la lecture détaillée de l’historique sera étudiée dans une leçon dédiée. La prochaine leçon portera sur git status, qui vous aidera à lire l’état courant du dépôt.

Contrôle ponctuelTerminal

git log -1 --oneline