Astro Quick Start Course | Build an SSR Blog
Vložit
- čas přidán 18. 05. 2024
- 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 - Věda a technologie
The friendliest and most familiar voice of web development :)
Brad, you are the best front-end development tutor out there on CZcams. God bless
You have helped me a ton in my career. Thank you Brad.
Another great course Brad! I really like the simplicity of Astro
Thank you Brad for all the free knowledge and work you put in 👍🙏💯
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.
Discovered Astro a few days ago. Great course and thanks for releasing it for free.
Awesome tutorial! Thank you for making it available on CZcams!
Thanks for making the course free Brad!
Great crash course Brad. Thanks for making it available for free. Astro looks like the next big thing in web dev
Thank you so much! Your voice is good to listen to.
Thanks Brad, really appreciate this free content!
I really appreciate that you teach us so much in such a simple way.
Thank you for the Christmas gift 🎁💝.
Well wishes to you and your family 💟
I just finished. Very nice course Brad. Thanks for everything you do. For me you are the best of the best.
Much appreciated. Great work as always.
As always Brad, thank you for sharing this great content. This is one of the best tech channels to learn different technologies
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
Can't wait for the Laravel course Brad, hoping to land a PHP role with the help of your courses in 2024 Q1 😝
He already published free laravel course on CZcams
I'm also waiting for his laravel course
Thank you Brad
Thank you so much for your efforts! ❤
Thank you Brad! You are the mennn!!! 🔥🔥🔥🔥🔥🔥🔥🔥
Thank you Brad. This is a nice tutorial.
Just in the right time
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. 🚀
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.
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.
my favorite coding channel using my favorite framework, thanks for making content like this!
💯 thanks to you tooo you both are great
@@Genius-Wave that’s very kind 🙏
Excellent!
Amazing!
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! 🤟☕
Anticipated 😲
galing mo talaga idol!
Brilliant
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.
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
You explain better than my native-speaker (Bangla, which is my mother language) university teachers! Thanks a lot sir 🥰🥰
I'd happily pay for an Astro + Sanity course.
Whaaaat??? Is super great content i love it!❤❤❤❤❤
Thanks
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 :)
Claro, Conciso y Fiable...
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?
Astro is so good that i sometimes think 'What's the catch' while using it
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.
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.
Great tutorial!
btw are u planning to update the next.js course?
Hey Brad, do you have an estimate when the Laravel course is dropping? Looking forward to it!
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...
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?
Hi Brad. Will you do a course on HTMX please? Thanks man
Why I should choose Astro ＋ Quick vs Next.js for blog ? What are the benefits of this stack over classic Next.js ?
Could you make astro tutorial or project with internationalization and React ?
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 🤔
ASTRO primarily focuses on optimizing network connections, especially in the context of gaming.
Hi Brad,can you make content on ruby on rails ? Thanks
Hey question here. Do you have any plans of doing any videos or CZcams courses on Django in the next year of 2024??
hey Brad, how about a full Astro Course Dev to Deployment on Udemy after you finish and publish the Laravel one?
Coding with Brad is like having a beer with your best friend.
Dear traversy, will there be videos on flutter? Please.
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.
Can you do a one with a CMS, please Brad, like Strapi, Payload or Sanity. I hope you see my comment 🙏🙏🙏🙏🙏😭
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
What about Picture component? One thing I can’t do is to disable lazy load
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
Guys anyone with problems on vercel, when try to search blogs it shows 500: INTERNAL_SERVER_ERROR? In development all works fine
31:08 you have not closed the section tag in index.html inside blog-themes folder
can u do a remix next ?
using astro from 1y+ never back to other framework
Not sure I see the upside to using this versus word press.
Oh im first
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
Why JavaScript have many names
Glad you mentioned Tailwind early. I'm out!
How can anyone take this guys seriously with that Boston accent? Lmao.
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".
@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?
I just fixed the issue...