Astro is the latest framework for building content-first web sites. In this guide, I’ll introduce Astro’s key features.
Diagram imagining Astro’s island architecture
Why choose Astro
Fast performance
Zero JavaScript by default. You can add JS only where you actually need it.
Flexible components
Use your favorite UI framework like React, Vue, or Svelte.
Great DX
A smooth developer experience with TypeScript and HMR right away.
Perfect for SEO
With static site generation, you can build a site optimized for search engines.
Setup steps
Create a project
Run the following command in your terminal.
Install dependencies
Move into the project directory and install the dependencies.
Start the dev server
Start the development server and check it in your browser.
Code example
// Simple JavaScript
const greeting = (name) => {
return `Hello, ${name}!`;
};
console.log(greeting('World'));// Type-safe TypeScript
const greeting = (name: string): string => {
return `Hello, ${name}!`;
};
console.log(greeting('World'));---
// Astro component
const name = 'World';
---
<h1>Hello, {name}!</h1>Notes
About compatibility
Starting with Astro 4.0, you need Node.js 18 or higher. Double-check the version of your development environment.
ヒント
You can customize your site settings in astro.config.mjs. Add integrations like MDX, Sitemap, and image optimization.
Done
You’ve finished the basic setup for your Astro project.
Reference links
Astro uses an “island architecture,” where each component runs independently. This way, only the necessary parts get hydrated, improving performance.
For more details, see the Astro official documentation.