Contenu éducatif communautaire

Il y a beaucoup d’autres choses qui peuvent vous aider à apprendre et à construire avec Astro ! Voici quelques contenus éducatifs produits et maintenus par la communauté Astro.

Tous les liens sont externes et peuvent être basés sur des versions antérieures d’Astro. Veillez à vérifier la date de tout contenu communautaire et à l’adapter à votre projet en conséquence.

Pour plus de contenu éducatif sur Astro, consultez le blog Astro ou inscrivez-vous à la lettre d’information officielle d’Astro où nous récapitulons le meilleur contenu communautaire de chaque mois.

Cours et tutoriels

Titre de la section Cours et tutoriels

Les cours et les tutoriels sont axés sur l’enseignement de nouveaux concepts, souvent accompagnés d’exercices ou d’exemples de projets à réaliser. Ils constituent un excellent moyen d’apprendre de nouveaux concepts et vous donnent les outils dont vous avez besoin pour travailler sur votre propre projet Astro.

Consultez les cours et tutoriels suivants pour en savoir plus sur Astro.

Tutoriels d’introduction

Titre de la section Tutoriels d’introduction

• Cours accéléré sur le framework web Astro (en) par freeCodeCamp
• Cours accéléré d’Astro en 20 minutes (en) par Chris Pennington (cours complet payant : Apprenez Astro (en))
• Cours accéléré Astro 3.0 (en) par James Q Quick (cours complet payant : Créez des sites web modernes avec Astro (en))
• Cours accéléré d’Astro en 60 minutes (en) par @developedbyed
• Comprendre Astro (ebook) (en) par Ohans Emmanuel
• The Valley of Code - Astro (en) par Flavio Copes
• Apprenez Astro 3 à partir de zéro : Cours pour débutants + application avec Astro (es) par @midudev
• Introduction au framework web Astro (en) (payant) par Tech Razor sur Udemy

Tutoriels vidéo

Titre de la section Tutoriels vidéo

• Cours de démarrage rapide Astro : Créer un blog SSR (en)
• Comment j’ai créé une application de film avec Astro 3.x (en)
• Vous ne comprenez peut-être pas VRAIMENT les collections de contenu… (en)
• Créez une plateforme de blog personnalisée avec Astro et Apprwrite (en)
• Cours accéléré : créez un portfolio en apprenant AstroJS (en)
• Créer un blog full stack avec Astro (en)
• Cours sur Astro, Générateur de sites web statiques (es)

Recettes et guides

Titre de la section Recettes et guides

Regardez des exemples guidés d’ajout de fonctionnalités à votre projet Astro, soumis par les membres de notre communauté !

Ressources officielles

Titre de la section Ressources officielles

Les ressources officielles d’Astro sont des guides pratiques courts et ciblés qui guident le lecteur dans la réalisation d’un exemple fonctionnel d’une tâche spécifique. Les ressources sont un excellent moyen d’ajouter de nouvelles fonctionnalités ou de nouveaux comportements à votre projet Astro en suivant des instructions étape par étape !

• Installation d'un plugin Vite ou Rollup

  Découvrez comment vous pouvez importer des données YAML en ajoutant un plugin Rollup à votre projet.

• Créer un composant image personnalisé

  Apprendre à construire un composant image personnalisé qui supporte les requêtes média en utilisant la fonction getImage.

• Construire des formulaires avec des routes API

  Apprendre à utiliser JavaScript pour envoyer les soumissions de formulaires à une route API.

• Créer des formulaires HTML dans Astro Pages

  Apprenez à construire des formulaires HTML et à gérer les soumissions dans votre frontmatter.

• Utiliser Bun avec Astro

  Apprenez à utiliser Bun avec votre site Astro.

• Appeler des points de terminaison à partir du serveur

  Apprendre à appeler des points de terminaison à partir du serveur dans Astro.

• Vérifier un Captcha

  Apprenez à créer une route API et à la récupérer auprès du client.

• Construisez votre site Astro avec Docker

  Apprendre à construire votre site Astro en utilisant Docker.

• Importer dynamiquement des images

  Apprenez à importer dynamiquement des images en utilisant la fonction import.meta.glob de Vite.

• Ajouter des icônes aux liens externes

  Apprendre à installer un plugin rehype pour ajouter des icônes aux liens externes dans vos fichiers Markdown.

• Ajouter des fonctionnalités i18n

  Utilisez le routage dynamique et les collections de contenu pour ajouter un support d'internationalisation à votre site Astro.

• Créer une application pour la barre d'outils de développement

  Apprenez à créer une application dans la barre d'outils de développement pour votre site.

• Ajouter l'heure de la dernière modification

  Construire un plugin Remark pour ajouter l'heure de la dernière modification à votre Markdown et MDX.

• Ajout du temps de lecture

  Construire un plugin remark pour ajouter le temps de lecture à vos fichiers Markdown ou MDX.

• Partage d'État

  Apprenez à partager l'état entre les composants du framework avec les Nano Stores.

• Partage d'état entre composants Astro

  Apprendre à partager des états entre composants Astro avec Nano Stores.

• Utilisation de la diffusion en continu pour améliorer les performances des pages

  Apprendre à utiliser la diffusion en continu pour améliorer les performances des pages.

• Styliser le rendu Markdown avec la typographie Tailwind

  Apprenez à utiliser @tailwind/typography pour styliser votre rendu Markdown.

Ajoutez la vôtre !

Vous avez publié un guide pour Astro ? Modifiez cette page et ajoutez votre lien en dessous dans la section appropriée !

CSS

Titre de la section CSS

• Utiliser UnoCSS dans Astro (en)
• Ajoutez un mode sombre à Astro avec Tailwind CSS (en)
• Utiliser Bootstrap avec Astro (en)

Authentication

Titre de la section Authentication

• Ajouter GitHub OAuth avec Lucia (en)
• Ajoutez l’authentification par nom d’utilisateur et mot de passe avec Lucia (en)
• Authentifier les utilisateurs dans Astro avec Clerk et React (en)

RSS

Titre de la section RSS

• Utiliser un nom de fichier dynamique lors de l’importation d’images (en)
• Ajoutez un flux RSS à Astro en utilisant les histoires de Storyblok (en)
• Comment envoyer des données à votre flux RSS ? Un guide avec Astro + RSS (en)

Images

Titre de la section Images

• Ajoutez des images d’articles de blog à votre flux RSS Astro (en)
• Générer des images Open Graph pour un blog Astro (en)

Editor Tooling

Titre de la section Editor Tooling

• Faites fonctionner VSCode, ESLint et Prettier avec Astro (en)
• Intégrez Prettier avec Astro et Tailwind CSS (en)

Markdown

Titre de la section Markdown

• Créez une table des matières à partir des titres Markdown d’Astro (en)
• Créez un plugin Remark pour supprimer les veuves et orphelines de vos fichiers Markdown (en)
• Configurer efficacement les brouillons de pages dans Astro avec la création de contenu basée sur la configuration (en)

Performance

Titre de la section Performance

• Améliorez vos builds Astro : modifiez les fichiers HTML après la construction (en)
• Mise en place de micro-frontends avec Astro (en)
• Comment implémenter la régénération statique incrémentielle (ISR) dans Astro (en)

Utilitaires

Titre de la section Utilitaires

• Utiliser tRPC dans Astro (en)
• Intégration de Sentry avec Astro (en)
• Générez des plans de site localisés pour votre projet Astro et Storyblok (en)
• Ajoutez un champs de recherche à votre site avec Pagefind (en)
• Ajoutez un champs de recherche à votre site avec Fuse.js (en)
• Ajoutez une section de commentaires à votre blog Astro en utilisant Giscus (en)
• Création d’un composant de pagination avec Astro (en)

Animation

Titre de la section Animation

• Utilisation de la plateforme d’animation GreenSock (GSAP) dans Astro (en)
• Utilisation de la plateforme d’animation GreenSock (GSAP) dans Astro avec les Transitions de Vues (en)

Internationalisation et localisation

Titre de la section Internationalisation et localisation

• Comment rendre votre site Astro multilingue avec Crowdin : guide de localisation Astro (en)
• Traduire des routes dans Astro pour les collections de contenu et les sous-pages (en)

Astro DB

Titre de la section Astro DB

• Création d’un livre d’or avec Astro DB (en)
• Comment construire un compteur de vues avec Astro DB (en)