One Framework To Rule Them All: Faster Websites With Astro

What if you could build a fast website that ships zero JavaScript by default? Learn how Astro's islands architecture makes it possible.

#1about 3 minutes

Introducing Astro for content-focused websites

Astro is a flexible framework designed specifically for building fast, content-focused websites like blogs and e-commerce stores, not complex web applications.

#2about 1 minute

Shipping zero JavaScript by default with Astro

Astro uses zero JavaScript as a baseline to ensure fast performance, allowing developers to intentionally add interactivity where it enhances the user experience.

#3about 2 minutes

Understanding the Islands Architecture for partial hydration

The Islands Architecture allows for partial hydration by loading JavaScript only for specific interactive components using client directives like `client:visible`.

#4about 2 minutes

A developer's journey from PHP and Gatsby to Astro

The speaker shares their personal experience moving from a custom PHP site and a complex Gatsby setup to Astro for a simpler, more focused development experience.

#5about 2 minutes

Exploring the Astro ecosystem of integrations and themes

Astro's ecosystem includes a wide range of official and community integrations for tools like Tailwind CSS and React, as well as themes to jumpstart projects.

#6about 1 minute

Real-world examples of companies using Astro

Major companies like Google, The Guardian, NordVPN, and Trivago are already using Astro to build their engineering blogs and content-heavy websites.

#7about 3 minutes

Getting started with a new Astro project

Learn how to initialize a new project using the CLI, understand the basic folder structure, and see the anatomy of a `.astro` file with its front matter and scoped CSS.

#8about 1 minute

Using content collections for type-safe markdown

Content collections provide build-time type safety for your markdown front matter, ensuring that required data fields like titles and dates are always present and correct.

#9about 7 minutes

Live demo of building and deploying a blog with a theme

A step-by-step demonstration shows how to create, customize, and deploy a full-featured engineering blog in minutes using an Astro theme and Netlify.

#10about 1 minute

Integrating UI components and choosing a rendering mode

Discover how to pass data from Astro into UI framework components like SolidJS and learn about Astro's support for server-side and hybrid rendering.

#11about 1 minute

Summary of when you should choose to use Astro

Astro is the ideal choice for content-focused projects, but may not be the best fit for highly dynamic, client-side web applications like dashboards.

#12about 4 minutes

Audience Q&A on use cases, CMS, and SEO

The Q&A session covers when to avoid Astro, CMS recommendations for non-technical users, using container queries, and how static site generation benefits SEO.