Votre atelier IA, du premier prompt au site en ligne

Astro est la boîte à outils qui va fabriquer votre site à partir d'un thème gratuit. Ce site est un exercice : son contenu peut être entièrement inventé. Les crochets [ ] sont à remplacer par vos propres mots.

1. Lancer le projet

   Envoyez ce prompt. L'IA vous proposera trois thèmes et attendra votre réponse avant d'installer quoi que ce soit.

   Rôle : tu es un développeur web expert Astro.
   
   Objectif : créer un nouveau projet Astro directement dans ce dossier (tu peux supprimer test.md), à partir d'un thème gratuit du catalogue officiel astro.build/themes.
   
   Consignes :
   - Propose-moi 3 thèmes gratuits adaptés à mon besoin.
   - Attends ma confirmation avant d'installer quoi que ce soit.
   - Utilise l'outil officiel de création de projet Astro avec le thème choisi.
   - Initialise Git et fais un premier commit.
   - Lance le site en local et donne-moi l'adresse pour le voir.
   - Résume-moi en quelques lignes où se trouvent les pages et le contenu.
   
   Règle : si je ne t'ai pas dit à quoi sert le site, demande-le-moi.

2. Choisir votre thème

   Choisissez parmi les propositions de l'IA ou parcourez astro.build/themes (filtre Free). Répondez-lui sur ce modèle :

   C'est un site fictif pour m'entraîner, sur le thème [un sujet inventé, par exemple : le site vitrine d'une étudiante en communication spécialisée RSE]. J'aime bien le thème [nom du thème], visible ici : [lien du thème].

   Exemple vu en démo : le thème Chalet, qui contient déjà une page d'accueil en sections, une configuration SEO, un sitemap et des pages légales.

3. Remplir le contenu

   Remplis le site avec du contenu fictif, comme s'il s'agissait du site de [un personnage inventé, par exemple : une étudiante en communication spécialisée RSE]. Invente tout : textes, prestations, avis, coordonnées.
   Dis-moi ensuite dans quel fichier le contenu est centralisé.

   Notez le fichier qu'elle vous indique : c'est là que se trouvent vos textes.

4. Changer les images

   Remplace les images de démonstration par des images libres de droits adaptées à [votre sujet] : une image forte pour l'accueil, une image de présentation et quelques images pour la galerie.
   Indique-moi la source de chaque image.

   Uniquement des images libres de droits (Unsplash, Pexels…) ou les vôtres.

5. Adapter les couleurs et les pages légales

   Adapte la palette de couleurs et les styles du thème à une identité [sobre, responsable et contemporaine / vos propres mots]. Garde des contrastes accessibles.
   Mets aussi en français les mentions légales, la politique de confidentialité et le fichier robots.txt.

6. Regarder votre site

   Ouvrez dans votre navigateur l'adresse donnée par l'IA, en général http://localhost:4321.

   Si rien ne s'affiche, demandez-lui : « Relance le site en local et donne-moi l'adresse. » Les dossiers à connaître :

   src/pages

   les pages du site

   src/components

   en-tête, pied de page et sections réutilisables

   src/styles

   couleurs, polices et styles

   public/images

   les images

Ajoute une page « Mes projets » avec trois projets fictifs en lien avec [votre sujet], et ajoute-la au menu du site.

Vérifie que mon site s'affiche bien sur mobile et corrige ce qui ne va pas. Explique-moi ce que tu as changé.

Un commit, c'est un point de sauvegarde sur votre ordinateur. Un push, c'est l'envoi de ces sauvegardes sur GitHub.

1. Enregistrer une version

   Vérifie les fichiers modifiés, crée un commit avec un message clair qui résume les changements, puis confirme-moi que tout est enregistré.

   Refaites-le après chaque modification qui vous plaît.

2. Tester le retour arrière

   Cassez quelque chose exprès pour constater que rien n'est perdu.

   Supprime le menu de navigation du site.

   Vérifiez dans le navigateur que le menu a disparu, puis :

   Annule toutes les modifications depuis le dernier commit.

3. Envoyer votre site sur GitHub

   Crée sur mon compte GitHub un dépôt privé nommé site-[prénom-nom], relie-le à ce dossier et envoie mon site dessus.

Écris un fichier README.md qui présente ce projet en quelques lignes, fais un commit et envoie-le sur GitHub.

On utilise Cloudflare Pages : il récupère votre site sur GitHub et le publie à une adresse en .pages.dev. Ensuite, chaque envoi sur GitHub met le site à jour tout seul. L'interface de Cloudflare est en anglais : les noms des boutons sont indiqués tels quels.

1. Créer votre compte Cloudflare

   Inscrivez-vous gratuitement sur dash.cloudflare.com/sign-up, puis confirmez votre adresse e-mail.

2. Importer votre dépôt GitHub

   Dans le tableau de bord, ouvrez Workers & Pages, cliquez sur Create application, choisissez l'onglet Pages puis Import an existing Git repository (ou Connect to Git). Connectez votre compte GitHub et autorisez l'accès à votre dépôt site-prénom-nom.

   Restez bien sur l'onglet Pages. Si Cloudflare vous demande une « deploy command », vous êtes dans Workers : revenez en arrière.

3. Lancer la publication

   Dans Framework preset, choisissez Astro : les réglages se remplissent tout seuls (vous n'avez rien à taper). Cliquez sur Save and Deploy et patientez une à deux minutes : votre adresse en .pages.dev s'affiche à la fin.

   Un écran vous fait hésiter ? Demandez à l'IA :

   Je publie ce site Astro sur Cloudflare Pages. L'écran me demande [recopiez la question]. Que dois-je choisir ?

4. Donner sa vraie adresse au site

   Mon site est en ligne à l'adresse [votre adresse en .pages.dev]. Remplace l'adresse d'exemple dans la configuration du site par celle-ci, fais un commit et envoie-le sur GitHub.

   Cloudflare republie le site tout seul, en général en une à deux minutes.