Git et la mise en ligne

Git prend des photos de ton code, les « commits ». Tu peux revenir à n'importe laquelle et tester une idée sans rien casser. GitHub, c'est autre chose : un site qui garde une copie de ton code en ligne.

1. Sur Mac : tape git --version dans le Terminal. Si Git manque, macOS propose de l'installer, accepte. Sinon, prends l'installeur sur git-scm.com.
2. Sur Windows : installe Git for Windows avec les options par défaut.
3. Ferme et rouvre VS Code, puis ouvre son terminal : Terminal → Nouveau terminal.

Vérifie que Git répond, puis dis-lui qui tu es (une seule fois par ordi) :

$ git --version
$ git config --global user.name "Alex Martin"
$ git config --global user.email "alex@exemple.com"
$ git config --global init.defaultBranch main
$ git config --global --list

• Le $ n'est pas à taper : il marque le début d'une commande.
• user.email : le même email que ton futur compte GitHub, pour qu'il reconnaisse tes commits.
• init.defaultBranch main : ta branche principale s'appellera main, comme sur GitHub.
• --global : le réglage vaut pour tous tes projets.

$ git --version
git version 2.47.1

$ git config --global --list
user.name=Alex Martin
user.email=alex@exemple.com
init.defaultbranch=main

Range tout dans un seul dossier : ta to-do list et ton appli météo de l'étape 4 vont dans mon-site, chacune dans son sous-dossier.

mon-site/
├── index.html        # le portfolio d'Alex
├── style.css
├── script.js
├── images/
├── todo/
│   └── index.html    # + son css et son js
└── meteo/
    └── index.html    # + son css et son js

Ouvre mon-site dans VS Code, puis dans le terminal :

# Transforme le dossier en projet Git (une seule fois)
$ git init

# Regarde ce que Git voit
$ git status

# Ajoute tous les fichiers à la prochaine photo
$ git add .

# Prends la photo, avec un message
$ git commit -m "Premier commit : portfolio, to-do et météo"

• git init : crée le dossier caché .git, où vit l'historique. N'y touche jamais.
• git status : ce qui a changé. En rouge : pas ajouté. En vert : prêt pour le commit.
• git add . : « je mets tout dans le carton ». Le point veut dire tout le dossier.
• git commit -m "..." : « je ferme le carton et j'écris dessus ».

$ git init
Initialized empty Git repository in /Users/alex/mon-site/.git/

$ git status
On branch main

No commits yet

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

nothing added to commit but untracked files present (use "git add" to track)

$ git add .
$ git status
On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   images/moi.jpg
        new file:   index.html
        new file:   meteo/index.html
        ...

$ git commit -m "Premier commit : portfolio, to-do et météo"
[main (root-commit) 8f3a91d] Premier commit : portfolio, to-do et météo
 10 files changed, 412 insertions(+)
 create mode 100644 index.html
 ...

$ git status
On branch main
nothing to commit, working tree clean

Certains fichiers n'ont rien à faire dans ton historique. Crée un fichier .gitignore à la racine de mon-site (avec le point, sans extension) :

# Fichiers créés par macOS et Windows
.DS_Store
Thumbs.db

# Réglages perso de l'éditeur
.vscode/

# Tes notes, qui ne regardent que toi
notes.txt

# Pour plus tard (React, étape 6)
node_modules/
.env

$ git add .gitignore
$ git commit -m "Ajoute un .gitignore"

# L'historique, une ligne par commit
$ git log --oneline

• Chaque ligne du .gitignore est un fichier ou dossier ignoré. # : un commentaire.
• .env : là où on range les clés secrètes. Il ne doit jamais partir sur GitHub.
• Un bon message de commit dit ce que fait le changement : « Corrige le menu sur mobile ». Pas « modif ».

$ git commit -m "Ajoute un .gitignore"
[main b41e2c7] Ajoute un .gitignore
 1 file changed, 13 insertions(+)
 create mode 100644 .gitignore

$ git log --oneline
b41e2c7 (HEAD -> main) Ajoute un .gitignore
8f3a91d Premier commit : portfolio, to-do et météo

Pour l'instant, ton historique est seulement sur ton ordi. On l'envoie sur GitHub.

1. Crée un compte gratuit sur github.com, avec le même email que dans ta config Git.
2. Clique sur le + en haut à droite → New repository, nom mon-site, en Public. Ne coche rien d'autre : ton projet existe déjà.
3. Clique sur Create repository, puis tape :

# Relie ton dossier au dépôt GitHub (remplace TON-PSEUDO)
$ git remote add origin https://github.com/TON-PSEUDO/mon-site.git

# S'assure que ta branche s'appelle main
$ git branch -M main

# Envoie tes commits sur GitHub
$ git push -u origin main

• origin : le surnom de l'adresse de ta copie en ligne.
• -u : retient le chemin. La prochaine fois, git push suffit.
• Au premier push, ton mot de passe GitHub ne marche pas dans le terminal. Accepte quand VS Code propose de te connecter à GitHub, ça ouvre ton navigateur.

$ git push -u origin main
Enumerating objects: 18, done.
Counting objects: 100% (18/18), done.
Delta compression using up to 8 threads
Compressing objects: 100% (15/15), done.
Writing objects: 100% (18/18), 52.40 KiB | 5.24 MiB/s, done.
Total 18 (delta 2), reused 0 (delta 0), pack-reused 0
To https://github.com/TON-PSEUDO/mon-site.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

Une branche, c'est une copie de travail parallèle. Tu testes une idée dessus, main reste intacte. Si ça marche, tu fusionnes. Sinon, tu l'abandonnes.

Commence par Learn Git Branching, un jeu en français où tu vois les branches bouger. Fais les premiers niveaux de la « Séquence d'introduction ». Ensuite, dans mon-site :

# Crée une branche et va dessus
$ git switch -c nouvelle-couleur

# ... change la couleur principale dans style.css, sauvegarde ...
$ git add .
$ git commit -m "Teste une nouvelle couleur principale"

# Retourne sur main : ton changement disparaît, c'est normal
$ git switch main

# Ramène le travail de la branche dans main
$ git merge nouvelle-couleur

# La branche a servi, tu peux la supprimer
$ git branch -d nouvelle-couleur

• git switch -c nom : crée la branche et va dessus. Sans -c, va sur une branche existante.
• git merge nom : fusionne nom dans la branche où tu es. Place-toi sur main d'abord.
• git push ensuite, pour envoyer la fusion sur GitHub.

$ git switch -c nouvelle-couleur
Switched to a new branch 'nouvelle-couleur'

$ git switch main
Switched to branch 'main'
Your branch is up to date with 'origin/main'.

$ git merge nouvelle-couleur
Updating b41e2c7..c52d0e4
Fast-forward
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

$ git branch -d nouvelle-couleur
Deleted branch nouvelle-couleur (was c52d0e4).

$ git branch
* main

$ git log --oneline
c52d0e4 (HEAD -> main) Teste une nouvelle couleur principale
b41e2c7 (origin/main) Ajoute un .gitignore
8f3a91d Premier commit : portfolio, to-do et météo

Ton code est sur GitHub, mais ce n'est pas encore un site. Vercel va lui donner une vraie adresse web, gratuitement.

1. Inscris-toi sur Vercel avec ton compte GitHub.
2. Ajoute un nouveau projet, importe le dépôt mon-site.
3. Pas de framework ni de build : si Vercel demande un preset, laisse « Other ».
4. Clique sur Deploy. T'as une adresse du genre mon-site-xxxx.vercel.app.

https://mon-site-xxxx.vercel.app/          # le portfolio
https://mon-site-xxxx.vercel.app/todo/     # la to-do list
https://mon-site-xxxx.vercel.app/meteo/    # l'appli météo

Le serveur cherche un index.html dans chaque dossier. D'où ce nom exact.

https://mon-site-xxxx.vercel.app/          → le portfolio d'Alex, avec son style
https://mon-site-xxxx.vercel.app/todo/     → la to-do list, qui ajoute des tâches
https://mon-site-xxxx.vercel.app/meteo/    → l'appli météo, avec de vraies données

Vercel surveille ton dépôt : chaque push sur main remet le site à jour tout seul. Ta routine, à partir de maintenant :

# 1. Tu modifies tes fichiers dans VS Code, tu testes avec Live Server
# 2. Tu regardes ce qui a changé
$ git status

# 3. Tu prépares et tu enregistres
$ git add .
$ git commit -m "Ajoute un lien vers la to-do sur le portfolio"

# 4. Tu envoies
$ git push

# 5. Une minute plus tard, le site en ligne est à jour

Petits commits, souvent. Dernière touche : un README.md à la racine, la page d'accueil de ton dépôt sur GitHub. # fait un titre, - une liste :

# Le site d'Alex

Mon portfolio et mes premiers projets, codés à la main en HTML, CSS et JavaScript.

## En ligne

- Portfolio : https://mon-site-xxxx.vercel.app
- To-do list : https://mon-site-xxxx.vercel.app/todo/
- Météo : https://mon-site-xxxx.vercel.app/meteo/

## Ce que j'ai appris

- HTML et CSS, responsive
- JavaScript : le DOM, fetch avec l'API Open-Meteo
- Git, GitHub, mise en ligne avec Vercel

$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

$ git add .
$ git commit -m "Ajoute un lien vers la to-do sur le portfolio"
[main 3e7f1a2] Ajoute un lien vers la to-do sur le portfolio
 1 file changed, 1 insertion(+)

$ git push
...
To https://github.com/TON-PSEUDO/mon-site.git
   c52d0e4..3e7f1a2  main -> main