なぜ ASTRO を HTML に変換するのですか？
Astro はランタイムではなくビルド ツールであるため、その主な役割は .astro コンポーネントを事前レンダリングされた HTML にコンパイルし、フレームワークに依存しない高速なページを作成することです。静的ホストへのデプロイ、ページのアーカイブ、または他のシステムへのマークアップの流用のために、生の .html ファイルが必要とされることがあります。
ASTRO から HTML への変換方法
Astro CLI ビルド FREE
プロジェクト内で npm run build（astro build を呼び出します）を実行します。Astro はデフォルトで dist/ ディレクトリに静的な .html ファイルとハッシュ化された CSS/JS を書き出します。
カスタム outDir を指定した astro build OPEN-SOURCE
astro.config.mjs で outDir を設定するか、astro build --outDir ./out を実行して、生成された .html を任意のフォルダに配置します。
これらの形式について
品質と注意点
- 出力されるのはレンダリング結果であり、ソースではありません。
.astroのフロントマター、コンポーネント、インポートはコンパイルされ、フラットなマークアップになります。 - サーバーサイド レンダリング（
output: 'server'）や動的ルートを使用しているページは、静的アダプターやgetStaticPathsがない限り、静的.htmlに事前レンダリングされません。 - HTML は
dist/内の外部ハッシュ化された CSS および JS ファイルを参照します。これらのアセットを保持しない限り、保存した単一のページではスタイリングが崩れる可能性があります。
よくある質問
Astro は HTML ファイルをどこに置きますか？
デフォルトでは
dist/ フォルダに置かれ、各ルートは独自の index.html（例：about/index.html）として出力されます。自己完結型の HTML ファイルを 1 つ取得できますか？
直接は不可能です。Astro は CSS と JS を個別のハッシュ化されたファイルに分割します。手動でインライン化するか、ブラウザの «名前を付けてページを保存» を使用する必要があります。
インタラクティブなコンポーネントは HTML 内でも動作しますか？
client:* ディレクティブでハイドレーションされた場合にのみ動作します。そうでない場合は、クライアント側の動作を持たない静的なマークアップになります。どのコマンドでサイトをビルドしますか？
内部で
astro build を実行する npm run build です。
