🌍 Publier votre portfolio Markdown sur GitHub Pages (niveau débutant)

[Souad]

Publier votre portfolio Markdown sur GitHub Pages (niveau débutant)

Vous avez rédigé vos fichiers `.md` ? Voici comment les transformer en site web gratuit avec GitHub Pages !


Ce qu’il vous faut

• Une adresse mail
• Un compte GitHub (gratuit) → Créer un compte ici
• Le kit de portfolio en Markdown (voir tutoriel précédent)

Étapes à suivre

1. Créez un dépôt GitHub

1. Allez sur github.com
2. Cliquez sur le bouton [+] en haut à droite → "New repository"
3. Nom du dépôt : portfolio-markdown (ou ce que vous voulez)
4. Cochez “Public” + cochez “Add a README file”
5. Cliquez sur Create repository

2. Téléversez vos fichiers Markdown

1. Sur la page de votre dépôt, cliquez sur “Add file” > Upload files
2. Glissez/déposez les fichiers `.md` du kit dans l’espace prévu
3. Ajoutez un petit message de validation (“Ajout du portfolio”) puis cliquez sur Commit changes

3. Activez GitHub Pages

1. Dans votre dépôt, allez dans le menu Settings (onglet à droite)
2. Descendez jusqu’à “Pages” (ou “Pages / Sites”)
3. Sous “Source”, choisissez : Deploy from a branch
4. Puis : branch = main et folder = root
5. Cliquez sur Save
6. Après quelques secondes, GitHub vous affiche un lien comme :
   https://votrenom.github.io/portfolio-markdown

Astuce : vos fichiers Markdown ne sont pas encore jolis ?

Pas de panique : GitHub affiche le texte brut.
Pour une version plus jolie, vous pouvez :

• Créer un vrai site statique avec un générateur (ex: Jekyll, Eleventy, MkDocs)
• Ou utiliser un outil comme Obsidian Publish ou Notion + Super.so
• (ou restez brut pour commencer !)

Félicitations, vous avez mis en ligne votre premier site web statique !

Montrez-nous votre lien ci-dessous ou posez vos questions si vous êtes bloqué·e !

[Souad]

Utiliser un thème : Merlot (Jekyll + GitHub Pages)

Votre portfolio Markdown est prêt ? Voici comment le transformer en un petit site stylé, élégant et responsive grâce au thème Merlot, 100 % gratuit sur GitHub Pages.



Objectif

Utiliser le thème Merlot pour donner à votre contenu Markdown une belle présentation, sans toucher au code HTML ou CSS.



Étape 1 : Préparez votre dépôt GitHub

Vous avez déjà un dépôt ici :
https://github.com/ouaisfieu/portfolio-markdown

Sinon, créez un nouveau dépôt public, et placez-y vos fichiers `.md` comme :
- `index.md`
- `moi.md`
- `projets.md`
- `competences.md`
- `contact.md`



Étape 2 : Activez GitHub Pages avec le thème Merlot

1. Allez dans Settings de votre dépôt
2. Menu latéral → Pages
3. Source : choisissez Branch = main et / (root)
4. Puis dans “Theme”, cliquez sur “Choose a theme”
5. Choisissez le thème Merlot puis validez
6. GitHub ajoute un fichier `_config.yml` dans votre dépôt

Après quelques secondes, un lien apparaîtra :
→ https://[ton compte].github.io/portfolio-markdown



Étape 3 : Personnalisez `_config.yml`

Cliquez sur le fichier `_config.yml` dans votre dépôt, puis Edit.

Ajoutez ou modifiez les lignes suivantes :

Code : Tout sélectionner

title: Mon portfolio
description: Un aperçu de mes projets et compétences
theme: jekyll-theme-merlot

Cela active Merlot et rend votre site proprement affiché avec votre contenu `.md`.
Plus de détails en suivant les liens :

• Ajout d’un thème à votre site GitHub Pages avec Jekyll
• Le Thème Merlot

Étape 4 : Renommez vos fichiers

GitHub Pages attend des fichiers `.md` nommés `index.md`, `about.md`, etc.

Renommez :
- `moi.md` → `about.md`
- `projets.md` → `projects.md` ou `works.md`
- `competences.md` → `skills.md`
- `contact.md` → `contact.md` (ok tel quel)

Puis, mettez à jour les liens dans `index.md` :

Code : Tout sélectionner

➡️ [Qui suis-je ?](about.md)  
➡️ [Mes projets](projects.md)  
➡️ [Compétences](skills.md)  
➡️ [Contact](contact.md)

Bonus : page d'accueil stylée

Ajoutez au début de chaque fichier `.md` une en-tête YAML pour définir son titre :

Code : Tout sélectionner

---
title: Qui suis-je ?
---
# Qui suis-je ?

Faites-le pour chaque page pour un rendu plus propre dans Merlot.

Félicitations, vous avez un mini-site personnel stylé et hébergé gratuitement, sans rien installer !

Partagez votre lien ici ! Ou demandez un coup de pouce pour améliorer la présentation.


"Et si GitHub n’ajoute pas `_config.yml` tout seul ?"
Pas de panique !

Vous pouvez le créer vous-même en 30 secondes :

1. Dans votre dépôt, cliquez sur Add file > Create new file
2. Nom du fichier : _config.yml (avec le souligné devant !)
3. Collez ce contenu :

   Code : Tout sélectionner

   title: Mon portfolio
   description: Présentation de mes projets et compétences
   theme: jekyll-theme-merlot
   markdown: kramdown
   

4. Enregistrez avec le bouton Commit new file

Votre site sera à jour après quelques secondes

[Souad]

Recommandation pour ton projet actuel


Convertis tous tes liens [[fichier.md]] en :

Code : Tout sélectionner

[Nom lisible](nom-du-fichier-sans-les-crochets.md)

[Qui suis-je ?](about.md)
[Mes projets](projects.md)
[Compétences](skills.md)
[Contact](contact.md)

[adonf]

J'adore quand ça marche !

Très réussi le résultat, le style est bien sympa