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 💖
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.
After finishing this course, you'll have both basic and advanced skills to build awesome websites using Astro.
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.
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
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.
Lesson 01
- Intro: Build a Full Stack Blog with AstroLesson 02
- Create an Astro Project and Set up the Dev EnvironmentLesson 03
- Style Astro Pages with Many Different OptionsLesson 04
- Create an Astro Component for LinksLesson 05
- Render Images to Pages with Astros Static Serving and Static AssetsLesson 06
- Create Astro Content Collections with Zod for a Typesafe BlogLesson 07
- Render an Astro Blog Post Page with getStaticPathsLesson 08
- Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginateLesson 09
- Create Static Pages in Astro Using File Based RoutingLesson 10
- Create and Apply a Layout to Astro PagesLesson 11
- Implement SEO in an Astro Website with astro-seoLesson 12
- Generate a Sitemap in Astro with the sitemap IntegrationLesson 13
- Generate an RSS Feed for an Astro Blog with @astrojs/rssLesson 14
- Deploy a Static Astro Site on VercelLesson 15
- Milestone Recap: Build a Full Stack Blog with AstroLesson 16
- Add Interactive React Components to a Static Astro Page with Astro IslandsLesson 17
- Refactor a React Astro Island to Vanilla JS to Ship Less JavaScriptLesson 18
- Create a fly.io Account and Prepare a Project for DeploymentLesson 19
- Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.ioLesson 20
- Create a GitHub Action Configuration to Automatic Deploy an Astro BlogLesson 21
- Implement Drizzle ORM for Development and Deploy to a Fly.io VolumeLesson 22
- Create Astro API Endpoints to Get and Update Database Records using Drizzle ORMLesson 23
- Implement Dynamic OG Image Generation with Astro API Routes and Satori
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!