Intro: Build a Full Stack Blog with Astro

Lazar Nikolov: [0:00] Hi there. Welcome to building a full-stack blog with Astro. My name is Lazar Nikolov and I'm going to be your instructor throughout this course. This is a project-based course, which means you're going to be coding along with me.

[0:11] Every lesson builds on top of what the previous lesson built. At the end, we're going to have a fully functional project. We're going to be building this website, which if you'd like at the end, you can customize it and use it as your own. Astro is a fairly new framework with just two years under its belt.

[0:27] It has been rapidly adopted because it's simple and it has a great DX. It can be deployed to the edge, it's highly customizable, and it's also UI agnostic, which means you can use frameworks like React, Svelte, Vue, Solid, etc. with it.

[0:43] It implements a zero JS front-end architecture that allows us to selectively ship JavaScript only in cases where we need to. That results in a huge performance boost for our website. They call that architecture Astro Islands, and we're going to be learning all about it in lesson 16.

[1:01] While we're talking about the lessons, let's check out the curriculum. We're going to start by creating a new project. We're going to check out the project structure, and then we'll look at the styling options we can use with Astro. After that, we're going to create a few pages to see how routing works.

[1:15] We're going to create a shared layout for all of those pages, and we're going to add static images. After that, I'm going to challenge you to implement the pages with your own data. Don't worry, I'm going to show you screenshots of how the layout should look like. At this point, you'll be well-equipped with the required knowledge. This challenge should be pretty fun to do.

[1:35] After the challenge, we're going to start looking into content collections. We're going to create a collection for our blog, and also create an article page to render the contents of our articles. Then I'm going to challenge you again to implement styling for the article content. After that, we're going to create a blog page where we're going to list all of our articles and also implement pagination.

[1:56] Since this is going to be a personal website, we're going to learn how to correctly implement SEO, generate a site map, generate an RSS feed for our articles, and deploy our website to Vercel. This is going to be our first milestone.

[2:11] At this point, we have acquired all the basic Astro skills that we need to create static pages. Before we dive into the more advanced concepts, we're going to do a milestone recap lesson to solidify everything that we've learned so far. Then we're going to learn about the Astro Islands architecture, and we're going to create a like button component for our articles page using React.

[2:33] In the next lesson, we'll actually refactor the React component into Vanilla JS to demonstrate that we don't need React for simpler cases like this. This will result in significantly less JavaScript being loaded on our page, while still keeping the functionality and interactivity of our like component.

[2:52] To keep track of the number of likes for every article, we're going to need a database. We're going to use an SQLite database, but we're going to need a server to host that. We're actually going to set up an account at fly.io and migrate our deployment over there.

[3:07] We're going to need to dockerize our application, create a GitHub action that's going to deploy our website automatically. We're going to implement Drizzle ORM so that we can connect to our website. To fetch the number of likes and also increment the number of likes every time we click on the like button, we're going to need an API endpoint.

[3:27] In the next lesson, we're going to learn about Astro's API endpoints, and we're going to create our GET and POST endpoints. At this point, we even have our own backend.

[3:37] As the last lesson, we'll learn how to dynamically generate OG images for our pages so that they look good when people share them on social media. And that's it. That's the course.

[3:47] We're going to end up with both basic and advanced concepts of Astro. We'll also end up with our own personal website that has advanced features like an RSS, a site map, a database with a tiny backend, etc.

[4:00] The project source code is open source, and every lesson has its own branch. In case you get stuck, feel free to take a peek at the repo and help yourself out. I want to thank you for checking out my course. I hope you enjoy it and have fun learning Astro. See you in the next lesson.