Build a lightning-fast blog with Astro

Astro is the latest framework for building content-first web sites. In this guide, I’ll introduce Astro’s key features.

Astroのアーキテクチャ 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.