Astro Quick Start Course | Build an SSR Blog

Подписаться 2,2 млн

Просмотров 49 тыс.

50% 1

In this course, you will learn the fundamentals of the Astro web framework while building a server-side rendered (SSR) tech blog.
Final Code:
github.com/bradtraversy/astro...
Course Page:
www.traversymedia.com/astro-q...
Become a Traversy Media Member:
www.traversymedia.com/offers/...
Use the promo TRAVERSYMEMBER to get the first 3 months for $15 per month.
Timestamps:
0:00 - Intro
3:32 - What Is Astro?
7:35 - Install & Setup
12:27 - Pages Folder & Routing
17:26 - Image Component
24:58 - Component Script
29:06 - Layout & Slots
36:45 - Component Props
39:31 - Using Constants
42:52 - Navbar & Footer Components
46:51 - Custom 404 Page
51:18 - Collections & Markdown
55:27 - Collection Schema
58:17 - Querying Collections
01:07:02 - Format & Sort By Date
01:12:36 - Article Card Component
01:15:52 - Homepage Articles
01:25:08 - Most Recent Article
01:31:11 - Slug & getStaticPaths
01:37:12 - SSR Config & Single Article
01:47:30 - Tags Component
01:53:18 - Tag Page
01:59:34 - Footer Tags
02:04:29 - Search Page
02:16:15 - API Endpoints
02:25:55 - Pagination Component
02:34:05 - Disable Prev & Next
02:39:36 - Vercel Deployment

Наука

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

@adamkarafyllidis9264 Месяц назад

The friendliest and most familiar voice of web development :)

@siphosethudlomo 26 дней назад

Thanks Brad, Just finished the tutorial using Astro v4.8.6 and everything still works as expected.

@ashimov1970 2 месяца назад

Brad, you are the best front-end development tutor out there on RU-vid. God bless

@SpacemanSpiff9406 6 месяцев назад

Brad... you bring an ease, joy, and certain affability to a complicated field that might not otherwise have it without your presence. Thank you for your time and generosity.

@AustroPower 6 месяцев назад

Thank you Brad for all the free knowledge and work you put in 👍🙏💯

@webdevluc 6 месяцев назад

Great crash course Brad. Thanks for making it available for free. Astro looks like the next big thing in web dev

@tiscover 6 месяцев назад

Another great course Brad! I really like the simplicity of Astro

@lacikawiz8369 4 месяца назад

Awesome tutorial! Thank you for making it available on RU-vid!

@ceralguy85 3 месяца назад

As always Brad, thank you for sharing this great content. This is one of the best tech channels to learn different technologies

@felipefs106 6 месяцев назад

Great content and thanks!. I've been using Astro myself and really like it. I usually avoid jumping on new tech bandwagons but Astro looks quite interesting, it gives you structure for a basic website and also gives you choices if you want to build a more robust app

@isaacorraiz4362 3 месяца назад

I just finished. Very nice course Brad. Thanks for everything you do. For me you are the best of the best.

@pedrotski 5 месяцев назад

Discovered Astro a few days ago. Great course and thanks for releasing it for free.

@davidwashington7293 2 месяца назад

Thank you so much for this course and for all the other courses you share to the dev community. Best intro to Astro I've seen out there yet. Really appreciate everything you do for us. 🚀

@alnm951 6 месяцев назад

Thanks for making the course free Brad!

@lakshyarajdash 3 месяца назад

Amazingly explained each and every concept. I was jumbled up how to paginate posts on my personal portfolio website and now I understood how to do the same.

@Another0neTime 6 месяцев назад

You have helped me a ton in my career. Thank you Brad.

@cout0dev 3 месяца назад

I really appreciate that you teach us so much in such a simple way.

@mountains4000 6 месяцев назад

Thank you for the Christmas gift 🎁💝. Well wishes to you and your family 💟

@shadowstack 6 месяцев назад

my favorite coding channel using my favorite framework, thanks for making content like this!

@Genius-Wave 4 месяца назад

💯 thanks to you tooo you both are great

@shadowstack 4 месяца назад

@@Genius-Wave that’s very kind 🙏

@johncarlosarmiento7556 5 месяцев назад

Thanks Brad, really appreciate this free content!

@user-ru8hn9hb5c 6 месяцев назад

Thank you so much! Your voice is good to listen to.

@SkyrimBeast 2 месяца назад

Thanks for this course Brad, I've been meaning to tinker with Astro. This project looks to be a good starting point to go from understanding Astro to actual implementation.

@Pew_Pew_Pizza 5 месяцев назад

Much appreciated. Great work as always.

@gilaguilar7130 5 месяцев назад

Thank you for your invaluable role in my journey to becoming a software developer. Your clear and patient explanations have been a constant guide, especially for someone like me with a less-than-perfect memory. Despite the challenges, your teaching style has made complex concepts accessible and fostered my continuous growth. I delved into development in my early 40s, dedicating five years to learning before landing my first job. Understanding my learning process was key, and your content played a pivotal role in that discovery. Your calm and collected manner always serves as a reminder of the ongoing learning journey we're all on. Looking ahead, I plan to create Udemy courses on working with colleagues with diverse abilities, inspired by my own experiences. Your impact extends beyond individual growth, influencing how we collaborate and support each other. Every new video of yours is a welcomed opportunity for learning and inspiration. Wishing you and your family a joyful holiday season. Cheers! 🤟☕

@eladbar1579 6 месяцев назад

Thank you Brad! You are the mennn!!! 🔥🔥🔥🔥🔥🔥🔥🔥

@martinndegwa7155 3 месяца назад

Thank you Brad. This is a nice tutorial.

@patriotlightning7791 5 месяцев назад

Thank you so much for your efforts! ❤

@prashlovessamosa 6 месяцев назад

Thank you Brad

@male3399 6 месяцев назад

Just in the right time

@lostinthenarrativve 6 месяцев назад

Can't wait for the Laravel course Brad, hoping to land a PHP role with the help of your courses in 2024 Q1 😝

@birsingh5388 6 месяцев назад

He already published free laravel course on RU-vid

@mtq2527 6 месяцев назад

I'm also waiting for his laravel course

@BobbyBundlez 3 месяца назад

honestly from what i've heard thus far astros power comes from SSG and using SSR when needed. I don't think a blog site needs ANY SSR but I shall watch nonetheless Brad! glad you still make these just gettin back onto we dev learning after using gatsby for way too long and never pushing myself to learn new technologies. always felt clunky

@esakib 2 месяца назад

You explain better than my native-speaker (Bangla, which is my mother language) university teachers! Thanks a lot sir 🥰🥰

@umairmuhammadabbas3929 6 месяцев назад

Anticipated 😲

@ja4306 5 месяцев назад

I really love these videos, but I do wish there were some sort of database tie-in with them so we'd know how to integrate that with it. Because nobody's going to be wanting to add articles statically. And not just Firebase, maybe PostgreSQL would be a nice change.

@nadetdevfullstack7041 6 месяцев назад

Excellent!

@alexanderkomanov4151 6 месяцев назад

Amazing!

@ivanmendoz6238 5 месяцев назад

Whaaaat??? Is super great content i love it!❤❤❤❤❤

@MrWindforce 5 месяцев назад

Awesome Course. Im still at the beginning but so far so awesome. I have checked the Image size of the laptop image. When you put the source to the default path, then it will not be optimized even with Image at the beginning. But when you import it like with the logo it will be optimized from 1.6MB to 15.4kB :)

@haroldguzman1285 5 месяцев назад

galing mo talaga idol!

@bigskillet 5 месяцев назад

I'd happily pay for an Astro + Sanity course.

@ShafiraP.-bd5bn 8 дней назад

Thank you mister

@waleedkh9769 2 месяца назад

Brilliant

@Feenskee 6 месяцев назад

Astro is so good that i sometimes think 'What's the catch' while using it

@aliyusuf-edu 6 месяцев назад

Thanks

@dardan9218 5 месяцев назад

Hi Brad, i hope you and your family are well. Was wondering if you've been working on a react native couse? Your courses are always my favourites.

@isaacorraiz4362 6 месяцев назад

Thank you for your content Brad. I just finished learning react with your course react from to back and I am building my first project for my sister-in-law. After I finish I was planning to start with your next js course baby here in about Astro a lot. Should I learn nextjs first or just jump into Astro?

@drujas 4 месяца назад

Claro, Conciso y Fiable...

@samvelpetrosyan494 4 месяца назад

Thanks Bred it was conducive, please add Astro internalization in this project so that we will be able to translate for example from English to Russian, etc.

@dovahkiin3362 6 месяцев назад

Great tutorial! btw are u planning to update the next.js course?

@raj080288 3 месяца назад

Hi Brad, great tutorial as always! just a quick question, could you have not used the "export async function getStaticPaths({ paginate })" function to achieve the same thing for the pagination?

@theokrull1323 6 месяцев назад

Hey Brad, do you have an estimate when the Laravel course is dropping? Looking forward to it!

@bigskillet 5 месяцев назад

On the tag page section, if you reload the VS Code window, it'll fix the red underlines on astro:content. The extension gets hung up sometimes...

@gubatenkov 6 месяцев назад

Why I should choose Astro ＋ Quick vs Next.js for blog ? What are the benefits of this stack over classic Next.js ?

@harpo187bling 6 месяцев назад

Hi Brad. Will you do a course on HTMX please? Thanks man

@leszekmodrzejewski5179 5 месяцев назад

Coding with Brad is like having a beer with your best friend.

@nielslytzdk 5 месяцев назад

Great tutorial, thumbs up!! I keep getting an error in the MostRecentArticle component, it says: "Cannot read properties of of undefined (reading 'image')" Not sure what I'm doing wrong, I tried copy-paste the code from the repo but no luck 🤔

@vectoralphaAI 5 месяцев назад

Hey question here. Do you have any plans of doing any videos or RU-vid courses on Django in the next year of 2024??

@osahady 5 месяцев назад

ASTRO primarily focuses on optimizing network connections, especially in the context of gaming.

@Mal-wk3uq 6 месяцев назад

Hi Brad,can you make content on ruby on rails ? Thanks

@spacecoder0526 5 месяцев назад

Could you make astro tutorial or project with internationalization and React ?

@stephenlittle7688 День назад

Getting error Missing "./env/setup" specifier in "astro" package not sure what I missed

@akiffpremjee 4 месяца назад

does anyone know why when you do entry.data.date the dates are all one day behind the date defined in the front matter. Eg in the The best laptops for developers in 2024 file the date is set as Jan 20 but it pulls in as Jan 19. We see this with all the dates and I'm not sure why

@nocastenoreligion5560 5 месяцев назад

Dear traversy, will there be videos on flutter? Please.

@michaelfrieze 5 месяцев назад

How come on the Vercel deployment the images on the About page take forever to load? Sometimes they load pretty quick and other times not so much. I have noticed this with Astro sites, even the sites I have built with Astro. Sometimes, the images just don't load at all and I don't know what it is about that framework that causes that. It's making me just want to avoid using their image component. Also, it's not a Vercel thing because I deployed some Astro apps to Railway and Netlify with the same issues.

@DesignfulDev 6 месяцев назад

hey Brad, how about a full Astro Course Dev to Deployment on Udemy after you finish and publish the Laravel one?

@luca9298 4 месяца назад

What about Picture component? One thing I can’t do is to disable lazy load

@atharvapise 4 месяца назад

31:08 you have not closed the section tag in index.html inside blog-themes folder

@lutho600 6 месяцев назад

Can you do a one with a CMS, please Brad, like Strapi, Payload or Sanity. I hope you see my comment 🙏🙏🙏🙏🙏😭

@phantazzor 5 месяцев назад

so here you don't have any database , the fields and datas are within the articles but any solutions for something like Prisma with Astro ? Would be nice to add a like button as well as some users to that project ANYWAY THANKS

@whyfoo 6 месяцев назад

can u do a remix next ?

@rayandedoschevic2884 5 месяцев назад

Guys anyone with problems on vercel, when try to search blogs it shows 500: INTERNAL_SERVER_ERROR? In development all works fine

@ronaldbrunsen 6 месяцев назад

Not sure I see the upside to using this versus word press.

@0xbarb 6 месяцев назад

using astro from 1y+ never back to other framework

@nice2u462 6 месяцев назад

Oh im first

@metamodern7648 6 месяцев назад

I hate astro just because roadmap sh website is built with it and author shared the project under a stupid license which allows to contribute, but not take. At this point I'm just waiting when that shadow goes away so that I'm free to learn what I want

@Ruhgtfo 6 месяцев назад

Why JavaScript have many names

@DannyBoy443 5 месяцев назад

How can anyone take this guys seriously with that Boston accent? Lmao.

@nickdhrones6425 3 месяца назад

Glad you mentioned Tailwind early. I'm out!

@GMan12321 6 месяцев назад

Hi Mate, I just purchased your course. I can't find "Module 5: Search, Pagination & Deploy" in there. It's listed here "/astro-quick-start" but only 4 Modules here "/products/astro-quick-start".

@joaothomazini 2 месяца назад

@Traversy Media, thanks for the tutorial, it is my first time with Astro. I think there is an issue with the pubDate from the Article component: {formatDate(article.data.pubDate)} is showing the article Day - 1 not the correct date from the article. You can see on your course it also happens, when you change from hardcoded to pubDate it changes the day to -1. Any idea why?

@joaothomazini 2 месяца назад

I just fixed the issue...