《Understanding Astro》

Source repository understanding-astro/understanding-astro-book: Learn to build remarkably fast websites with Astro ✨

English Introduction | 中文介绍

Preface

I desperately tried to make this book “work for everyone”, but that’s incredibly difficult.

So, to make the best out of this book:

• You should already know some HTML, CSS and JS: this is not a web development beginner guide.
• You should already know the basics of Typescript: I don’t expect you to be a Typescript champion, however, surface-level understanding will prepare you for all the Typescript in the book.

I wrote this book specifically for Mid, Senior and Senior+ engineers, and the book contains chapters of varying technical difficulty. However, I’ve done my best to explain these clearly and visually to satisfy different skill levels.

Chapter 1: Build your first Astro Application

• Build a personal website with Astro.
• Set up a local development environment for Astro.
• Familiarity with Astro components, layouts and pages.
• A working knowledge of styles and scripts in Astro.
• Theming Astro sites via CSS variables.
• Leveraging markdown pages for ease.
• Deployment of a static Astro application.

Chapter 2: Astro Components In-depth

• What zero Javascript means in practical terms.
• Why we should consider ditching the Javascript runtime overhead.
• Truly understand what an Astro component is.
• Understand the behaviour of Astro component markup, styles and scripts.
• Learn the powerful Astro template syntax and how it differs from JSX.

Chapter 3: Build Your Own Component Island

• An overview of different web application rendering techniques.
• Build your own component islands implementation from scratch.
• Comprehend the island architecture.

Chapter 4: The Secret Life of Astro Component Islands

• Hands-on experience working with framework components in Astro.
• Responsible hydration and why it matters.
• How component islands work in Astro.
• Why islands are essential.

Chapter 5: Oh my React!

• Styling Astro projects with Tailwind.
• Several syntax highlighting solutions for Astro.
• Leveraging content collections for scalable and type-safe development.
• Understand dynamic routing in Astro.

Chapter 6: Server-side Rendering (SSR) in Astro

• Understand how to enable SSR in an Astro project.
• Leverage environment variables to store secrets.
• Provide flexible server routing via dynamic routes.
• Understand the request-response cycle and its relevant properties.
• Take advantage of Astro API routes to power robust applications.

Chapter 7: Be Audible! (Fullstack Astro Project)

• The ability to add authentication to an Astro application.
• An understanding of setting up a backend for an Astro application.
• A working knowledge of handling form submissions without dedicated API routes.
• Hands-on experience uploading and retrieving data in an Astro application.
• An understanding of the kind of apps you can build with Astro.

Chapter 8: Build Your Own Astro Integrations

• The relationship between Astro and the Vite module bundler
• The different types of integrations available in Astro
• Build your first Astro integration
• Understand the Astro hooks lifecycle
• Deepen your knowledge of building custom Astro feature integrations

Conclusion

Firstly, I strongly recommend visiting the official Astro documentation. It’s a great resource that’ll benefit you long-term as you develop Astro applications.

Secondly, ponder the features that make Astro stand out:

• Leverage Component Islands: A new web architecture for building faster websites.
• Zero JS, by default: Keep applications fast with no JS runtime overhead.
• Edge-ready: Deploy anywhere, even global edge runtimes like Deno or Cloudflare.
• Incredibly customizable: Use Tailwind, MDX, and 100+ other integrations.
• Bring your own framework: Supports React, Preact, Vue, Svelte, Solid, Lit and more.