Astro Crash Course
Vložit
- čas přidán 2. 05. 2024
- 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 - Věda a technologie
We made it!!! 🥳🥳🥳🥳
What an amazing video, first class as always,
Thank you Brad,
From Astro
with 💚
You just got the best endorsement ever 💯 congrats
Senpai notices
Thanks so much! And great job!
I really don't use any static website generator, but this was a different story,
Well done Astro and Brad 👍
Make a laravel admin panel management system video , can use packages like filament. Thank you!
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!
Your answer saved me a lot of time. Thanks a lot!
I spent 3 hours on this. Lol. Next time, I'll definitely look into the comments first
To add the images to the "Showcase" section
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!
Brad, github link is not working
hope that one day i will meet you in person and i'll say thanks face to face :)
been waiting for this video....!!!! Thanks, Brad..!!!
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).
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.
@@aaa-my5xy I still hate CSS though.
90+ minutes of free content, you’re a legend Brad 👏
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.
Incredible tutorial as always, thanks so much Brad!
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.
Wow Thomas, didn't know you're into webdev
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.
Just today I was thinking of revamping my portfolio. This is exactly what I needed. Thank you Brad ❤
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.
Thanks Brad, you keep us up to date!!
Perfect timing! Was planning to start playing with @astro for a new personal project.
LOVE THIS ❤ thank you for another awesome tutorial! ⚡
Awesome tutorial with Astro Brad. This technology is very light as powerful for static html. Amazing video as always
Thank you so much! It never cease to amaze me providing useful content!
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.
As always with high quality and relevant content 🎓 ⚡ 🔥
Awesome tutorial - really love your teaching style. Thank you for creating such amazing content.
So GREAT Brad and Astro YAY!! Thank you so nicely done!! Just luv this and can't wait to try Astro :)
Excellent work. Cannot thank you enough. I’m excited to get started 🙂
Weldone Brad, I just love, thanks for all your have done for me
Awesome tutorial thank you, I might have to try this out some more it's actually really nice for static sites
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
it shocked me also lol
A real Master gives a little "Masterclass". Thank you Brad. Greetings from Hamburg Germany
I would love to see a full course from you about Astro development - I will buy it in a heartbeat!
Another great tutorial, thank you Brad
Thank you Brad... You lessons really easy to follow.
Top class tutorial. Definitely worth the time. You provide amazing service. Thanks.
Thanks as always. Planning on using this from now on!
Fantastic tut as always. Thank you.
Excellent content Brad!
Just what I needed, thank you sir!
Awesome stuff like always, thanks much Brad
Thank you for this tutorial Brad 👊🏾🙏🏽
Thank you so much for this 😀
Great tutorial, thank you!
Awesome tutorial 😍
Thank you for this tutorial! Astro is pretty great!
Damn Astro is awesome. I like how simple it is
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
I use Sublime for the same...there's at least 3 of us!
I hope you do an updated tutorial using ver 3.0
Best course ever, thank you so much!!!!
I can't express the way i want to thank you brad sir
Perfect timing!
You are the best!! Waiting to see more from you. Thanks! :)
A high quality content as always. 🔥
Finished the video my guy. Its up and hosted. Thank you so much 😉
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
Thanks brad🖤
This was very clear, thanks a lot !
Thanks Brad!
Hope Astro gets some more attention to generate even more contributions.
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
Ufff, estaba esperando esto, saludos desde México.
Thank you so much for this amazing video. It's a 10/10 material.
Thnaks Brad, it has been usefull. Astro looks amazing!
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 “!”.
that is excellent, thanks for the info!
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.
thanks Brad this was fun
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?
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
Awesome stuff Brad as always 😉😉. Apart from blogs what usecases can be there for Astro??
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.
Another priceless jewel!
Thank you !
Good Job. 😊
@TraversyMedia There is no reason for Fragments in Astro. Only when you map an Array is Fragment recommended or needed.
u are amazing i was just thinking why no one talk about astro thanks
There are a few channels talking about Astro.
Amazing!!
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.
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
@@prodigymuj Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️
To get emmet working on .astro files (or any, really) just add "emmet.includeLanguages": {"astro": "html"} to your settings.json.
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.
Great advice. Works perfectly, ty!
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?
An Astro SSR-only video/tutorial would be cool! 👍(To see the possibilities)
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"
It gives me back the nostalgic feeling of writing jinja templates😅
Thanks !
Brad, you are awesome!
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️..
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...??
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
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.
Agreed. Astro is pretty terrible.
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.
Nice work bro
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!
Большое Вам спасибо 🙏
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
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.
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.
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
Thank you
Savage 🔥 ...tabnine and co-pilot do get a annoying but helpful.. Conundrum🤣
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
If Brad says he's impressed then know that's the way to go!
Helpline 📲📩
QUESTIONS CAN COME IN☝️⬆️ ⬆️...
Hey Brad - you should run lighthouse, at the end of your video, to show how your Astro site does...
hai Brad, is Astro not like sveltekit? I see lot's of similaries. And, thanks for the video. You are a real good instructor.
Hi Brad, great video as always, could you do a vieo on Solidjs
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! :)
you are the best
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
I was having trouble with my blog posts frontmatter not being read. I read through the Astro Docs and seen theirs was enclosed in “ “ and that is what I had to do to make it work. So it would be title: “Your title” and so on. You didn’t seem to have to do that on yours but it wouldn’t work for me till I went back and put everything in parentheses.
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.
Does anyone know Brad's exact theme and settings for having things colourized as he has them? Mine are slightly different and I want to copy him.
What is the VSCode extension that shows up at 12:21 that suggests / completes your styling?
Make a laravel admin panel management system video , can use packages like filament. Thank you!