Astro Quick Start Course | Build an SSR Blog

Ғылым және технология

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

Пікірлер: 86

  • @adamkarafyllidis9264
    @adamkarafyllidis926424 күн бұрын

    The friendliest and most familiar voice of web development :)

  • @ashimov1970
    @ashimov1970Ай бұрын

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

  • @SpacemanSpiff9406
    @SpacemanSpiff94065 ай бұрын

    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.

  • @webdevluc
    @webdevluc5 ай бұрын

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

  • @AustroPower
    @AustroPower5 ай бұрын

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

  • @isaacorraiz4362
    @isaacorraiz43622 ай бұрын

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

  • @shadowstack
    @shadowstack5 ай бұрын

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

  • @Genius-Wave

    @Genius-Wave

    3 ай бұрын

    💯 thanks to you tooo you both are great

  • @shadowstack

    @shadowstack

    3 ай бұрын

    @@Genius-Wave that’s very kind 🙏

  • @alnm951
    @alnm9515 ай бұрын

    Thanks for making the course free Brad!

  • @tiscover
    @tiscover5 ай бұрын

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

  • @ceralguy85
    @ceralguy852 ай бұрын

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

  • @lacikawiz8369
    @lacikawiz83693 ай бұрын

    Awesome tutorial! Thank you for making it available on KZread!

  • @davidwashington7293
    @davidwashington7293Ай бұрын

    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. 🚀

  • @pedrotski
    @pedrotski4 ай бұрын

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

  • @cout0dev
    @cout0dev2 ай бұрын

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

  • @Another0neTime
    @Another0neTime5 ай бұрын

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

  • @felipefs106
    @felipefs1065 ай бұрын

    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

  • @lakshyarajdash
    @lakshyarajdash2 ай бұрын

    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.

  • @mountains4000
    @mountains40005 ай бұрын

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

  • @user-ru8hn9hb5c
    @user-ru8hn9hb5c5 ай бұрын

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

  • @johncarlosarmiento7556
    @johncarlosarmiento75564 ай бұрын

    Thanks Brad, really appreciate this free content!

  • @SkyrimBeast
    @SkyrimBeastАй бұрын

    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
    @Pew_Pew_Pizza4 ай бұрын

    Much appreciated. Great work as always.

  • @martinndegwa7155
    @martinndegwa71552 ай бұрын

    Thank you Brad. This is a nice tutorial.

  • @BobbyBundlez
    @BobbyBundlez2 ай бұрын

    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

  • @male3399
    @male33995 ай бұрын

    Just in the right time

  • @eladbar1579
    @eladbar15795 ай бұрын

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

  • @patriotlightning7791
    @patriotlightning77914 ай бұрын

    Thank you so much for your efforts! ❤

  • @prashlovessamosa
    @prashlovessamosa5 ай бұрын

    Thank you Brad

  • @gilaguilar7130
    @gilaguilar71304 ай бұрын

    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! 🤟☕

  • @esakib
    @esakibАй бұрын

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

  • @isaacorraiz4362
    @isaacorraiz43625 ай бұрын

    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?

  • @lostinthenarrativve
    @lostinthenarrativve5 ай бұрын

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

  • @birsingh5388

    @birsingh5388

    5 ай бұрын

    He already published free laravel course on KZread

  • @mtq2527

    @mtq2527

    5 ай бұрын

    I'm also waiting for his laravel course

  • @ja4306
    @ja43064 ай бұрын

    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.

  • @umairmuhammadabbas3929
    @umairmuhammadabbas39295 ай бұрын

    Anticipated 😲

  • @nadetdevfullstack7041
    @nadetdevfullstack70415 ай бұрын

    Excellent!

  • @dardan9218
    @dardan92184 ай бұрын

    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.

  • @alexanderkomanov4151
    @alexanderkomanov41515 ай бұрын

    Amazing!

  • @bigskillet
    @bigskillet4 ай бұрын

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

  • @Feenskee
    @Feenskee5 ай бұрын

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

  • @theokrull1323
    @theokrull13235 ай бұрын

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

  • @ivanmendoz6238
    @ivanmendoz62384 ай бұрын

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

  • @dovahkiin3362
    @dovahkiin33625 ай бұрын

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

  • @MrWindforce
    @MrWindforce4 ай бұрын

    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 :)

  • @waleedkh9769
    @waleedkh9769Ай бұрын

    Brilliant

  • @haroldguzman1285
    @haroldguzman12854 ай бұрын

    galing mo talaga idol!

  • @raj080288
    @raj0802882 ай бұрын

    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?

  • @aliyusuf-edu
    @aliyusuf-edu5 ай бұрын

    Thanks

  • @drujas
    @drujas3 ай бұрын

    Claro, Conciso y Fiable...

  • @gubatenkov
    @gubatenkov5 ай бұрын

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

  • @harpo187bling
    @harpo187bling5 ай бұрын

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

  • @nielslytzdk
    @nielslytzdk4 ай бұрын

    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 🤔

  • @bigskillet
    @bigskillet4 ай бұрын

    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...

  • @vectoralphaAI
    @vectoralphaAI4 ай бұрын

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

  • @michaelfrieze
    @michaelfrieze4 ай бұрын

    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.

  • @akiffpremjee
    @akiffpremjee3 ай бұрын

    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

  • @samvelpetrosyan494
    @samvelpetrosyan4943 ай бұрын

    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.

  • @spacecoder0526
    @spacecoder05264 ай бұрын

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

  • @Mal-wk3uq
    @Mal-wk3uq5 ай бұрын

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

  • @nocastenoreligion5560
    @nocastenoreligion55604 ай бұрын

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

  • @DesignfulDev
    @DesignfulDev5 ай бұрын

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

  • @luca9298
    @luca92983 ай бұрын

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

  • @leszekmodrzejewski5179
    @leszekmodrzejewski51794 ай бұрын

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

  • @atharvapise
    @atharvapise3 ай бұрын

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

  • @osahady
    @osahady4 ай бұрын

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

  • @phantazzor
    @phantazzor4 ай бұрын

    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

  • @lutho600
    @lutho6005 ай бұрын

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

  • @whyfoo
    @whyfoo5 ай бұрын

    can u do a remix next ?

  • @rayandedoschevic2884
    @rayandedoschevic28844 ай бұрын

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

  • @ronaldbrunsen
    @ronaldbrunsen5 ай бұрын

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

  • @0xbarb
    @0xbarb5 ай бұрын

    using astro from 1y+ never back to other framework

  • @nice2u462
    @nice2u4625 ай бұрын

    Oh im first

  • @Ruhgtfo
    @Ruhgtfo5 ай бұрын

    Why JavaScript have many names

  • @metamodern7648
    @metamodern76485 ай бұрын

    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

  • @DannyBoy443
    @DannyBoy4434 ай бұрын

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

  • @nickdhrones6425
    @nickdhrones64252 ай бұрын

    Glad you mentioned Tailwind early. I'm out!

  • @GMan12321
    @GMan123215 ай бұрын

    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
    @joaothomaziniАй бұрын

    @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

    @joaothomazini

    Ай бұрын

    I just fixed the issue...

Келесі