Constructeur de Sites Web

Étape 1 : Uploadez vos fichiers

Commencez par préparer votre contenu en Markdown et vos images selon les règles ci-dessous. Cette organisation garantit que votre site sera structuré correctement.

Fichiers de contenu (Markdown)

Règles importantes ▼

Obligatoire : Un fichier nommé exactement index.md (votre page d'accueil)
Pour les autres fichiers, ajoutez dans le front matter YAML :
```
---
titre: Mon titre
ordre: 2
---
```
Les fichiers seront affichés dans l'ordre : index.md en premier, puis selon le numéro d'ordre

Exemple de structure :

✅ index.md (ordre: 0 automatique)
✅ about.md (avec ordre: 2 dans le front matter)
✅ projects.md (avec ordre: 3 dans le front matter)

Images

Règles de nommage ▼

Fichiers spéciaux (optionnels mais recommandés) :
- icon.png - Icône du site (affichée dans l'onglet du navigateur)
- logo.png - Logo (affiché dans le header)
- hero.jpg - Image hero (grande image d'accueil)
Images de contenu : Commencez le nom par deux chiffres suivis d'un tiret
- ✅ 01-mon-projet.jpg
- ✅ 02-autre-image.png
- ❌ mon-projet.jpg (manque la numérotation)

Étape 2 : Choisissez le type de site

Le type de site détermine la structure et l'organisation de vos pages.

Étape 3 : Choisissez votre thème

Le thème définit l'apparence visuelle avec les couleurs, polices et effets.

Étape 4 : Personnalisez votre site

Affinez les détails visuels pour créer exactement l'apparence que vous souhaitez. Tous les changements sont appliqués en temps réel pour que vous puissiez voir immédiatement le résultat.

Aperçu en direct

🎨 Couleurs ▼

Ajustez les couleurs de votre site. Nous utilisons l'espace colorimétrique OKLCH qui garantit que les couleurs restent harmonieuses et accessibles même après modification.

Couleur primaire Utilisée pour les boutons, liens et accents

#2563eb oklch(58% 0.22 264°)

Couleur secondaire Utilisée pour les éléments d'accent complémentaires

#10b981 oklch(68% 0.17 165°)

Couleur de fond Couleur principale de l'arrière-plan

#ffffff oklch(100% 0 0°)

🔤 Typographie ▼

Choisissez les polices de caractères pour votre site. Nous utilisons les Modern Font Stacks qui sont des combinaisons de polices système pour un chargement instantané sans fichiers web.

Police principale Utilisée pour tout le texte du site

Voici à quoi ressemble cette police. ABCDEFG 0123456789

Échelle typographique Contrôle la taille relative entre les différents niveaux de titres

1.250 (Major Third)

📐 Espacement ▼

L'espace négatif (whitespace) est crucial pour créer un design aéré et professionnel. Augmenter l'échelle d'espacement donne plus de respiration à votre site, la diminuer le rend plus compact.

Échelle d'espacement globale Multiplie tous les espacements du site par ce facteur

1.0× (Normal)

Largeur maximale du contenu Contrôle la largeur maximale de la zone de contenu principal

1200px

⬜ Bordures et formes ▼

Les coins arrondis et l'épaisseur des bordures affectent grandement la personnalité de votre site. Des coins carrés sont modernes et précis, des coins arrondis sont amicaux et accessibles.

Arrondi des coins Contrôle le rayon des coins arrondis (0 = carré)

8px

Petit

Moyen

Grand

Épaisseur des bordures Contrôle l'épaisseur par défaut des bordures

1px

✨ Effets et animations ▼

Les ombres créent de la profondeur et de la hiérarchie visuelle. Les transitions contrôlent la vitesse des animations lors des interactions.

Intensité des ombres Contrôle la profondeur et l'intensité des ombres portées

1.0× (Normal)

Légère

Moyenne

Forte

Vitesse des transitions Contrôle la vitesse des animations et transitions

1.0× (Normal)

Étape 5 : Exportez votre site

Votre site est prêt ! Téléchargez-le et hébergez-le où vous voulez.