11·60 bis
11·60 bis

Parcours Du Débutant Total : De Markdown À Votre 1er Site GitHub Pages

Un atelier pas à pas, sans jargon ni console

ouaisfi.eu inclus dans Ateliers
 environ 1100 mots 5 minutes 
https://dl.ouaisfi.eu/1160/images/share-default.jpg

Objectif : à la fin, vous aurez une adresse web que vous pourrez partager, contenant votre texte mis en page. Sans installer de logiciel et sans ligne de commande.

.txt ou .md — quelle différence ? (2 minutes)

Un fichier, c’est un document stocké sur votre ordinateur. Son extension (les lettres après le point) indique son type.

  • .txt = texte brut. Aucun style intégré. S’ouvre partout (Bloc‑notes sous Windows, TextEdit sur Mac, etc.). Idéal pour écrire sans mise en forme.
  • .md = texte brut + indications de mise en forme grâce à une convention nommée Markdown. On écrit avec des signes très simples (ex. # pour un titre, ** pour le gras).

Points clés :

  • .md reste un fichier texte lisible dans n’importe quel éditeur (comme un .txt).
  • Pour voir le rendu (titres, gras, listes), il faut un outil qui comprend le Markdown (par ex. GitHub Pages, un générateur de site ou certains éditeurs).
  • Passer de l’un à l’autre : vous pouvez renommer montexte.txt en montexte.md si votre contenu utilise le Markdown — cela indique au système et aux outils qu’il faut interpréter la mise en forme.

En résumé : .txt = texte brut simple. .md = texte brut avec une mise en forme légère comprise par les outils du web.

Le plan en 10 étapes (tout au clic)

Étape 0 — Écrire (ou récupérer) un texte en Markdown

Le Markdown, c’est une écriture simplifiée :

  • # pour un Titre 1
  • ## pour un Titre 2
  • **gras** → gras, _italique_ → italique
  • Un lien : [ouaisfi.eu](https://ouaisfi.eu)

Astuce : si vous n’avez pas encore de fichier, copiez simplement le modèle plus bas quand on vous le demandera.

Étape 1 — Créer un compte GitHub (gratuit)

  1. Allez sur github.com, cliquez Sign up et créez votre compte.
  2. Validez votre e‑mail.
  3. Connectez‑vous : vous arrivez sur votre page d’accueil GitHub.

Pourquoi GitHub ? Parce qu’il propose GitHub Pages, un service gratuit pour héberger votre site.

Étape 2 — Créer votre “dossier de site” (le repository)

  1. En haut à gauche, cliquez le bouton New (ou le +).
  2. Donnez un nom simple, par exemple : mon-site.
  3. Choisissez Public (recommandé pour débuter).
  4. Cliquez Create repository.

Info : votre site aura une adresse du type https://votre-pseudo.github.io/mon-site/. (On pourra changer plus tard.)

Étape 3 — Créer la première page index.md

  1. Dans votre dépôt, cliquez Add file → Create new file.
  2. Entrez le nom index.md (exactement).
  3. Collez ce modèle : 
    # Bonjour, Internet !

Ceci est mon tout **premier site** publié grâce à GitHub Pages.
Ce texte est écrit en *Markdown* : simple et lisible.

## À propos de moi
- J'aime écrire sans me compliquer la vie.
- Je peux ajouter des **titres**, du **gras**, des listes.

## Un lien
Retrouvez mes autres projets ici : [ouaisfi.eu](https://ouaisfi.eu).

---
Merci de votre visite ✨
  4. Tout en bas, cliquez Commit changes (enregistrer).

Astuce : vous pouvez revenir modifier index.md à tout moment en cliquant le l’icône crayon ✏️.

Étape 4 — Activer GitHub Pages

  1. Ouvrez l’onglet Settings du dépôt.
  2. Dans la colonne de gauche, cliquez Pages.
  3. Section Build and deployment :
    • Source : choisissez Deploy from a branch.
    • Branch : sélectionnez main et / (root).
  4. Cliquez Save s’il y a un bouton, sinon c’est pris en compte.
  5. Patientez ~1 minute : un lien apparaît du type https://votre-pseudo.github.io/mon-site/.
  6. Cliquez : votre site est en ligne 🎉

Si rien ne s’affiche tout de suite : rafraîchissez la page après 1–2 minutes.

Étape 5 — Donner un style (option Thème)

Vous pouvez ajouter un thème Jekyll en quelques clics :

  1. Restez dans Settings → Pages.
  2. Cherchez Theme chooser (si présent) et cliquez Choose a theme.
  3. Choisissez un thème simple (ex. Minimal), validez.
  4. GitHub crée (ou met à jour) un fichier _config.yml : il indique le thème.
  5. Revenez sur votre site : c’est plus joli !

Si vous ne voyez pas “Theme chooser” : pas grave. Créez un fichier _config.yml à la racine, avec une seule ligne par exemple :
theme: minima

Étape 6 — Mettre à jour votre site (modifier, corriger, republier)

  • Ouvrez index.md → cliquez ✏️ → modifiez → Commit.
  • GitHub “reconstruit” et publie automatiquement.
  • Actualisez votre site pour voir les changements.

Étape 7 — Ajouter une image

  1. Dans le dépôt, cliquez Add file → Upload files.
  2. Ajoutez une image (par exemple dans un dossier images/).
  3. Dans index.md, insérez : 
    ![Mon image](images/photo.jpg)
  4. Commit. Vérifiez sur le site.

Conseil : utilisez des images légères (moins de 300–500 Ko) pour un site plus rapide.

Étape 8 — Créer une deuxième page et un menu simple

  1. Créez un nouveau fichier a-propos.md avec, par exemple : 
    # À propos

Quelques lignes pour me présenter...
  2. Dans index.md, ajoutez un lien : 
    [À propos](a-propos)
  3. Vous avez maintenant deux pages reliées par un lien.

Note : certains thèmes proposent une vraie barre de menu, mais ce lien suffit pour débuter.

Étape 9 — (Optionnel) Donner un titre de site

  1. Ouvrez le fichier _config.yml (créé à l’étape 5).
  2. Ajoutez : 
    title: "Mon premier site"
description: "Un site créé au clic avec GitHub Pages"
  3. Commit. Les thèmes affichent souvent ce titre automatiquement.

Étape 10 — (Optionnel) Utiliser un nom de domaine personnel

Si vous possédez monsite.be, vous pouvez le lier à votre site :

  • Dans Settings → Pages, renseignez votre domaine (ex. www.monsite.be).
  • Chez votre registraire (OVH, etc.), créez l’enregistrement CNAME vers votre-pseudo.github.io.
  • Attendez la propagation (quelques minutes à quelques heures).

Cette étape est optionnelle. L’adresse github.io fonctionne très bien pour commencer.

Dépannage rapide (FAQ)

Mon site reste en “404”
Attendez 1–2 minutes, puis vérifiez Settings → Pages : l’URL y figure. Assurez‑vous d’avoir choisi main et / (root).

Le lien “Pages” n’apparaît pas
Vous n’êtes peut‑être pas dans les Settings du dépôt mais dans ceux du compte. Ouvrez le dépôt → Settings (en haut) → colonne gauche Pages.

Mon image n’apparaît pas
Vérifiez le chemin : si l’image est dans images/photo.jpg, le lien doit être ![alt](images/photo.jpg) (respectez la casse).

Puis‑je bloguer avec plusieurs articles ?
Oui. Pour du blog, suivez plus tard la piste “Jekyll + GitHub Pages” (toujours gratuit) ou passez à un générateur simple (MkDocs, Hugo) quand vous serez à l’aise.

Mémo : 6 choses à retenir

  1. Un site = un dépôt GitHub.
  2. Le fichier principal s’appelle index.md (ou index.html).
  3. Activer Pages dans Settings → Pages.
  4. Option Thème pour un rendu plus propre.
  5. Chaque modification publiée = site mis à jour.
  6. Le Markdown suffit pour écrire proprement.

Bon premier site ✨

Mis à jour le 2025-08-25 
CC BY-NC
Ouvrir dans l'éditeur
Retour | Accueil
0%