Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nikolovlazar/egghead-personal-blog-astro

🥚 egghead.io: Build a Personal Blog using Astro
https://github.com/nikolovlazar/egghead-personal-blog-astro

astro astrojs docker drizzle drizzle-orm flyio typescript

Last synced: 3 months ago
JSON representation

🥚 egghead.io: Build a Personal Blog using Astro

Awesome Lists containing this project

README 

        
# 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](https://twitter.com/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](https://egghead.io/courses/up-and-running-with-typescript)

  by John Lindquist

- [Use Types Effectively in TypeScript](https://egghead.io/courses/use-types-effectively-in-typescript)

  by Ari Picker



## 💽 Local Setup



Make sure you have [Node.js](https://nodejs.org/), and

[Visual Studio Code](https://code.visualstudio.com/) 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!