Guide : Ajouter du contenu

Architecture du site

hugo-site/
├── hugo.toml              # Configuration du site (titre, menu, parametres)
├── content/               # Contenu du site (fichiers Markdown)
│   ├── _index.md          # Page d'accueil
│   ├── about.md           # Page "A propos"
│   ├── skills.md          # Page "Competences"
│   ├── cv.md              # Page CV
│   ├── blog/              # Section blog
│   │   ├── _index.md      # Page de liste du blog
│   │   └── *.md           # Articles de blog
│   └── projects/          # Section projets
│       ├── _index.md      # Page de liste des projets
│       └── *.md           # Pages de projets
├── layouts/               # Templates HTML
│   ├── _default/          # Templates par defaut
│   │   ├── baseof.html    # Template de base (head, body, scripts)
│   │   ├── single.html    # Template pour une page unique
│   │   └── list.html      # Template pour les listes (blog, projets)
│   ├── partials/          # Composants reutilisables
│   │   ├── header.html    # Navigation
│   │   └── footer.html    # Pied de page
│   ├── projects/
│   │   └── single.html    # Template d'un projet
│   ├── blog/
│   │   └── single.html    # Template d'un article
│   └── index.html         # Template de la page d'accueil
├── static/                # Fichiers statiques
│   ├── css/style.css      # Styles du site
│   ├── js/main.js         # JavaScript (filtres, theme, animations)
│   └── images/            # Images du site
│       └── projects/      # Images par projet
│           ├── trajectair/
│           ├── table-elevatrice/
│           ├── jumping-joe/
│           └── ...
└── public/                # Site genere (ne pas modifier)

Ajouter un nouveau projet

1. Creer le fichier

Creer un fichier Markdown dans content/projects/ avec un nom en minuscules et tirets :

content/projects/mon-nouveau-projet.md

2. Ajouter le front matter

Le front matter (entre ---) contient les metadonnees du projet :

---
title: "Nom du projet"
description: "Description courte affichee sur la carte dans la liste"
icon: "🚀"
categories: ["📱 Application mobile"]
featured: true
year: "2025"
school: "IUT de Cachan"
tags: ["Tag1", "Tag2", "Tag3"]
weight: 1
---

3. Ecrire le contenu

Apres le second ---, ecrire le contenu en Markdown. Voici un modele type :

---
title: "Mon Projet"
description: "Description courte."
icon: "🚀"
categories: ["📱 Application mobile"]
featured: true
year: "2025"
school: "IUT de Cachan"
tags: ["Vue.js", "TypeScript"]
weight: 3
---

<div class="project-info-grid">
<div class="project-info-card">
<span class="info-value">4</span>
<span class="info-label">Membres</span>
</div>
<div class="project-info-card">
<span class="info-value">6</span>
<span class="info-label">Mois</span>
</div>
</div>

## Presentation du projet

Texte de presentation...

---

## Fonctionnalites

### Premiere fonctionnalite

Description detaillee...

![Capture d'ecran](/images/projects/mon-projet/screenshot1.png)

### Deuxieme fonctionnalite

Description...

---

## Stack technique

| Technologie | Utilisation |
|-------------|-------------|
| **Vue.js** | Frontend |
| **TypeScript** | Typage |

---

## Ce que j'ai appris

- Point 1
- Point 2
- Point 3

Composants speciaux disponibles

Grille d’informations (chiffres cles en haut de page) :

<div class="project-info-grid">
<div class="project-info-card">
<span class="info-value">42</span>
<span class="info-label">Label</span>
</div>
</div>

Bouton de lien/telechargement :

<a href="https://example.com" class="download-btn" target="_blank">Texte du bouton</a>

Galerie de screenshots :

<div class="screenshot-gallery photo-screens">

![Description](/images/projects/mon-projet/image.png)

</div>

Pour des screenshots de telephone (plus petits) :

<div class="screenshot-gallery phone-screens">

![Description](/images/projects/mon-projet/image.jpg)

</div>

Ajouter un article de blog

1. Creer le fichier

content/blog/mon-article.md

2. Ajouter le front matter

---
title: "Titre de l'article"
description: "Description courte affichee sur la carte"
date: 2025-01-30
icon: "📝"
categories: ["🛠️ Hugo"]
tags: ["Tag1", "Tag2"]
---

3. Ecrire le contenu en Markdown

---
title: "Mon Article"
description: "Description courte."
date: 2025-01-30
icon: "📝"
categories: ["🛠️ Hugo"]
tags: ["Guide", "Hugo"]
---

## Introduction

Texte d'introduction...

## Partie 1

Contenu...

## Conclusion

Texte de conclusion...

Differences entre projet et article de blog

Ajouter des categories de filtrage

Les categories apparaissent comme boutons de filtre dans la barre en haut des pages Projets et Blog. Elles sont generees automatiquement a partir du champ categories du front matter de chaque article/projet.

Comment ca marche

1. Le template layouts/_default/list.html parcourt tous les articles/projets
2. Il collecte toutes les valeurs uniques du champ categories
3. Il genere un bouton de filtre pour chaque categorie avec un compteur
4. Le JavaScript (static/js/main.js) gere le filtrage au clic

Ajouter une nouvelle categorie

Il suffit d’utiliser un nouveau nom dans le champ categories d’un article ou projet. Le bouton de filtre apparaitra automatiquement.

# Exemple : creer une categorie "🌐 Web"
categories: ["🌐 Web"]

Le bouton “🌐 Web” apparaitra automatiquement dans la barre de filtres avec le nombre d’articles correspondants.

Categories existantes

Projets

Blog

Plusieurs categories

Un projet ou article peut appartenir a plusieurs categories. Il apparaitra dans chaque filtre correspondant :

# Ce projet apparait dans les filtres "Application mobile" ET "Jeu"
categories: ["📱 Application mobile", "🎮 Jeu"]

Le filtre “Favori”

Le filtre “Favori” (avec l’etoile) est disponible uniquement sur la page Projets. Pour qu’un projet y apparaisse, ajouter featured: true dans son front matter :

featured: true

Creer une nouvelle categorie

Pour creer une categorie qui n’existe pas encore, il suffit de l’ajouter dans le front matter d’un article. Le format recommande est emoji + nom :

# Exemples de nouvelles categories
categories: ["🌐 Web"]
categories: ["🤖 Intelligence Artificielle"]
categories: ["📊 Data Science"]
categories: ["🔧 DevOps"]
categories: ["📐 Conception"]

Aucune modification de template ou de configuration n’est necessaire : la categorie et son bouton de filtre sont generes automatiquement.

Ajouter des images

1. Organiser les fichiers

Les images sont stockees dans static/images/projects/ avec un sous-dossier par projet :

static/
└── images/
    └── projects/
        └── mon-projet/           ← creer ce dossier
            ├── screenshot1.png
            ├── screenshot2.jpg
            └── schema.png

2. Formats recommandes

3. Inserer une image dans un article

Image simple (pleine largeur) :

![Description de l'image](/images/projects/mon-projet/screenshot1.png)

Image dans une galerie (avec le style du site) :

<div class="screenshot-gallery photo-screens">

![Description](/images/projects/mon-projet/screenshot1.png)

</div>

Image de telephone (affichage plus petit) :

<div class="screenshot-gallery phone-screens">

![Description](/images/projects/mon-projet/app-screenshot.jpg)

</div>

4. Ajouter un PDF telechargeable

Placer le PDF dans le dossier d’images du projet, puis ajouter un bouton :

<a href="/images/projects/mon-projet/document.pdf" class="download-btn" target="_blank">Telecharger le PDF</a>

5. Bonnes pratiques

• Nommage : minuscules, tirets, pas d’espaces ni d’accents (mon-image.png)
• Taille : reduire les images trop lourdes (< 500 Ko recommande pour les PNG)
• Description : toujours remplir le texte alt (![Ce texte](...)) pour l’accessibilite
• Chemin : toujours commencer par /images/ (chemin absolu depuis la racine du site)

Syntaxe Markdown

Titres

# Titre niveau 1
## Titre niveau 2
### Titre niveau 3
#### Titre niveau 4

Texte formate

**Texte en gras**
*Texte en italique*
***Texte en gras et italique***
~~Texte barre~~
`code inline`

Resultat : gras, italique, gras italique, barre, code inline

Liens et images

[Texte du lien](https://example.com)
[Lien interne vers projets](/projects/)

![Description de l'image](/images/photo.jpg)

Listes

Liste a puces :
- Element 1
- Element 2
  - Sous-element
  - Autre sous-element
- Element 3

Liste numerotee :
1. Premier
2. Deuxieme
3. Troisieme

Citations

> Ceci est une citation.
> Elle peut s'etendre sur plusieurs lignes.

Ceci est une citation.

Blocs de code

Pour du code sur plusieurs lignes, utiliser trois backticks avec le langage :

```python
def hello():
    print("Bonjour !")
```

```javascript
console.log("Hello");
```

```bash
hugo server -D
```

Tableaux

| Colonne 1 | Colonne 2 | Colonne 3 |
|-----------|-----------|-----------|
| Cellule   | Cellule   | Cellule   |
| Cellule   | Cellule   | Cellule   |

Ligne horizontale

---

Commandes Hugo

# Lancer le serveur de developpement (avec brouillons)
hugo server -D

# Le site est accessible sur http://localhost:1313

# Generer le site statique pour la production
hugo

# Le site genere est dans le dossier public/

Conseils importants

Attention a l’indentation HTML :

• Ne pas indenter le HTML avec 4 espaces dans les fichiers Markdown
• 4 espaces = bloc de code en Markdown
• Le HTML doit etre colle a gauche ou indente avec 2 espaces maximum

Nommage des fichiers :

• Utiliser des minuscules
• Remplacer les espaces par des tirets : mon-projet.md
• Pas d’accents ni caracteres speciaux

Images :

• Placer les images dans static/images/projects/nom-du-projet/
• Referencer avec /images/projects/nom-du-projet/image.png
• Toujours creer un sous-dossier par projet

Categories :

• Toujours utiliser le format liste : categories: ["categorie"]
• Utiliser un emoji + nom : "📱 Application mobile"
• Aucune configuration necessaire : les filtres se generent automatiquement