Seu Dev Notes

Astro をローカルで起動するまでの手順まとめ

Astro の公式ブログテンプレートを npm create astro@latest で作成し、ローカルの開発サーバーで表示するまでの手順。Node.js のバージョン条件、プロンプトで選ぶ項目(配置先・テンプレート・依存インストール・git 初期化)、起動ログの例つき。

· 414 字 · 2 分
目次 6 sections
  1. 01 はじめに
  2. 02 前提条件
  3. 03 プロジェクト作成（手順）
  4. 04 ローカルサーバー起動の確認
  5. 05 テーマや追加リソース
  6. 06 まとめ

はじめに#

公式ドキュメントをもとに、
Astro の公式ブログテンプレートを使ってローカル環境で起動するまでの手順をまとめています。

前提条件#

  • Node.js: v18.17.1 または v20.3.0 以上（v19 はサポート対象外）
  • テキストエディタ: VS Code、Astro 公式拡張機能
  • ターミナル: CLI を利用

node/npm のバージョン確認例

Terminal window
$ node -v
v22.16.0


$ npm -v
10.9.2

プロジェクト作成（手順）#

  • プロジェクト作成コマンドを実行
Terminal window
npm create astro@latest
  • 新規プロジェクトをどこに作成するか
    何も入力せず Enter を押すとカレントディレクトリに fast-field という名前で作成される
dir   Where should we create your new project?
      ./fast-field
  • テンプレートの選択で「Use blog template」を選択（矢印キーで選択）
tmpl   How would you like to start your new project?
      ○ A basic, helpful starter project (recommended)
      ● Use blog template
      ○ Use docs (Starlight) template
      ○ Use minimal (empty) template
  • 依存関係のインストールで「Yes」を選択
deps   Install dependencies? (recommended)
      ● Yes  ○ No
  • Git 初期化は「No」を選択
git   Initialize a new git repository? (optional)
      ○ Yes  ● No
  • 初期化完了後、プロジェクトディレクトリに移動して開発サーバーを起動する
Terminal window
cd ./fast-field
npm run dev

参考画像： プロジェクト作成時のターミナル画像

ローカルサーバー起動の確認#

起動ログの例:

> fast-field@0.0.1 dev
> astro dev


astro  v5.16.5 ready in 640 ms


┃ Local    http://localhost:4321/
┃ Network  use --host to expose


watching for file changes...

ブラウザで http://localhost:4321/ を開くと、Astro のブログテンプレートが表示されます。 ローカルで起動した、Astroのブログテンプレート

テーマや追加リソース#

公式テーマ以外にも、Astro のテーママーケットプレイスから様々なテーマを探せます。
無料テーマを探す場合の参考リンク：Themes | Astro

まとめ#

  • npm create astro@latest でテンプレートからプロジェクト作成
  • プロジェクト名・テンプレート・依存インストール・git 初期化をプロンプトで選択
  • プロジェクトのディレクトリに移動して npm run dev でローカルサーバーを起動し、http://localhost:4321/ を確認
#Astro
記事一覧