Skip to main content

Build a Full Stack Blog with Astro

2h 43m 16s
English
Paid

Creating a Fully-Functional Blog on Astro is a hands-on course designed to show you how to develop a modern and fully operational blog site without unnecessary theory. This course focuses on Astro, a progressive framework known for creating fast and user-friendly content projects.

Course Highlights

Throughout the training, you will gain expertise in the following areas:

Styles and Layout

Learn how to design pages in Astro using various styling approaches, ensuring you maintain optimal speed and performance.

Components and Static Assets

Create reusable components and manage images effectively to enhance your blog's functionality and aesthetics.

Content Publishing System

Utilize content collections in Astro alongside type safety with Zod, providing a robust structure for your data.

Dynamic Functionality

Implement pagination and dynamic pages to facilitate seamless navigation throughout your blog.

SEO Basics

Optimize your site with astro-seo to improve visibility and ranking in search engine results.

Interactive Elements

Integrate initial interactive components with React, followed by optimization using Vanilla JS to create a responsive user experience.

Backend Integration

Develop API endpoints and integrate databases using Drizzle ORM, creating a solid backend foundation for your blog.

OG Image Generation

Automatically generate social media images to enhance shareability and engagement.

Benefits of Completing the Course

By the end of this course, you will not only possess theoretical knowledge but also have a fully deployed full-stack blog that meets the standards of modern web development practices. The skills acquired will be transferable to other projects, including working with databases, containerization, and deploying comprehensive web applications.

About the Author: egghead

egghead thumbnail
The egghead.io project presents a huge selection of courses and screencasts for developers of all levels and professions.

Watch Online 23 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 23 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Intro: Build a Full Stack Blog with Astro
All Course Lessons (23)
#Lesson TitleDurationAccess
1
Intro: Build a Full Stack Blog with Astro Demo
04:20
2
Create an Astro Project and Set up the Dev Environment
04:12
3
Style Astro Pages with Many Different Options
09:05
4
Create Static Pages in Astro Using File Based Routing
02:37
5
Create and Apply a Layout to Astro Pages
04:25
6
Create an Astro Component for Links
05:25
7
Render Images to Pages with Astros Static Serving and Static Assets
05:23
8
Create Astro Content Collections with Zod for a Typesafe Blog
07:49
9
Render an Astro Blog Post Page with getStaticPaths
06:09
10
Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginate
09:21
11
Implement SEO in an Astro Website with astro-seo
05:02
12
Generate a Sitemap in Astro with the sitemap Integration
06:56
13
Generate an RSS Feed for an Astro Blog with @astrojs/rss
07:25
14
Deploy a Static Astro Site on Vercel
01:02
15
Milestone Recap: Build a Full Stack Blog with Astro
01:31
16
Add Interactive React Components to a Static Astro Page with Astro Islands
07:57
17
Refactor a React Astro Island to Vanilla JS to Ship Less JavaScript
07:58
18
Create a fly.io Account and Prepare a Project for Deployment
02:24
19
Dockerize a Server-side Rendered (SSR) Astro Blog and Deploy to Fly.io
07:50
20
Create a GitHub Action Configuration to Automatic Deploy an Astro Blog
09:28
21
Implement Drizzle ORM for Development and Deploy to a Fly.io Volume
15:32
22
Create Astro API Endpoints to Get and Update Database Records using Drizzle ORM
11:57
23
Implement Dynamic OG Image Generation with Astro API Routes and Satori
19:28
Unlock unlimited learning

Get instant access to all 22 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription