Faire un simple site statique

Comment créer un magnifique site marketing pour votre salon du tricot en moins d’une heure

Vous organisez un événement local comme un salon du tricot ? Vous avez besoin d’un site web simple et attractif pour partager les détails, susciter l’enthousiasme et fournir les informations essentielles aux participants. Dans ce guide, je vais vous montrer comment créer un site web d’événement d’aspect professionnel en utilisant Claude (assistant IA) et Netlify (hébergement gratuit), même si vous n’avez aucune expérience en programmation.

Ce que vous allez construire

À la fin de ce tutoriel, vous aurez :

• Un site web responsive et adapté aux mobiles
• Les détails de l’événement, le programme et les informations de localisation
• Une section de présentation des exposants
• Un formulaire de contact pour les demandes de renseignements
• Un hébergement gratuit avec la possibilité d’un nom de domaine personnalisé

Prérequis

• Temps : 30-60 minutes
• Coût : 17€ pour Claude Pro (1 mois) + hébergement gratuit (optionnel : 10-15€/an pour un nom de domaine personnalisé)
• Compétences techniques nécessaires : Aucune, mais volonté d’apprendre quelques concepts techniques

Prérequis

Vous aurez besoin de :

1. Un compte Claude Pro et Claude Code installé (guide d’installation)
2. Un compte Netlify (inscription gratuite sur netlify.com)
3. Les informations sur votre événement bien sûr (dates, lieu, description, ce qui le rend spécial)

Étape 1 : Planifier la structure de votre site web

Avant de demander à Claude de construire quoi que ce soit, définissez les besoins de votre site web. Pour un salon du tricot, considérez :

Pages essentielles :

• Accueil : Image principale, slogan de l’événement, date/lieu, points forts
• À propos : Qu’est-ce qui rend ce salon du tricot spécial ? Historique, mission
• Programme : Événements quotidiens, ateliers, démonstrations
• Exposants : Qui expose ? Mise en avant des sponsors
• Visite : Détails du lieu, parking, accessibilité, billets
• Contact : Formulaire email, liens réseaux sociaux

Préférences de design :

• Couleurs chaleureuses et accueillantes (palette inspirée de la laine)
• Typographie claire et lisible
• Approche mobile-first

Étape 2 : Configurer votre espace de travail local

Avant de demander à Claude de générer quoi que ce soit, mettons en place un espace de travail simple sur votre ordinateur :

1. Créez un nouveau dossier dans vos Documents appelé site-salon-tricot
2. Ouvrez un éditeur de texte (Bloc-notes sur Windows, TextEdit sur Mac, ou n’importe quel éditeur de code)
3. Créez un nouveau fichier et tapez : Hello World
4. Enregistrez le fichier sous le nom index.html dans votre dossier site-salon-tricot
5. Trouvez le fichier index.html dans votre dossier et double-cliquez dessus pour l’ouvrir dans votre navigateur

Vous devriez voir “Hello World” affiché dans votre navigateur. L’URL dans la barre d’adresse sera un chemin de fichier (quelque chose comme file:///C:/Users/VotreNom/Documents/site-salon-tricot/index.html ou file:///home/VotreNom/Documents/site-salon-tricot/index.html). Cela confirme que tout fonctionne et que vous êtes prêt à remplacer ce contenu simple par le site web complet que Claude va générer.

Étape 3 : Utiliser Claude pour générer votre site web

Maintenant vient la partie amusante. Ouvrez Claude Code dans votre dossier de projet :

Sur Windows : 1. Ouvrez l’Explorateur de fichiers et naviguez vers votre dossier Documents/site-salon-tricot 2. Faites un clic droit dans le dossier (pas sur un fichier) 3. Sélectionnez “Ouvrir avec Code” ou “Ouvrir dans le Terminal” 4. Dans le terminal, tapez : claude

Sur Mac/Linux : 1. Ouvrez le Terminal 2. Naviguez vers votre dossier : cd ~/Documents/site-salon-tricot 3. Tapez : claude

Cela ouvre Claude Code avec accès à votre dossier de projet.

Important : Assurez-vous que Claude utilise le modèle Sonnet. Vous pouvez vérifier/changer le modèle dans les paramètres de l’interface Claude Code. Le modèle Sonnet offre le meilleur équilibre entre qualité et rapidité pour cette tâche.

Maintenant, donnez-lui ce prompt (en remplaçant “Sujet du site web” par votre événement réel) :

Je veux créer un site web statique pour [Sujet du site web].

Crée un fichier CLAUDE.md dans mon dossier de projet pour documenter ce projet de site web.
Avant de le créer, pose-moi des questions pour comprendre ce que je veux construire.

Pose-moi des questions sur :
- Les pages essentielles dont j'ai besoin
- Mes préférences de design et palette de couleurs
- L'esthétique et l'ambiance globales
- Les détails de mon événement (nom, date, lieu, etc.)
- Les fonctionnalités spécifiques que je souhaite

Ensuite, crée un fichier CLAUDE.md complet qui inclut :
- Mes réponses à tes questions
- Spécifications techniques : Tailwind CSS (CDN), Alpine.js (CDN)
- Approche de design : Responsive, mobile-first, esthétique moderne
- Structure des pages et navigation
- Tous les besoins de contenu
- Exigences SEO : Titres de pages descriptifs, méta descriptions, balises Open Graph
- Exigences d'accessibilité : Texte alternatif pour les images, hiérarchie de titres appropriée, contraste de couleurs suffisant

Important : Ceci est un site web statique (HTML/CSS/JS uniquement). Pas de formulaires backend ou
de bases de données. Uniquement des fonctionnalités intégrées du navigateur comme les liens mailto: pour le contact.

Après avoir créé le CLAUDE.md, génère tous les fichiers HTML pour mon site web.

Ce qui se passe ensuite :

Claude vous posera des questions. Pour notre exemple de salon du tricot, la conversation pourrait ressembler à ceci :

● J'aimerais vous aider à créer un site web pour votre salon du tricot ! Laissez-moi recueillir les informations nécessaires pour construire quelque chose de parfait pour vous.

Questions sur votre site web de salon du tricot :

1. Pages essentielles

De quelles pages avez-vous besoin pour le site web ? Par exemple :
- Page d'accueil
- À propos du salon
- Programme/Calendrier
- Exposants
- Ateliers/Cours
- Informations sur le lieu
- Page de contact
- Inscription/Billets
- Galerie (événements passés)
- Autres ?

2. Détails de l'événement

- Quel est le nom de votre salon du tricot ?
- Quand a-t-il lieu ? (dates et horaires)
- Où se trouve-t-il ? (nom du lieu, adresse)
- Est-ce un événement récurrent ou ponctuel ?
- Quel est le coût d'entrée (gratuit, payant, sur don) ?
- Qui peut assister ? (tous âges, tous niveaux, etc.)

3. Préférences de design et palette de couleurs

- Quelles couleurs envisagez-vous ? (chaud/cosy, lumineux/vibrant, pastel/doux, moderne/minimaliste ?)
- Avez-vous une palette de couleurs spécifique en tête ? (couleurs inspirées de la laine, couleurs de marque ?)
- Avez-vous déjà un logo ou une identité visuelle ?

4. Esthétique et ambiance globales

- Quelle sensation le site doit-il transmettre ? (cosy/chaleureux, professionnel/moderne, ludique/créatif, élégant/artisanal ?)
- Y a-t-il des sites web que vous admirez ou souhaitez imiter ?
- Préférez-vous un style épuré et minimal ou riche et détaillé ?

5. Fonctionnalités spécifiques

- Avez-vous besoin d'un formulaire de contact ?
- Devrait-il y avoir des profils ou listes d'exposants ?
- Voulez-vous une inscription à une newsletter ?
- Intégration/liens de réseaux sociaux ?
- Intégration d'une carte pour le lieu ?
- Fonctionnalité de galerie photo ?
- Compte à rebours jusqu'à l'événement ?
- Des éléments interactifs spéciaux ?

Répondez à ces questions, et je créerai un fichier de documentation CLAUDE.md complet suivi de toutes les pages HTML pour votre site web de salon du tricot !

Comment répondre :

Vous avez deux options pour répondre aux questions de Claude :

Option 1 : Répondre une par une Claude mettra à jour les questions restantes au fur et à mesure que vous répondrez à chacune. Par exemple :

J'ai besoin de : Accueil, À propos, Programme, Exposants et Contact.

Claude posera ensuite la question suivante sur les détails de l’événement, et ainsi de suite.

Option 2 : Donner l’essentiel et laisser Claude décider Dites à Claude les bases (pages dont vous avez besoin, détails de l’événement) puis dites :

L'événement s'appelle "Festival du Tricot de la Vallée 2025", il a lieu les 14-15 juin
au Centre Communautaire Riverside. J'ai besoin des pages Accueil, À propos, Programme, Exposants et Contact.

Pour le design et les fonctionnalités, choisis ce que tu penses être le mieux pour un site web
chaleureux et accueillant de salon du tricot.

Claude prendra de bonnes décisions de design et générera un site web complet basé sur vos exigences principales.

Ce qui se passe ensuite :

Après avoir fourni vos réponses, Claude va : 1. Créer un résumé de vos exigences 2. Demander la permission de créer et modifier des fichiers dans votre dossier de projet

Vous verrez un prompt comme celui-ci :

❯ 1. Oui
  2. Oui, autoriser toutes les modifications pendant cette session (shift+tab)
  3. Non, et indiquer à Claude quoi faire différemment (esc)

Choisissez l’option 2 : “Oui, autoriser toutes les modifications pendant cette session”

Cela permet à Claude de créer le fichier CLAUDE.md et tous vos fichiers HTML sans demander la permission à chaque fois. Cela vous évite d’approuver chaque création de fichier individuellement.

Claude va ensuite : 1. Créer le fichier de documentation CLAUDE.md 2. Générer tous les fichiers HTML (index.html, about.html, schedule.html, etc.) 3. Vous indiquer ce qu’il a créé

Soyez patient, cela prendra quelques minutes pour générer tous les fichiers.

Voici un exemple de ce que Claude vous dira après avoir terminé la tâche :

● Parfait ! Votre site web du Festival du Tricot de la Vallée est terminé ! Voici ce que j'ai créé pour vous :

  Fichiers créés :

  1. CLAUDE.md - Documentation complète du projet incluant :
    - Détails de l'événement (Festival du Tricot de la Vallée 2025, 14-15 juin, Centre Communautaire Riverside)
    - Spécifications techniques (Tailwind CSS & Alpine.js via CDN)
    - Système de design avec des couleurs chaudes inspirées de la laine (vert sauge, terracotta, violet, crème)
    - Structure complète des pages et exigences de contenu
  2. index.html - Page d'accueil avec :
    - Section hero avec nom de l'événement, dates et lieu
    - Trois cartes de points forts (Rencontrer des artisans locaux, Apprendre de nouvelles compétences, Acheter des laines uniques)
    - Section d'infos rapides (quand, où, admission)
    - Appel à l'action
  3. about.html - Page à propos avec :
    - Histoire et mission du festival
    - Ce à quoi s'attendre (ateliers, marché des exposants, démonstrations, communauté)
    - Section "Qui devrait participer"
    - FAQ avec fonctionnalité d'accordéon
  4. schedule.html - Page du programme incluant :
    - Interface à onglets (Samedi/Dimanche)
    - Programme détaillé pour les deux jours
    - Descriptions des ateliers, horaires et lieux
    - Types d'événements codés par couleur
  5. vendors.html - Page des exposants présentant :
    - 12 cartes d'exposants exemples avec icônes emoji
    - Catégories : laines, patrons, outils, produits finis
    - Section d'appel aux exposants
    - Aperçu des catégories d'exposants
  6. contact.html - Page de contact avec :
    - Formulaire de contact fonctionnel avec validation Alpine.js
    - Informations de contact (email, téléphone, lieu)
    - Liens réseaux sociaux
    - Inscription à la newsletter
    - Section carte avec directions et infos de parking

  Fonctionnalités de design :

  - Palette de couleurs chaudes et cosy parfaite pour un salon du tricot
  - Entièrement responsive (design mobile-first)
  - Éléments interactifs (menu mobile, accordéons, onglets, validation de formulaire)
  - En-tête/pied de page cohérents sur toutes les pages
  - Effets de survol fluides et transitions
  - Balisage favorable à l'accessibilité

  Toutes les pages sont prêtes ! Ouvrez index.html dans un navigateur pour voir votre magnifique site web de festival du tricot.

Étape 4 : Réviser et tester localement

Une fois que Claude a fini de générer vos fichiers, ils sont déjà enregistrés dans votre dossier de projet ! Maintenant, testez-les :

1. Naviguez vers votre dossier site-salon-tricot dans l’Explorateur de fichiers (Windows) ou Finder (Mac)
2. Vous devriez voir : CLAUDE.md, index.html, et les autres pages que vous avez demandées se terminant par .html
3. Double-cliquez sur index.html pour l’ouvrir dans votre navigateur
4. Testez la navigation entre les pages en cliquant sur les liens du menu
5. Testez sur mobile en utilisant les outils de développement de votre navigateur :
   • Chrome : Appuyez sur F12, puis cliquez sur l’icône de basculement d’appareil (ou Ctrl+Shift+M / Cmd+Shift+M) - Documentation Chrome DevTools
   • Firefox : Appuyez sur F12, puis cliquez sur l’icône du mode design responsive (ou Ctrl+Shift+M / Cmd+Shift+M) - Documentation Firefox Responsive Design Mode
   • Cela vous permet de voir à quoi ressemble votre site sur différentes tailles d’écran
6. Vérifiez les erreurs ou avertissements :
   • Appuyez sur F12 pour ouvrir les outils de développement
   • Allez dans l’onglet “Console”
   • Recherchez des erreurs rouges ou des avertissements jaunes
   • Si vous en voyez, copiez-les et collez-les dans Claude - il vous aidera à les corriger

Liste de vérification des tests :

• Toutes les pages s’affichent correctement avec un style cohérent
• Les liens de navigation fonctionnent sur toutes les pages
• Le menu mobile s’ouvre et se ferme correctement
• La page de contact a des liens email (pas de formulaires complexes)
• Les couleurs et polices sont bien rendues
• Fonctionne bien sur les écrans de téléphone

Étape 5 : Apporter des modifications et itérer

Si vous voulez ajuster quoi que ce soit, il suffit de demander à Claude ! Vous pouvez changer à la fois le design et le contenu. Par exemple :

Modifications de design :

Peux-tu agrandir l'en-tête sur la page d'accueil ?

Change la palette de couleurs en bleu et orange à la place.

Ajoute une section galerie photo à la page à propos.

Modifications de contenu :

Réécris la page à propos pour qu'elle semble plus professionnelle.

Ajoute une section FAQ avec 5 questions courantes sur l'événement.

Rends les descriptions des exposants plus excitantes et engageantes.

Le processus d’itération : 1. Demandez à Claude de faire une modification (design ou contenu) 2. Claude mettra à jour le fichier et vous dira ce qu’il a changé 3. Rafraîchissez la page dans votre navigateur pour voir la mise à jour 4. Répétez jusqu’à ce que vous soyez satisfait du résultat

Cet aller-retour vous permet de perfectionner votre site web étape par étape.

Exemple d’une demande détaillée :

Vous pouvez être très spécifique sur ce que vous voulez. Par exemple :

Sur la vue mobile, j'aimerais que le titre du site dans la barre de navigation affiche simplement
"Festival du Tricot" au lieu de "Festival du Tricot de la Vallée."
Sur les écrans plus grands, il devrait toujours afficher le titre complet.

Claude répondra quelque chose comme :

● Parfait ! J'ai mis à jour toutes les cinq pages HTML. Maintenant la barre de navigation affichera :
  - Vue mobile (écrans < 768px) : "Festival du Tricot"
  - Vue desktop (écrans ≥ 768px) : "Festival du Tricot de la Vallée"

  Cela donne plus d'espace aux utilisateurs mobiles dans l'en-tête tout en gardant le
  branding complet visible sur les écrans plus grands.

Avant :

Après :

Fonctionnalités avancées avec intégrations tierces :

Claude peut également vous aider à ajouter des fonctionnalités plus complexes comme des cartes, des formulaires de contact ou des systèmes de réservation. Comme il s’agit d’un site web statique, ces fonctionnalités nécessitent des services tiers. Par exemple :

Je veux ajouter une carte Google Maps montrant l'emplacement du lieu.

Peux-tu ajouter un formulaire de contact fonctionnel qui m'envoie des emails ?

J'ai besoin d'un moyen pour les exposants de s'inscrire à l'événement.

Ces fonctionnalités nécessitent souvent de s’inscrire à un service et quelques étapes de configuration. Claude vous guidera tout au long du processus - du choix du bon service à sa configuration et son intégration dans votre site web. Il suffit de demander, et Claude vous accompagnera étape par étape.

---

Lorsque vous êtes satisfait de ce que vous avez localement, il est temps de le rendre disponible sur Internet !

Étape 6 : Déployer sur Netlify

Netlify rend le déploiement incroyablement simple. Bien qu’il existe d’autres méthodes de déploiement que les professionnels préfèrent (comme l’utilisation de dépôts Git avec déploiements automatiques), l’approche par glisser-déposer est de loin la plus facile et la plus rapide pour les utilisateurs non techniques. Nous couvrirons des méthodes de déploiement plus avancées dans de futurs articles de blog.

Déploiement simple :

1. Allez sur app.netlify.com et connectez-vous
2. Glissez-déposez l’intégralité de votre dossier site-salon-tricot sur la zone de déploiement
3. Attendez 30 secondes pour le déploiement
4. Obtenez votre URL en direct : nom-aleatoire-12345.netlify.app
5. Toutes vos pages seront accessibles : /, /about.html, /schedule.html, etc.

Étape 7 : Améliorer avec des images

Votre site web a besoin d’attrait visuel. Ajoutez de vraies photos :

1. Rassemblez 5-10 images de haute qualité (événements passés, gros plans de laines, photos du lieu)
2. Optimisez les images pour le web
3. Demandez à Claude de modifier le HTML pour inclure des images :

Ajoute une section galerie photo avec 8 images d'événements passés.
Utilise une mise en page en grille responsive avec des effets de survol. Inclus des
URL d'images placeholder que je remplacerai par mes vraies photos.

1. Remplacez les URL placeholder par vos URL d’images :
   • Téléchargez les images sur le même site Netlify

Étape 8 : Plus de choses que vous pouvez ajouter

Votre site web est en ligne, mais vous pouvez l’améliorer davantage ! Vous avez deux options principales :

Option 1 : Fonctionnalités payantes de Netlify Netlify offre des fonctionnalités premium qui s’intègrent de manière transparente :

• Domaines personnalisés - Connectez votre propre domaine - Documentation domaines personnalisés
• Analytics - Suivi des visiteurs respectueux de la vie privée (9$/mois) - Documentation Netlify Analytics
• Formulaires - Gestion de formulaires backend sans code (19$/mois pour Pro) - Documentation Netlify Forms

Option 2 : Intégrations tierces Utilisez des services externes gratuits ou à faible coût :

• Analytics - Google Analytics (gratuit), Plausible, Fathom - Configuration Google Analytics
• Formulaires - Formspree (version gratuite), Formspark, Tally - Documentation Formspree
• Email - Mailchimp (version gratuite), ConvertKit - API Mailchimp
• Réservation/Événements - Intégrations Eventbrite, Calendly - API Eventbrite

Comme dit précédemment, Claude vous guidera à travers la configuration et l’intégration pour tout service que vous choisissez.

Étape 9 : Peaufinage final

Avant de lancer, complétez ces touches finales :

Ajoutez du contenu réel :

• Remplacez le texte placeholder par les informations réelles de votre événement
• Ajoutez des témoignages de participants précédents ou des citations d’exposants
• Assurez-vous que les liens importants sont visibles et répétés

Testez tout :

• Cliquez sur toutes les pages et liens
• Testez les liens email de contact
• Vérifiez que les liens des réseaux sociaux fonctionnent
• Vérifiez sur de vrais appareils mobiles si possible

Si quelque chose ne fonctionne pas :

• Copiez et collez les messages d’erreur dans Claude
• Décrivez le problème en langage simple
• Suivez les conseils de Claude pour le corriger
• Si vous êtes bloqué, vous pouvez toujours faire appel à un professionnel - vous aurez déjà une base solide sur laquelle travailler

Votre site web est prêt à être partagé !

Aller plus loin

Ce tutoriel a couvert la construction d’un site web statique - parfait pour des pages simples. Dans de futurs articles de blog, nous explorerons comment aller plus loin en créant des applications web dynamiques avec des fonctionnalités plus complexes.

Restez à l’écoute !

Conclusion

Construire un site web d’événement professionnel ne nécessite pas de compétences en programmation ni d’outils coûteux. Avec l’assistance IA de Claude et l’hébergement gratuit de Netlify, vous pouvez créer et déployer un site magnifique et fonctionnel en moins d’une heure.

La clé est de commencer avec un plan clair, d’utiliser des prompts détaillés avec Claude, et d’itérer en fonction de ce que vous voyez. N’ayez pas peur de demander des modifications à Claude - c’est ce qui rend ce flux de travail si puissant.

Que vous organisiez un salon du tricot, un festival communautaire, que vous créiez un portfolio personnel ou que vous construisiez un site web marketing pour une petite entreprise - cette approche fonctionne pour toute présence web simple. Le résultat est un site web soigné qui répond à vos besoins et atteint votre public.

Prêt à construire votre site web d’événement ? Commencez par définir vos pages et votre contenu, puis ouvrez Claude et commencez à créer !