Astroの始め方

tutorial astro static-site tutorial

Astroの始め方

Astroは高速な静的サイトジェネレーターです。

Astroの特徴

  • ゼロJavaScript - 必要な時だけJavaScriptを送信
  • フレームワーク非依存 - React、Vue、Svelteなど好きなフレームワークを使用可能
  • 高速 - 最適化された静的サイトを生成

プロジェクトの作成

Terminal window
npm create astro@latest my-project
cd my-project
npm run dev

ページの作成

src/pages/about.astro
---
const title = 'About Page';
---


<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>これはAstroで作られたページです。</p>
  </body>
</html>

コンポーネントの作成

src/components/Card.astro
---
interface Props {
  title: string;
  description: string;
}


const { title, description } = Astro.props;
---


<div class="card">
  <h2>{title}</h2>
  <p>{description}</p>
</div>


<style>
  .card {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
  }
</style>

Astroは学習コストが低く、高性能なサイトを簡単に作成できます。