Astro Blog Course - Full 3.5 hour course

In this 18-part course, we’ll build a custom Astro blog from scratch. Throughout the course, we’ll learn how to work with Astro components, import and process data, pass props, minify images, build an RSS feed, and more.

🔗 Key Links 🔗

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Lesson 1: Intro & install
10:49 Lesson 2: Astro basics
21:18 Lesson 3: Layouts
31:17 Lesson 4: CSS & styling
43:31 Lesson 5: Astro components
1:05:09 Lesson 6: Routing basics
1:15:37 Lesson 7: Markdown layouts
1:35:23 Lesson 8: Card component
1:49:38 Lesson 9: Filter/sort posts
2:04:19 Lesson 10: Dynamic routes
2:19:48 Lesson 11: Pagination
2:28:56 Lesson 12: Tag Cloud
2:39:23 Lesson 13: Related posts
2:47:16 Lesson 14: Build a sitemap
2:50:58 Lesson 15: Build an RSS feed
2:58:21 Lesson 16: SEO basics
3:13:12 Lesson 17: Integrations
3:25:02 Lesson 18: Build, deploy, and update

---------------------------------------
🎨 VSCode Theming

---------------------------------------

🌐 Connect With Me 🌐

[CodinginPublic]

Just a note that if you get syntax CSS errors when copying and pasting the CSS, you can remove those by getting a PostCSS syntax extension. Because I'm using some more modern CSS (or future CSS) features, without a PostCSS extension it will show you errors (even though following the tutorial instructions will still make the CSS actually work). I’m definitely regretting this choice and should have just stuck with a more simple solution so it wasn't confusing. Thanks for those who have mentioned this!

[clrs]

this is so well taught. the channel deserves much more recognition.. 💯

[UziTekk]

This channel is kinda fire, thank you Youtube algorithm!

[prashlovessamosa]

Thank man just completed this course.
Thanks for sharing knowledge for free this channel and you are very underrated.

[ignrey]

Man, I already commented, but this is just a beatiful framework. And you are just awesome as a teacher.

[Admin-yg]

Seriously one of the best courses I've taken, thank you so much for putting this together!

[BillieAmit]

This course is well delivered by you and it seems you put a lot of effort into it.
Thank you so much, I learned a lot 🙏

[EkySambora]

Thank you for the course, I'm learning about Astro, and your tutorials are very helpful.

[vkffgrx]

Working through this tutorial, getting errors on Lesson 5, and becoming more familiar with Astro prompted me to scoot back to WP. I have looked at static site generators for quite some time- but for regular content websites, nothing beats WP, sure its "slower" (throw an extra $100 a month at hosting- all issues go away) but Astro introduces a level of complexity that is complex for complexity sake vs a straight flat-file CMS like grav or the way better Publii. It took me quite a while to make a form and landing page for an old site in Astro on Netlify. It introduced WAY more complexity than a static html page with some CSS for styling, and formspree. Now I have to keep the code updated because I had to build it Visual basic studio and get all these npm's to make it work with Netlify. I couldn't add the JS code for statcounter on the Netlify side because of Astro. It's just shit. My old form/landing needed NONE of this and had analytics injected into it on the Netlify side.

Why learn this stuff when it's so much more complex than a static site with fewer integrations and no upside? A basic site needs analytics, robots.txt, XML sitemap, schema/meta, a blog, and some pages, header/footer, and it's a total pain in the ass in Astro- all with zero flashy flash or wow factor. To create a site with the same functionality I had in '97? MS frontpage was the bomb.

A $20 WP theme is more exciting and animated, and I can schedule posts. If the whole point of having a website is just to get eyeballs, then why fuss with Astro?

[Alireza-ldcu]

Your teaching style is one the best its so informative, Thx for tutorial.

[viperactual]

I liked the video before watching it because, I already know it's gonna be good! 😊

[ignrey]

I've never heard about astro. That styling feature to import lang it's just awesome.

[manoj_kumar_sarkar]

This might be the best Astro course on the internet. ❤❤

[pnddesign]

Completed!! Thank you so much. I plan to use tailwindui templates and integrate them to astro. I'm still searching for the ultimate stack.
I know that Astro + TW + Markdown is at the core of what I'm looking for.

Thank you very much ♥

[nathaniellovely]

Absolutely fantastic series, great content, I really learned a lot and appreciate how in depth and yet how easy it was to follow. Thank you 🙏

[SNVideos]

Hi guys, if any of you are having problems with the tutorial there are a couple outdated things:
1. For the Icons to work you need to include the integration on the astro.config.mjs (also you need to install the iconify icon packs using npm)
2. @astrojs/image is now deprecated and Sharp is now the default image service. Also some things like the fit property and aspectRatio are now not supported. If you want to use images now you need to use "import { Image } from 'astro:assets';"

[MasterQuestMaster]

Very good series!
I modified the blog sites to use a content collection after I found out they exist.

[mohammadmahdialvansaz]

Prefect tut for Astro. Thank you very much.

[jeffmckean]

Looking forward to the Spring 2024 additional content...

[khalidben]

smooth explanation, thank you for this great material. interesting framework indeed.