Astroについて、特徴、ディレクトリ構造、このサイトでの使い方などについてまとめました。
Astroとは？
Astroは、ページの高速表示が得意なWebフレームワークです。
※フレームワークとは、アプリやWebサイトの開発に必要な土台・骨組みのことです。
- SSG（Static Site Generation：静的サイト生成）と呼ばれる仕組み
- ブラウザでWEBページの組み立て処理を行わず、事前に表示用のHTMLを生成（ビルド）する
- ビルドは、JavaScriptランタイムやパッケージマネージャ環境で行う
- ブラウザではすでに変換済みのHTMLを表示するので、表示速度が速い
- React、Vue、SvelteなどのJavaScriptライブラリも読み込んで使える
Astroは、ブログやコーポレートサイトなど、表示速度を重視するWEBサイトでよく使われているみたいです。
Astroのディレクトリ構造
Astroの標準的なフォルダ構成は以下のとおりです。
my-astro-site/
├── public/...画像やfaviconなど
├── src/
│ ├── components/...ボタンやヘッダーなどの部品
│ ├── layouts/...レイアウトテンプレート
│ └── pages/...各ページ
├── astro.config.mjs...Astro各種設定ファイル
└── package.json...プロジェクトの構成情報
public/配下
public/に置いたファイルは、ビルドで加工されず、置いたときのパスのまま公開されます。画像やfavicon、robots.txtのように、変換の要らない素材を格納します。
public/logo.png→https://example.com/logo.pngpublic/favicon.svg→https://example.com/favicon.svg
pages/配下
src/pages/に置いたファイルは、そのままWEBサイトのURLになります。
src/pages/index.astro→https://example.com/src/pages/about.astro→https://example.com/aboutsrc/pages/blog/first.astro→https://example.com/blog/first
ディレクトリの作成は、AIエージェントに「Astroのディレクトリを作って」と言えばOKです。
Astroのビルド・デプロイ方法
Astroでは、Webサイトとして閲覧できるようにするために、JavaScriptランタイム環境（Node.jsなど）でビルド（HTML変換）を行う必要があります。
このサイト（まなびのすけ）の制作環境では、ローカルにJavaScriptランタイム環境がなくビルトができないので、GitHub Actionsを使ってビルドとデプロイ（ファイルをサーバーに配置）を行っています。
GitHub Actionsを使った手順
.github/workflows/配下にGitHub Actionsの設定ファイル（.yml）を作成- 上記に、ビルドとデプロイの処理をそれぞれ書く
- 修正したファイルをGitHubに送る（プッシュ）
- プッシュのタイミングで、
.ymlが実行される- GitHub Actions上にあるNode.jsがHTML変換（ビルド）
- 変換されたHTMLをサーバーへ配信（デプロイ）
このやり方だとローカルで確認ができない点が手間ですが、`staging`ブランチにプッシュするとstaging環境に公開され、`main`ブランチにマージすると本番環境に公開されるように設定しています。
よくある質問（FAQ）
Q. AstroはJSを使わないサイトという意味ですか？
いいえ、サイト上でJavaScriptを一切使えないという意味ではありません。開発時にはReactなどのコードを書けますし、必要なパーツ（フォームなど）だけに絞ってJavaScriptを動かせます。不要なコードを自動でカットする仕組みという意味です。
Q. Astroでは、Reactなどのライブラリが使えますか？
使えます。Astroはビルドする際に、Reactで書かれたパーツを解析して「計算済みのHTML」へ変換して出力します。そのため、ブラウザ側でReact本体を動かす必要がなくなり、高速に表示されます。
Q. AstroはWordPressと組み合わせて使えますか？
使えます。WordPressをデータ管理画面（ヘッドレスCMS）として使い、記事データをAstro側に読み込ませて静的ページを作る構成が一般的です。