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
0:00
/ #1: Intro: Build a Full Stack Blog with Astro
All Course Lessons (23)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
GSAP3: Beyond the Basics
Sources: Carl (Creative Coding Club)
Ready to take your GSAP3 skills to the next level? In this course, I'll show you my favorite GSAP3 features that you absolutely need to know in order to...
8 hours 25 minutes 41 seconds
Full-Stack Fundamentals 1 - Frontend
Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
Normal UI
Sources: Anthony Alicea
You don't need to be a designer to make a web application more user-friendly. Successful web applications are user-friendly web applications. The better...
39 minutes 16 seconds