Dive into a comprehensive crash course on the Astro web framework, designed for beginners. Learn to create fast, content-focused websites such as landing pages, blogs, and technical documentation. Explore key concepts including project creation, components, file-based routing, CSS integration, and VS Code setup. Master Tailwind implementation, site layout updates, and working with Markdown and Content Collections. Discover how to query and display blog posts, create dynamic routes, optimize images, and utilize the ViewTransitions API. Gain hands-on experience with MDX support, deployment to Netlify and Vercel, enabling Server-Side Rendering (SSR), and implementing Astro Server Endpoints. By the end of this 1-2 hour tutorial, acquire the skills to build and deploy both static and server-rendered Astro websites.
Overview
Syllabus
⌨️ Intro
⌨️ What We'll Cover
⌨️ Creating an Astro Project
⌨️ Astro Overview components, file based routing, css, and more
⌨️ Astro Setup in VS Code
⌨️ Setting Up Tailwind
⌨️ Updating the Site Layout
⌨️ Working with Markdown and Content Collections
⌨️ Querying and Displaying Blog Posts Using Content Collections
⌨️ Creating Dynamic Routes For Individual Blog Posts
⌨️ Tailwind Typography Plugin
⌨️ Optimizing Images
⌨️ Using the ViewTransitions API
⌨️ Adding Support for MDX
⌨️ Deploy to Netlify and Vercel
⌨️ Enabling SSR in Astro
⌨️ Astro Server Endpoints
⌨️ Deploying SSR to Netlify and Vercel
⌨️ Wrap Up
Taught by
freeCodeCamp.org
