Créer un petit site avec Cursor, Astro et Tailwind : tutoriel débutant

Créer un petit site avec l’IA est devenu beaucoup plus accessible.

Vous pouvez aujourd’hui installer Cursor, lui expliquer votre activité en français et lui demander de construire ou modifier les différentes parties de votre site.

Mais avant de commencer, il faut tout de même préparer un petit environnement de travail.

Dans ce tutoriel, nous allons installer :

• Cursor, l’éditeur dans lequel vous allez travailler avec l’IA ;
• Node.js, nécessaire pour faire fonctionner les outils du projet ;
• Astro, qui servira de base au site ;
• Tailwind CSS, qui permettra de gérer facilement l’apparence du site.

L’objectif n’est pas de vous apprendre à devenir développeur.

À la fin, vous aurez simplement un petit site qui fonctionne sur votre ordinateur et que vous pourrez commencer à modifier avec Cursor.

1. Installer Cursor

Cursor ressemble à un éditeur de code classique, mais il intègre directement un agent IA capable de lire votre projet et de modifier les fichiers pour vous.

Commencez par télécharger Cursor depuis son site officiel :

cursor.com/download

Installez-le comme n’importe quel autre programme puis ouvrez-le.

Vous devrez créer un compte ou vous connecter.

Pour le moment, laissez Cursor ouvert. Nous allons d’abord préparer ce dont notre site a besoin.

2. Installer Node.js

Astro a besoin de Node.js pour fonctionner.

Vous n’avez pas besoin de comprendre précisément ce qu’est Node.js pour suivre ce tutoriel.

Considérez-le simplement comme un élément nécessaire au fonctionnement de notre environnement.

Rendez-vous sur :

nodejs.org

Téléchargez de préférence la version indiquée comme LTS.

LTS signifie qu’il s’agit d’une version maintenue sur la durée. C’est généralement le choix le plus simple lorsque l’on débute.

Installez Node.js avec les options proposées par défaut.

3. Vérifier que Node.js fonctionne

Ouvrez maintenant Cursor.

Dans le menu de Cursor, ouvrez un terminal :

Terminal → New Terminal

Une zone dans laquelle vous pouvez écrire des commandes apparaît en bas de la fenêtre.

Tapez :

node -v

Puis appuyez sur Entrée.

Vous devriez obtenir quelque chose ressemblant à :

v24.x.x

Le numéro exact peut être différent.

Vérifiez ensuite npm :

npm -v

Si les deux commandes affichent un numéro de version, vous êtes prêt pour la suite.

4. Créer votre projet Astro

Choisissez maintenant l’endroit où vous voulez créer votre site.

Par exemple, vous pouvez vous placer dans votre dossier Documents.

Dans le terminal, lancez :

npm create astro@latest mon-site

mon-site est simplement le nom du dossier qui sera créé.

Vous pouvez le remplacer par le nom de votre projet :

npm create astro@latest site-serrurerie

ou :

npm create astro@latest mon-activite

Astro va ensuite vous poser quelques questions.

Si vous débutez et que vous voulez simplement créer un petit site vitrine, restez simple. Il n’est pas nécessaire d’ajouter dix technologies dès le départ.

Une fois l’installation terminée, entrez dans le dossier :

cd mon-site

Remplacez évidemment mon-site par le nom que vous avez choisi.

5. Installer Tailwind CSS

Nous pouvons maintenant ajouter Tailwind CSS.

Toujours dans le terminal :

npx astro add tailwind

Astro va vous demander l’autorisation d’installer et de modifier quelques éléments du projet.

Acceptez.

Tailwind est maintenant relié à Astro.

Pourquoi l’utiliser ?

Principalement parce qu’il permet de demander facilement à Cursor des choses comme :

Fais le bouton plus grand, avec des coins arrondis et davantage d’espace.

ou :

Sur téléphone, mets les éléments les uns sous les autres.

Vous n’avez pas besoin de mémoriser toutes les classes Tailwind pour commencer.

Cursor peut justement s’en charger.

6. Ouvrir le projet dans Cursor

Si vous avez créé votre projet depuis un autre terminal, ouvrez maintenant son dossier dans Cursor :

File → Open Folder

Choisissez le dossier de votre site.

Vous devriez voir plusieurs fichiers et dossiers apparaître dans la colonne de gauche.

Parmi eux, vous trouverez notamment quelque chose comme :

src/
  pages/
    index.astro

index.astro correspond à votre page d’accueil.

Vous pourriez maintenant modifier le fichier vous-même.

Mais ce n’est justement pas ce qui nous intéresse ici.

7. Demander à Cursor de créer votre première page

Ouvrez l’Agent de Cursor et expliquez simplement ce que vous voulez.

Par exemple :

Je crée le site d’un électricien indépendant à Bruxelles. Je veux une page d’accueil simple et professionnelle. Elle doit présenter son activité, trois services, sa zone d’intervention et un bouton pour le contacter. Le site doit être agréable sur ordinateur et sur téléphone. Utilise Astro et Tailwind déjà présents dans le projet.

Laissez ensuite Cursor examiner le projet et proposer les modifications.

Lisez ce qu’il veut faire avant de l’accepter.

Même lorsque vous travaillez avec une IA, évitez de répondre automatiquement oui à tout.

Vous restez responsable du résultat.

8. Voir votre site

Une fois votre première page créée, lancez :

npm run dev

Le terminal devrait afficher une adresse ressemblant à :

http://localhost:4321

Ouvrez cette adresse dans votre navigateur.

Votre site est maintenant visible sur votre ordinateur.

Il n’est pas encore publié sur Internet.

Mais vous pouvez déjà le modifier.

9. Modifier le site simplement avec l’IA

C’est ici que Cursor devient intéressant pour quelqu’un qui ne sait pas coder.

Vous pouvez continuer à écrire des demandes normales.

Par exemple :

Remplace le titre par « Votre électricien à Bruxelles et alentours ».

Puis :

Ajoute une section avec trois services : dépannage, rénovation électrique et mise en conformité.

Puis :

Le site paraît trop froid. Utilise des tons plus chaleureux tout en gardant un aspect professionnel.

Ou encore :

Vérifie l’affichage sur téléphone et corrige ce qui ne fonctionne pas bien.

Vous travaillez progressivement.

Une demande, une vérification, puis la suivante.

C’est beaucoup plus sûr que de demander immédiatement :

Fais-moi tout mon site.

10. Ajouter des instructions permanentes à Cursor

Il reste cependant un problème.

Cursor ne connaît pas forcément vos règles de projet.

Vous pouvez lui dire aujourd’hui :

Pense toujours au mobile.

Puis lui demander dix modifications différentes et constater plus tard qu’un élément fonctionne mal sur téléphone.

Vous pouvez aussi lui demander une nouvelle page sans penser à lui parler :

• du SEO ;
• de l’accessibilité ;
• des métadonnées ;
• de la navigation ;
• des liens cassés ;
• des performances ;
• de la sécurité ;
• de la cohérence avec les autres pages.

C’est là qu’un fichier comme AGENTS.md devient particulièrement intéressant.

Créez un fichier nommé :

AGENTS.md

à la racine du projet.

Vous pouvez y écrire des instructions permanentes pour l’agent.

Par exemple :

# Instructions du projet

- Le site est destiné à des personnes non techniques.
- Utiliser Astro et Tailwind.
- Garder le code simple.
- Toujours vérifier l'affichage mobile.
- Ne pas ajouter de dépendance sans nécessité.
- Garder une navigation claire.
- Vérifier les liens après une modification.
- Utiliser des titres et descriptions compréhensibles.

Cursor sait utiliser AGENTS.md comme fichier d’instructions du projet.

Cela évite de devoir répéter les mêmes règles dans chaque conversation.

Le vrai travail commence ici

À ce stade, vous avez un environnement fonctionnel :

Cursor
   ↓
Astro
   ↓
Tailwind
   ↓
Votre site

Et vous pouvez déjà construire énormément de choses en décrivant simplement ce que vous souhaitez.

Mais installer les outils n’est finalement que la partie facile.

Le plus difficile est de savoir ce qu’il faut demander à l’IA et surtout ce qu’elle ne doit pas oublier.

Un débutant ne pense pas forcément à demander :

Vérifie le canonical de cette page.

Il ne sait peut-être même pas ce qu’est un canonical.

Et ce n’est pas grave.

Il ne devrait pas avoir besoin de devenir spécialiste du SEO, de l’accessibilité, d’Astro ou de Tailwind simplement pour mettre le site de sa petite activité en ligne.

Vous voulez éviter toute cette préparation ?

C’est précisément pour cela que j’ai créé le Starter Kit.

Au lieu de commencer par un projet Astro vide et de configurer vous-même toute la base, vous recevez un projet déjà préparé pour travailler avec Cursor et l’IA.

Le kit contient notamment :

• un petit site vitrine déjà structuré ;
• Astro et Tailwind déjà préparés ;
• un parcours expliqué étape par étape ;
• les instructions pour ouvrir et modifier le projet avec Cursor ;
• les étapes pour aller jusqu’à la mise en ligne ;
• et surtout un AGENTS.md préparé pour un débutant.

Ce fichier ne sert pas seulement à dire à l’IA quelle technologie utiliser.

Il lui donne le cadre technique que vous ne devriez pas avoir à connaître vous-même : structure, responsive, SEO, accessibilité, navigation, performances, sécurité et vérifications à effectuer lorsqu’elle modifie le projet.

Le principe est simple :

vous lui expliquez votre activité et ce que vous voulez. Le projet aide l’IA à prendre soin du reste.

Vous pouvez donc parfaitement suivre ce tutoriel et construire votre environnement vous-même.

Si vous préférez commencer directement avec la base déjà préparée, le Starter Kit est fait pour ça.

Voir le Starter Kit