Uploaded August 2022 | Updated September 2026, 2 weeks ago
Astro is an amazing static site generator that allows you to build really fast websites with little to no production JavaScript. You can use Astro components as we all have components from other frameworks such as React, Vue and Svelte.
TIP: I forgot to mention there is a VS Code extension called "Astro". Use it for syntax highlighting.
💻 Github Repo:
github.com/bradtraversy/astro-crash-course
⭐ All Courses
traversymedia.com
💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro / What Is Astro?
3:20 - Project Demo
6:20 - Create A New Astro Project
7:50 - Folder Structure
10:19 - Run Dev Server & Prepare
11:18 - Astro Components
16:00 - Making a Request - Top Level Async
17:13 - Create A Layout
20:29 - Passing Props
23:17 - Start Project / Global Styling
26:53 - Header Component
31:38 - React Integration
37:10 - Showcase Component
43:18 - Features & Card Components
49:34 - Dynamic Classes - Dark Card
51:40 - Page Content & Tabs Component
1:03:28 - Footer Component
1:05:19 - About Page
1:08:37 - Refactor Card Component
1:10:53 - Blog Page & Markdown Files
1:18:44 - Fetching Markdown FIles
1:20:57 - Blog Showcase Component
1:22:50 - Single Post Page / getStaticPaths()
1:29:35 - Build Static Assets
1:30:40 - Deploy To Netlify
Astro is an amazing static site generator that allows you to build really fast websites with little to no production JavaScript. You can use Astro components as we all have components from other frameworks such as React, Vue and Svelte.
TIP: I forgot to mention there is a VS Code extension called "Astro". Use it for syntax highlighting.
💻 Github Repo:
github.com/bradtraversy/astro-crash-course
⭐ All Courses
traversymedia.com
💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
Timestamps:
0:00 - Intro / What Is Astro?
3:20 - Project Demo
6:20 - Create A New Astro Project
7:50 - Folder Structure
10:19 - Run Dev Server & Prepare
11:18 - Astro Components
16:00 - Making a Request - Top Level Async
17:13 - Create A Layout
20:29 - Passing Props
23:17 - Start Project / Global Styling
26:53 - Header Component
31:38 - React Integration
37:10 - Showcase Component
43:18 - Features & Card Components
49:34 - Dynamic Classes - Dark Card
51:40 - Page Content & Tabs Component
1:03:28 - Footer Component
1:05:19 - About Page
1:08:37 - Refactor Card Component
1:10:53 - Blog Page & Markdown Files
1:18:44 - Fetching Markdown FIles
1:20:57 - Blog Showcase Component
1:22:50 - Single Post Page / getStaticPaths()
1:29:35 - Build Static Assets
1:30:40 - Deploy To Netlify
