Astro Crash Course

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...
⭐ All Courses
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / 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

[@astrodotbuild]

We made it!!! 🥳🥳🥳🥳 What an amazing video, first class as always, Thank you Brad, From Astro with 💚

[@Arabian_Epileptic]

You just got the best endorsement ever 💯 congrats

[@PenguinCrayon269]

Senpai notices

[@TraversyMedia]

Thanks so much! And great job!

[@ahmad-murery]

I really don't use any static website generator, but this was a different story, Well done Astro and Brad 👍

[@harvirreturn]

Make a laravel admin panel management system video , can use packages like filament. Thank you!

[@AlfredAyache]

Caution: if you're following along with version 3.1.0 (or later) of Astro, about 30 minutes when you're doing the Header, the logo won't show up. You have to add `.src` to the logo variable being used in the `src` attribute of the `img` tag. My (very) little contribution. Thanks Brad!

[@Av1234100]

Your answer saved me a lot of time. Thanks a lot!

[@CodeCrafterChannel]

I spent 3 hours on this. Lol. Next time, I'll definitely look into the comments first

[@Breslima]

To add the images to the "Showcase" section

[@fabiorodrigo3638]

Life is strange... We ran away from statics sites in the 2000`s, now we use the power of js to remove js to go back to static pages (and its very good).

[@aaa-my5xy]

kinda like tailwind, we run away from inline styles for decades until people realize that if you tweak how inline styles work just slightly they're really good.

[@XPLoXe]

@@aaa-my5xy I still hate CSS though.

[@TraversyMedia]

One important thing I forgot to mention that you'll probably figure out anyway, is there is an Astro VS Code extension. You'll want to install that for syntax highlighting in Astro components. Hope you enjoy the course!

[@infomax807]

Brad, github link is not working

[@TheAdel136]

hope that one day i will meet you in person and i'll say thanks face to face :)

[@AzraiHasan]

been waiting for this video....!!!! Thanks, Brad..!!!

[@EddyVinck]

90+ minutes of free content, you’re a legend Brad 👏

[@JEsterCW]

The most what I love about Astro is that it reminds me micro frontends, but in this case the "micro frontends" are the components. Idk but it feels amazing to me that you have the possibility to mix other technologies inside it. Micro frontends are smaller web apps in different frameworks/technologies made into one huge web app and thats why Astro reminds me micro frontends and i love it, overall the modern way of making stuff... you have separate components etc... its also lovely when you wanna to work with ur friend who works in different technology or stack or even maybe he doesnt likes some tools ure using, so u still can somehow cooperate together like each other in ur own stack and make it work, obviously it can be tricky, but this is the possibility and i love it.

[@Thomasfrank]

Thanks so much for making this, and for including the API aside even though you weren't planning on using one for the content. I'm just learning Astro and this was extremely helpful.

[@suhaylmuminov3825]

Wow Thomas, didn't know you're into webdev

[@kubakazimierczak6646]

18:16 - another way (instead of opening sublime) is to open new tab in vs code and select HTML as the language, then the Emmet will work

[@nro337]

Incredible tutorial as always, thanks so much Brad!

[@732brudder]

Yes! Been waiting on my favorite youtubers to post about this framework that I've been using for a few months now. Going to love diving into what you say about it.

[@male3399]

What a coincidence, just a few seconds ago, I was wondering if Brad is going to do a crash course for Astro soon, and BOOOOM here's this video that shocks me right away

[@davidbriggs8109]

it shocked me also lol

[@bookable7157]

Been following you for years. Great video as always. Thanks to the Astro team for creating this. Most small local businesses that I work with just want a static site, this really fits the bill.

[@husnulaman]

Just today I was thinking of revamping my portfolio. This is exactly what I needed. Thank you Brad ❤

[@champorado2131]

I hope you do an updated tutorial using ver 3.0

[@TechBuddy_]

I thought I am the only crazy kid using sublime text as a modern notepad replacement but now I see Mr. Traversy himself using it, I'm not that crazy after all. Love your work man. Thank you

[@NiagaraThistle]

I use Sublime for the same...there's at least 3 of us!

[@heguer87]

Thanks Brad, you keep us up to date!!

[@WebDevEducation]

LOVE THIS ❤ thank you for another awesome tutorial! ⚡

[@ceralguy85]

Awesome tutorial with Astro Brad. This technology is very light as powerful for static html. Amazing video as always

[@truthteachers]

Hi Brad, just add "astro' -> "HTML' under "include languages' in vscode built-in emmet extension. Seems to work. Also, need to install the Astro VS Code extension by Astro. Only then the syntax highlighting, file type identification and autocomplete will work.

[@ontheruntonowhere]

Great advice. Works perfectly, ty!

[@codehorror8076]

You don't need the !, so you don't need to do that. Just type: html and it will auto suggest 3 options. Hit the HTML5 one. The same when creating a tag div.card for example. Or am I missing something?

[@XPLoXe]

Thank you so much for this amazing video. It's a 10/10 material.

[@petipois28]

Awesome tutorial - really love your teaching style. Thank you for creating such amazing content.

[@druharper]

Excellent work. Cannot thank you enough. I’m excited to get started 🙂

[@smibssmibs]

Top class tutorial. Definitely worth the time. You provide amazing service. Thanks.

[@janzenfaidiban]

Thank you Brad... You lessons really easy to follow.

[@johncarlosarmiento2666]

Thank you so much! It never cease to amaze me providing useful content!

[@Allformyequine]

So GREAT Brad and Astro YAY!! Thank you so nicely done!! Just luv this and can't wait to try Astro :)

[@patricksmith8262]

Perfect timing! Was planning to start playing with @astro for a new personal project.

[@code_with_sheynet]

Weldone Brad, I just love, thanks for all your have done for me

[@piwi7212]

A real Master gives a little "Masterclass". Thank you Brad. Greetings from Hamburg Germany

[@davitgogidze4310]

As always with high quality and relevant content 🎓 ⚡ 🔥

[@EricShans]

Thanks as always. Planning on using this from now on!

[@dontmindme4009]

Damn Astro is awesome. I like how simple it is

[@girornsveinsson7970]

I would love to see a full course from you about Astro development - I will buy it in a heartbeat!

[@Dameworth]

Awesome tutorial thank you, I might have to try this out some more it's actually really nice for static sites

[@rian438]

Woah! What A nice timing, I am about to gather learning resources about this and suddenly your video notification appear on my screen, What a nice timing.

[@alittlegreyhair1104]

Another great tutorial, thank you Brad

[@robhafemeister3100]

Awesome stuff like always, thanks much Brad

[@Karrnfr]

Thank you for this tutorial Brad 👊🏾🙏🏽

[@CodeLitDev]

A high quality content as always. 🔥

[@yuujin1337]

Just what I needed, thank you sir!

[@jamesgrubb]

Fantastic tut as always. Thank you.

[@slandrei]

You are the best!! Waiting to see more from you. Thanks! :)

[@PeterChapman-py]

Thank you for this tutorial! Astro is pretty great!

[@syberiaok]

Best course ever, thank you so much!!!!

[@trinkel8]

Excellent content Brad!

[@christopheanfry2425]

We’re enjoying thanks. One thing regarding the emmet for the “!” to generate automatically html template. You can start typing html and you select html:5 it generates the same template as the “!”.

[@miranlegin8245]

that is excellent, thanks for the info!

[@johnnymags]

Great tutorial, thank you!

[@thedevnoteyt]

Thank you so much for this 😀

[@-0-__-0-]

Finished the video my guy. Its up and hosted. Thank you so much 😉

[@JamalKhan-dq4nz]

I can't express the way i want to thank you brad sir

[@maskman4821]

Awesome tutorial 😍

[@cmnweb]

Ufff, estaba esperando esto, saludos desde México.

[@youdjparents]

thank you for this course Brad! Request - a tutorial on ArchieML + Astro/Sveltekit? Or some kind of markdown that is more robust with a framework? A lot of editorial people use aml and it can be confusing to get set up

[@Mynameisdidi1997]

Thanks Brad! Hope Astro gets some more attention to generate even more contributions.

[@TraversyMedia]

Same here. I think people just think "great, another framework". But it is so simple and such a great modern way to create static sites

[@CyanidePierce90]

Brilliant course thanks Brad. Would there be the possibility of you doing a followup tutorial of adding to it with a NetlifyCMS (or similar) so we can add pages and blog posts that way?

[@MrBioneto]

Thnaks Brad, it has been usefull. Astro looks amazing!

[@harvirreturn]

If possible please make a react front end for Laravel. This is a nice combination that is not seen often. Naturally, thank you for for all the videos you provide. They are immense help.

[@ChristianKolbow]

Good Job. 😊 @TraversyMedia There is no reason for Fragments in Astro. Only when you map an Array is Fragment recommended or needed.

[@Stowy]

This was very clear, thanks a lot !

[@gbrachetta]

To get emmet working on .astro files (or any, really) just add "emmet.includeLanguages": {"astro": "html"} to your settings.json.

[@it-s-me-mohit]

Awesome stuff Brad as always 😉😉. Apart from blogs what usecases can be there for Astro??

[@damagee8141]

Perfect timing!

[@-0-__-0-]

It gives me back the nostalgic feeling of writing jinja templates😅

[@prodigymuj]

Amazing tutorial Brad! Thank you for sharing this. I did want to point out that the Tabs component doesn't work on Safari but it does on Chrome.

[@prodigymuj]

I built the website and got it hosted on Netlify as well but it's the same result on Safari. The tabs don't work. Not sure what the issue is though

[@ztcanada_1]

@@prodigymuj Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️

[@diego0ji]

Thanks brad🖤

[@AhmedAl-Kurdi]

u are amazing i was just thinking why no one talk about astro thanks

[@tristen_grant]

There are a few channels talking about Astro.

[@pedroserapio8075]

Great video Brad. Cannot say the same about Astro, or in particular the plug-ins that become useless after Astro 1.0.0 went out. Staying with Gatsby for now.

[@jeremyhorne6244]

Agreed. Astro is pretty terrible.

[@riveralonzo]

at around 26 minutes when the css is applied, my hello world did not center and it was driving me crazy. I watched step by step twice and reviewed the css, but I ended up just added a text-align: center style. Also, awesome tutorial. Excited to be learning this while I finish up school and go into a dev position next summer.

[@Helix_22]

in the style sheet, check for h1, h2 { text-align: center; } Make sure to place it above the @meda and .element tags, just place it right below the other style section for the h1/2 classes.

[@riccardoguitar]

A wonderful video again, always a first class content!! I'm wondering if there is a guide to use md files to dynamically fill html tags as you do in the video. I'm searching with a lot of key words but nothing comes up, do you have any suggestion to go deep on this topic? I'd like to see if it could be a nice solution for small personal sites, before to use a headless cms to fetch the data.

[@galinahappy6919]

Большое Вам спасибо 🙏

[@paulehrig6414]

Excellent video!!! Question/Issue: > when I run the 'npm run build' command > i don't get a useable dist directory > How do I get a directory like astro-website-theme on your githb ?>? Thanks ahead of time for your help!

[@Helix_22]

I really enjoyed this guide, and it is honestly making it painful to find and watch other Astro videos due to the lack of foresight. You've always seem to bring that into the guides. Do you have any more Astro projects or guides in the pipeline? I really do hope you make some more begginer friendly guides on Astro.

[@rolf-s]

An Astro SSR-only video/tutorial would be cool! 👍(To see the possibilities)

[@DC-xt1ry]

Another priceless jewel!

[@lakshitsagar6299]

Dude, I didn't even knew that something this powerful also existed....It has so much to explore🔥🔥🔥🔥🔥🔥.....If astro is so useful then why it is not popular than react and other frameworks...??

[@julianvelez6563]

Nice work bro

[@benacker8525]

Hey Brad, great video. You can disable postCSS extension for prettier formatting and autocomplete in css files. I had the same issue and it was driving me nuts

[@codingprograms2078]

Savage 🔥 ...tabnine and co-pilot do get a annoying but helpful.. Conundrum🤣

[@cabanford]

Hey Brad - you should run lighthouse, at the end of your video, to show how your Astro site does...

[@wusswuzz5818]

I think you can re-enable emmet in newer versions of vscode, but the new way is just to start typing "html" and a list of options will appear one of which is "html:5"

[@devchabek8728]

Thank you !

[@chronosceptor]

thanks Brad this was fun

[@aaromnido]

WoW!! Such a fantastic tutorial!! You make it a piece of cake, man! Sorry, may you share the initial HTML files? In this way, we'll can follow and reproduce the tutorial step by step. Many thanks, Brad! :)

[@zoro9878]

Brad, you are awesome!

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@dreamisover9813]

Thanks for another amazing tutorial! I wanted to mention that the link in the description doesn't lead me to the github repository, it has the 2 dots from the link verbatim. I had to go to your github to click on the repo

[@codehorror8076]

I didn't even know about copilot. I just installed it as I'm following along and damn this is amazing. Edit: Now I want to remove it because it's genuinely scaring me lol

[@naveenbelandur7269]

Hi Brad I have been following your videos from past months as i am a newbie to web development i have a doubt , the crash course you have made on react express dom are they covered most part of the topics or only the main things or basic

[@CraigClayton-bk3ze]

Hi Brad, great video as always, could you do a vieo on Solidjs

[@HelliosChannel]

Thanks !

[@JamesQQuick]

Amazing!!

[@blessdarah1256]

If Brad says he's impressed then know that's the way to go!

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@kimbapslayer1995]

Looks fun. I find it so funny that I can't really stand the look of gigantic CSS files anymore ever since I started using tailwind lol

[@rajeshag7884]

Thank you

[@PeterFelis]

hai Brad, is Astro not like sveltekit? I see lot's of similaries. And, thanks for the video. You are a real good instructor.

[@lpanebr]

Great content, thank you! At 21:55 what's the advantage of setting the interface for the props? Sorry if you answer that later. I'll keep watching but just didn't want to forget.

[@lpanebr]

Ah, one thing is to enable the optional/require validation on vs code.

[@jaspreetmaan121]

we went from loading js with html to loading html with js to generate html with js and back to loading js in html. Now we will repeat this cycle again with web assembly and pyscript.

[@SilvaOnTube]

I love all of Brad's tutorials. They're awesome! At 26:45 here, I couldn't get the styles to take effect. "Hello World" remained on the left margin and did not center. I can't find what I missed.

[@tifking73]

I'm having the same problem. Did you find a fix to this?

[@SilvaOnTube]

@@tifking73 Not yet. I moved on to another tutorial. The problem is that the final repo is nothing like the process along the way. I have to start it all over again and go step by step. My plan is to create a github repo (private to start) and make tiny steps with commits at each step as something works. I'll come back and let you know what I find out.

[@tifking73]

@@SilvaOnTube Thanks for the update!

[@SilvaOnTube]

@@tifking73 I'm doing it all slowly and making commits at every code advance. The first thing I notice is that his server updates automatically. You can see the styling take effect immediately when he changes the name from style.css to global.css. I have to kill my server and restart it on almost every saved code change. And still, even with the right name for the css file, none of the styling is taking effect for me. Even if I copy the styles/global.css file from his repo it does not center the Hello World h1 element in the "Hello World". Is nobody else having this problem?

[@tifking73]

@@SilvaOnTube I did everything for the website. Everything worked for me but the global style sheet. I am going to troubleshoot it for a while; I will move on to another project if it does not work soon. I will let you know if I find a solution.

[@alwayssomewhere716]

you are the best

[@Daaboo]

O M G why have i spent so much time trying to learn React when Astro make its 10x simpler!

[@Zagoorland]

Amazing! BTW which vs code theme do you use? :)

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...