はじめに#

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

前提条件#

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

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

1
$ node -v
2
v22.16.0
3

4
$ npm -v
5
10.9.2

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

• プロジェクト作成コマンドを実行

1
npm create astro@latest

• 新規プロジェクトをどこに作成するか
  何も入力せず Enter を押すとカレントディレクトリに fast-field という名前で作成される

1
dir   Where should we create your new project?
2
      ./fast-field

• テンプレートの選択で「Use blog template」を選択（矢印キーで選択）

1
tmpl   How would you like to start your new project?
2
      ○ A basic, helpful starter project (recommended)
3
      ● Use blog template
4
      ○ Use docs (Starlight) template
5
      ○ Use minimal (empty) template

• 依存関係のインストールで「Yes」を選択

1
deps   Install dependencies? (recommended)
2
      ● Yes  ○ No

• Git 初期化は「No」を選択

1
git   Initialize a new git repository? (optional)
2
      ○ Yes  ● No

• 初期化完了後、プロジェクトディレクトリに移動して開発サーバーを起動する

1
cd ./fast-field
2
npm run dev

参考画像：

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

起動ログの例:

1
> [email protected] dev
2
> astro dev
3

4
astro  v5.16.5 ready in 640 ms
5

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

9
watching for file changes...

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

テーマや追加リソース#

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

まとめ#

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