Build a Full Stack Blog with Astro

2h 43m 16s
English
Paid

Course description

"Creating a Fully-Functional Blog on Astro" is a practical course that, without unnecessary theory, demonstrates how to develop a modern and fully operational blog site. The course is centered around Astro, a progressive framework for creating fast and user-friendly content projects.

During the training, you will master:

  • Styles and Layout: Designing pages in Astro with different styling approaches without compromising speed.
  • Components and Static Assets: Creating reusable components and working with images.
  • Content Publishing System: Using content collections in Astro and type safety through Zod for structured data.
  • Dynamic Functionality: Pagination and dynamic pages for easy navigation.
  • SEO Basics: Optimizing through astro-seo so that the site is noticeable to search engines.
  • Interactive Elements: Adding components initially with React and then optimizing with Vanilla JS.
  • Backend Integration: Creating API endpoints and working with databases via Drizzle ORM.
  • OG Image Generation: Automatic creation of images for social media.

By the end of the course, you will have not just theoretical understanding but a fully deployed full-stack blog that aligns with modern web development practices. You will acquire skills applicable to other projects: working with databases, containerization, and deploying full-fledged web applications.

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Whimsical Animations

Whimsical Animations

Sources: Josh Comeau
Learn how to create enchanting interactions and amazing details using the magic of CSS, JavaScript, SVG, and Canvas. I will share all my...
5 hours 7 minutes 31 seconds
Build Modern Websites with Astro!

Build Modern Websites with Astro!

Sources: James Q Quick
In this course, you will be able to take your blog to the next level by adding powerful features such as tags, pagination, authentication, comments...
7 hours 28 minutes 32 seconds
Animations on the web

Animations on the web

Sources: Emil Kowalski
Learn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. T
2 hours 23 minutes 59 seconds