Build a Full Stack Blog with Astro

👋 Welcome

Welcome to the "Build a Full Stack Blog with Astro" course! 👌

In this course we're going to learn Astro by building a fully functional personal blog which we can actually use as our personal developer portfolio at the end. We're going to learn about:

• routing,
• styling,
• shared layouts,
• Astro Islands,
• assets,
• content collections,
• pagination,
• SEO,
• generating a sitemap,
• generating an RSS feed,
• deploying Astro on Vercel,
• deploying Astro on fly.io,
• dockerizing Astro,
• automatic deployments with GitHub Actions,
• using databases,
• creating custom API Endpoints,
• and even dynamically generating OG images for social sharing!

Whew! That's a lot! I really hope you like this course, and have fun learning 💖

🤠 Instructor

My name is Lazar Nikolov and I'm a full stack developer from North Macedonia 🇲🇰, based in Canada 🇨🇦!

My first interaction with programming was back in 2011, while I was still in high school. I was learning HTML and CSS on my own, sometimes during the classes (don't tell my teachers 🤫). Throughout my career I've been developing mobile apps, TV apps, desktop apps, but I've found my sweet spot as a Full-stack Engineer working with the React ecosystem.

I'm a super friendly guy, so if you have any questions, or just want to talk to me, the best place to reach me is on Twitter at @NikolovLazar.

🎯 Goal

After finishing this course, you'll have both basic and advanced skills to build awesome websites using Astro.

🚅 Skills

You are going learn how to architecture our front-end using pages, layouts, and components, which is a skill you can apply in every front-end project in your future.

If you haven't worked with TypeScript before, that's another skill that you'll learn and also apply in other frameworks and technologies.

You'll also learn how SEO, sitemaps and RSS feeds work, how to generate dynamic OG images, how to use Docker to dockerize websites and deploy them on any cloud platform that supports containers, and how to setup DrizzleORM with an SQLite database.

These are all generic skills that you can apply in other frameworks aside from Astro.

🚧 Prerequisites

Before starting this course, you should be comfortable working with HTML, CSS, TypeScript, and understand basic Web Dev concepts.

Here are some egghead.io courses that can bring you up to speed:

• Up and Running with TypeScript by John Lindquist
• Use Types Effectively in TypeScript by Ari Picker

💽 Local Setup

Make sure you have Node.js, and Visual Studio Code installed on your machine.

Each lesson is its own branch in this repo. To get started, run npm install at the root (this installs all of the dependencies) and then npm run dev to start the local development server.

🔢 Lessons list

• Lesson 01 - Intro: Build a Full Stack Blog with Astro
• Lesson 02 - Create an Astro Project and Set up the Dev Environment
• Lesson 03 - Style Astro Pages with Many Different Options
• Lesson 04 - Create an Astro Component for Links
• Lesson 05 - Render Images to Pages with Astros Static Serving and Static Assets
• Lesson 06 - Create Astro Content Collections with Zod for a Typesafe Blog
• Lesson 07 - Render an Astro Blog Post Page with getStaticPaths
• Lesson 08 - Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginate
• Lesson 09 - Create Static Pages in Astro Using File Based Routing
• Lesson 10 - Create and Apply a Layout to Astro Pages
• Lesson 11 - Implement SEO in an Astro Website with astro-seo
• Lesson 12 - Generate a Sitemap in Astro with the sitemap Integration
• Lesson 13 - Generate an RSS Feed for an Astro Blog with @astrojs/rss
• Lesson 14 - Deploy a Static Astro Site on Vercel
• Lesson 15 - Milestone Recap: Build a Full Stack Blog with Astro
• Lesson 16 - Add Interactive React Components to a Static Astro Page with Astro Islands
• Lesson 17 - Refactor a React Astro Island to Vanilla JS to Ship Less JavaScript
• Lesson 18 - Create a fly.io Account and Prepare a Project for Deployment
• Lesson 19 - Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.io
• Lesson 20 - Create a GitHub Action Configuration to Automatic Deploy an Astro Blog
• Lesson 21 - Implement Drizzle ORM for Development and Deploy to a Fly.io Volume
• Lesson 22 - Create Astro API Endpoints to Get and Update Database Records using Drizzle ORM
• Lesson 23 - Implement Dynamic OG Image Generation with Astro API Routes and Satori

❤️ Contributors

PRs are always welcome. If you find a typo, or have any ideas on how to improve the content, feel free to submit a PR. Let's make learning Astro better for everyone!