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 tutorielsLes 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- Astro Web Framework Crash Course par freeCodeCamp
- Astro Crash Course in 20 minutes par Chris Pennington (cours complet payant : Learn Astro)
- Astro 3.0 Crash Course par James Q Quick (cours complet payant : Build Modern Websites with Astro)
- Astro Crash Course in 60 minutes par @developedbyed
- Understanding Astro (ebook) par Ohans Emmanuel
- The Valley of Code - Astro par Flavio Copes
- Learn Astro 3 from Scratch: Course for Beginners + Astro Application (SPANISH) par @midudev
- Introduction au framework web Astro (payant) par Tech Razor sur Udemy
Tutoriels vidéo
Titre de la section Tutoriels vidéo- Astro Quick Start Course: Build an SSR Blog
- How I created a movie application with Astro 3.x
- You may not ACTUALLY understand Content Collections…
- Build a custom blog platform with Astro and Apprwrite
- Astro JS Portfolio Crash Course
- Build a full stack blog with Astro
Recettes et guides
Titre de la section Recettes et guidesRegardez 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 officiellesLes 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.
Vous avez publié un guide pour Astro ? Modifiez cette page et ajoutez votre lien en dessous dans la section appropriée !
Authentication
Titre de la section Authentication- Add GitHub OAuth with Lucia
- Add username and password authentication with Lucia
- Authenticating users in Astro with Clerk and React
- Use a dynamic filename when importing images
- Add an RSS feed to Astro using Storyblok’s stories
- How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS
Editor Tooling
Titre de la section Editor ToolingMarkdown
Titre de la section Markdown- Build a table of contents from Astro’s Markdown headings
- Create a Remark plugin to remove runts from your Markdown files
- Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring
Performance
Titre de la section Performance- Enhance your Astro builds: modify HTML files post-build
- Setting up micro-frontends with Astro
- How to Implement Incremental Static Regeneration (ISR) in Astro
Utilitaires
Titre de la section Utilitaires- Using tRPC in Astro
- Integrating Sentry with Astro
- Generate localized sitemaps for your Astro and Storyblok project
- Add searching to your site with Pagefind
- Add searching to your site with Fuse.js
- Add a comments section to your Astro blog using Giscus
Animation
Titre de la section Animation- Using GreenSock Animation Platform (GSAP) in Astro
- Using GreenSock Animation Platform (GSAP) in Astro with View Transitions
Internationalisation et localisation
Titre de la section Internationalisation et localisation- How to make your Astro website multilingual with Crowdin: Astro localization guide
- Translate routes in Astro for content collections and subpages