De zéro à ton site en ligne

Ce que tu obtiens à la fin

Une adresse publique bien à toi, du type https://ton-compte.github.io/c113-cv-nomprenom/, que tu peux envoyer à n'importe qui. Compte une quinzaine de minutes la première fois.

Cette page couvre la création du dépôt et sa publication. Une fois que c'est en place, tu ne referas plus que les quatre gestes de l'antisèche Git en 4 gestes.

Ton dépôt existe déjà et ta page est en ligne ?

C'est le cas si tu as tout fait depuis github.com, sans passer par WebStorm. Saute alors l'étape 1 et commence directement à l'étape 2 : cloner, c'est rapatrier sur ta machine ce qui existe déjà en ligne. L'étape 5 est également déjà faite pour toi.

Étape 1 — Créer le dépôt sur GitHub

1. Va sur github.com et connecte-toi
2. Bouton New (ou le + en haut à droite → New repository)
3. Owner : ton compte — Repository name : c113-cv-nomprenom, par exemple c113-cv-fallet-steve
4. Choose visibility : laisse sur Public
5. Start with a template : laisse sur No template
6. Add README : bascule l'interrupteur sur On
7. Clique sur Create repository

Étape 1 — le formulaire de création du dépôt : nom en minuscules avec tirets, visibilité Public, README activé.

Pourquoi activer « Add README »

Un dépôt totalement vide n'a encore aucune branche : WebStorm n'aurait rien à cloner. Le README crée le premier fichier — et la branche main avec lui.

Le nom du dépôt devient ton adresse

Il apparaîtra tel quel dans l'URL de ton site. Donc : minuscules, tirets à la place des espaces, pas d'accents, pas de caractères spéciaux. c113-cv-jean-dupont ✅ — C113 CV Jean Dupont ❌.

Avant de cloner : vérifier que Git est installé

WebStorm sait dialoguer avec GitHub, mais il s'appuie sur un outil installé sur ta machine : Git. Beaucoup d'ordinateurs l'ont déjà. On vérifie d'abord — on n'installe que si besoin.

1. Tester si Git est déjà là

Ouvre un terminal :

• Mac : l'application Terminal (⌘ + Espace, tape « Terminal »)
• Windows : PowerShell ou l'Invite de commandes (touche Windows, tape « cmd »)

Tape cette commande, puis Entrée :

git --version

Si une version s'affiche (par exemple git version 2.50.1), Git est installé : passe directement à l'étape 2.

La commande git --version dans un terminal : une version s'affiche, Git est installé, on peut cloner.

git --version ou git -v ?

Les deux donnent le même résultat — -v est juste le raccourci. C'est la seule fois du semestre où tu ouvres un terminal : juste pour vérifier que l'outil est là. Tout le reste (commit, push) se fait dans WebStorm, sans ligne de commande.

2. Git n'est pas trouvé ? Installe-le

Sur Windows

1. Va sur git-scm.com/download/win — le téléchargement démarre tout seul
2. Lance l'installeur et clique Next à chaque étape : les options par défaut conviennent parfaitement pour ce cours
3. Ferme et rouvre ton terminal (et WebStorm s'il est ouvert)

Sur Mac

En tapant git --version sans Git installé, macOS propose lui-même d'installer les Command Line Tools : une fenêtre s'ouvre, clique Installer et attends la fin. C'est tout — Git est fourni avec.

3. Re-vérifier

Retape git --version dans le terminal. La version doit maintenant s'afficher : Git est prêt, tu peux cloner.

Étape 2 — Cloner le dépôt dans WebStorm

Cloner, c'est télécharger une copie de travail du dépôt sur ta machine.

1. Sur la page de ton dépôt, bouton vert Code → onglet HTTPS → copie l'adresse
2. Dans WebStorm : écran d'accueil → Clone Repository (projet déjà ouvert ? menu File → New → Project from Version Control…)
3. Colle l'adresse dans URL
4. Choisis le dossier de destination, puis Clone
5. Si WebStorm demande de te connecter : Log In via GitHub, ça ouvre ton navigateur

Étape 2 — le bouton Code du dépôt, onglet HTTPS : c'est cette adresse qu'on colle dans WebStorm pour cloner.

Pas dans un dossier synchronisé

iCloud, OneDrive, Google Drive et Git se marchent dessus : fichiers verrouillés, conflits inexplicables, dépôt corrompu. Range tes projets dans un dossier local simple, par exemple Documents/ESIG/ — hors synchronisation.

Étape 3 — Écrire ta page d'accueil

Ton index.html existe déjà ?

Si tu as créé ta page directement sur github.com, le clone vient de la rapatrier sur ta machine. Ne la recrée pas : ouvre-la, modifie-la, et passe à l'étape 4.

1. Clic droit sur le dossier du projet → New → HTML File
2. Nomme le fichier index.html — exactement ce nom, en minuscules

index.html, pas autre chose

GitHub Pages cherche un fichier nommé index.html à la racine du dépôt. Index.html, cv.html ou index.htm donneront une page « 404 ». C'est l'erreur numéro un.

Écris une première version, avec ce que tu as vu dans le module 1 de Nuxy :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>CV — Prénom Nom</title>
</head>
<body>
  <h1>Prénom Nom</h1>
  <p>Étudiant en informatique de gestion à l'ESIG.</p>
</body>
</html>

Voir le résultat

Pendant que tu travailles, clique sur l'icône du navigateur qui apparaît en haut à droite de l'éditeur : WebStorm ouvre un aperçu qui se met à jour à chaque Ctrl + S. Regarde l'adresse : localhost:63342/…. localhost veut dire « cette machine » — WebStorm fait tourner un petit serveur web sur ton poste, comme le fera GitHub Pages sur Internet. C'est plus fidèle que d'ouvrir le fichier index.html directement depuis l'explorateur.

L'aperçu pour travailler, un vrai navigateur pour vérifier

L'aperçu intégré suffit pendant que tu codes. Mais quand un travail est terminé, teste-le dans Firefox ou Chrome : clic droit sur index.html → Open In → Browser. Si l'aperçu intégré se bloque, ferme-le et rouvre-le.

Ce que localhost ne détecte pas : les problèmes de noms de fichiers. Une image nommée Ma Photo.JPG s'affiche très bien sur ton PC et disparaît une fois en ligne (les serveurs distinguent majuscules et minuscules, et les espaces posent problème). D'où la règle : minuscules, sans espace, sans accent, pour tous tes fichiers et dossiers.

Régler WebStorm

Deux réglages, une fois pour toutes, pour un code propre sans y penser :

1. Indentation à 4 espaces — Ctrl + Alt + S (Settings) → Editor → Code Style → HTML, puis CSS : Tab size et Indent à 4, Use tab character décoché. C'est la valeur par défaut ; vérifie-la si ton code sort décalé
2. Reformat Code — Ctrl + Alt + L réindente tout le fichier ouvert d'un coup. À faire avant chaque commit : un fichier collé depuis un autre éditeur ou modifié à la main retrouve une indentation régulière

Sur Mac : Cmd + , pour les Settings, Cmd + Option + L pour Reformat Code.

Pourquoi ça compte

L'indentation ne change rien pour le navigateur, mais tout pour la lecture : elle montre ce qui est dans quoi. Un li décalé sous son ul, un bloc CSS aligné, et l'erreur saute aux yeux — la tienne comme celle du prof qui corrige.

Étape 4 — Envoyer ton travail sur GitHub

C'est le cycle habituel — le détail est dans Git en 4 gestes :

1. Panneau Commit (Ctrl + K), coche index.html, écris un message (« Ajouter la page d'accueil du CV »), puis Commit
2. Git → Push (Ctrl + Maj + K), puis Push

Raccourcis Windows — sur Mac, Cmd remplace Ctrl.

Étape 4 — le panneau Commit de WebStorm (capture JetBrains) : fichiers cochés, message, puis Commit ou Commit and Push.

Le message de l'exemple est mauvais

« Massive refactoring » ne dit rien de ce qui a changé. Écris plutôt « Ajouter la page d'accueil du CV » : ton message doit compléter la phrase « Ce commit va… ».

Commit and Push, en un seul geste

Le bouton Commit and Push… enchaîne les deux étapes. Pratique une fois que le réflexe est pris — mais commence par les faire séparément, pour bien voir ce que chacune fabrique.

Recharge la page de ton dépôt sur github.com : ton fichier doit y être. S'il n'y est pas, le push n'a pas eu lieu.

Étape 5 — Activer GitHub Pages

À faire une seule fois par dépôt.

1. Sur ton dépôt, onglet Settings (tout en haut à droite)
2. Menu de gauche → Pages
3. Source : Deploy from a branch
4. Branch : main, dossier / (root) → Save

Étape 5 — Settings → Pages : Deploy from a branch, branche main, dossier root. L'adresse du site s'affiche ici après la première publication.

Sur cette capture

L'encadré « Your site is live at… » en haut n'apparaît qu'une fois la première publication terminée : c'est là que tu liras ton adresse.

GitHub lance alors la publication. Elle prend une à deux minutes : tu peux la suivre dans l'onglet Actions de ton dépôt.

Étape 6 — Vérifier

Recharge la page Settings → Pages : ton adresse s'y affiche, du type https://ton-compte.github.io/c113-cv-nomprenom/. Ouvre-la.

Note-la quelque part : c'est elle que tu rendras, et elle ne changera plus.

À partir de maintenant

Ton site se met à jour tout seul à chaque push. Plus jamais besoin de repasser par Settings : tu modifies, tu commit, tu push, et une minute plus tard c'est en ligne.

Retirer son site d'Internet

Le même écran Settings → Pages permet de dépublier : bouton Unpublish site (menu … à droite de l'adresse). Le dépôt reste, seule la page publique disparaît. Pour republier, il suffit de remettre Source : Deploy from a branch.

Récapitulatif

Étape	Où	Une seule fois ?
Créer le dépôt	github.com → New	Oui
Cloner	WebStorm → Clone Repository	Oui
Créer index.html	WebStorm	Oui
Commit + push	WebStorm	Non — à chaque séance
Activer Pages	Settings → Pages	Oui
Vérifier en ligne	Navigateur	À chaque push

Pièges classiques

Symptôme	Cause probable	Solution
Page « 404 » sur l'adresse GitHub Pages	Le fichier ne s'appelle pas index.html, ou il n'est pas à la racine	Renomme-le, remets-le à la racine, commit + push
« 404 » alors que tout semble juste	La publication n'est pas terminée	Attends 1-2 minutes, onglet Actions pour suivre
Le site ne reflète pas mes changements	Commit fait, push oublié	Git → Push, puis attends une minute
Toujours l'ancienne version	Cache du navigateur	Rechargement forcé : Ctrl + Maj + R
Une image s'affiche en local mais pas en ligne	Nom de fichier avec espace, majuscule ou accent — ou fichier jamais ajouté à Git (rouge)	Renomme via Refactor → Rename (WebStorm corrige le src pour toi), vérifie que le fichier est bien coché au commit
Adresse introuvable	La casse compte dans l'URL	Recopie l'adresse exacte affichée dans Settings → Pages
Comportements bizarres du dépôt	Projet dans iCloud / OneDrive	Déplace-le dans un dossier local
WebStorm refuse de pusher	Pas connecté à GitHub	Settings → Version Control → GitHub → Log In via GitHub
WebStorm dit « Git is not installed »	Git n'est pas encore sur ta machine	Suis Avant de cloner : vérifier que Git est installé

Avant de publier ton CV

Ton dépôt est public : tout ce qu'il contient est visible par n'importe qui et peut être retrouvé par un moteur de recherche, y compris longtemps après. Une page publiée reste souvent accessible même après avoir été supprimée.

Réfléchis donc à ce que tu y mets. Ton nom, ta formation, tes compétences et tes centres d'intérêt n'ont rien de sensible. Ton adresse postale, ton numéro de téléphone, ta date de naissance ou une photo, c'est un autre sujet : ce sont des données personnelles, et sur un CV en ligne, une adresse e-mail suffit largement comme moyen de contact.

La bonne question

« Est-ce que je serais à l'aise si un employeur, un inconnu — ou ma famille — tombait là-dessus dans cinq ans ? » Si la réponse est non, ça n'a rien à faire sur la page.

Crédits

Capture du panneau Commit issue de la documentation officielle WebStorm. Copyright © 2026 JetBrains s.r.o., used with permission. WebStorm et le logo WebStorm sont des marques de JetBrains s.r.o.