Astroで静的サイトを作る

Astro

• Astro

ここしばらくAstroを触っていて、面白かったのでドキュメントサイトの作成に使ってみようと思っている。Astro自体は色々な使い方ができるようだが、ドキュメントサイトの作成を目的として、Starlightを使っていく。

静的サイトジェネレーターとして

ものとしてはJekyllに近いが、Liquidよりもとっつきやすい。ドキュメントが整っていて、参照しながら簡単にカスタマイズできた印象がある。ただ、Jekyllの経験も効いていると思う。

出来上がる静的サイトの基本構成は他のツールと大きくは変わらないが、デザインは整っている。他のツールと比較すると、プラグインを構成したりテーマを探さなくても綺麗なサイトが出来上がる。

Astroを開始する

AstroはNode.jsのツールで、現在の最低条件はv18.17.1またはv20.3.0以上。ここではLTSの最新バージョンを使う。

% node --version
v24.13.0

npm でインストールウィザードを実行。

• dir: 作成するディレクトリを指定する。空である必要がある
• tmpl: テンプレートは Starlight を指定する

% npm create astro@latest

> npx
> "create-astro"


 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./study-astro

  tmpl   How would you like to start your new project?
         Use docs (Starlight) template

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./study-astro
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

npmスクリプト

いくつかの npm スクリプトが登録されていて、作成中はこれらを使っていく。

• npm run dev: ローカルの開発サーバーが起動する。 src 以下のドキュメントや設定の変更を監視し、再ビルドとライブリロードを行う
• npm run build: サイトをビルドする
• npm run preview: Webサーバーを起動し、ビルドしたサイトを確認する

Starlightの更新

StarlightはBeta版（2026年1月）で頻繁に更新されいてる。以下のコマンドで定期的に更新すると良い。

npx @astrojs/upgrade