黒い画面（ターミナル）が怖くても大丈夫！ まずはローカル環境で「とりあえず動いた！」までを最短で体験できるよう懇切丁寧に解説します。
まず準備するもの
必要なのは次の2つだけです。
- Node.js（Astroを動かすため）
- VS Code（編集するため）
Astroは対応しているNode.jsバージョンが決まっていて、「特定のNode（例：v19やv21）はサポート外」といった注意もあるので、バージョンが合わないと先に進めません。 ただ、基本的には以下の手順に従い最新LTSバージョンを入れておけば問題ありません。
Node.jsのインストール
Windowsの場合
「公式インストーラー」を使えばOK。
色々選択肢はありますが、上記画像通り、「(LTS)」と記載のあるバージョンを選択しておきます。
その後、以下の画像のように、インストーラーのタイプを選択します。
「Windowsのインストーラー(.msi)」をクリックしてインストーラーをダウンロード、実行してください。
なお、インストール先など選択肢はすべてデフォルトでOK（変にフォルダをいじると、後でパスが分からなくなりがちなので）
Macの場合
Macも「公式インストーラー」からインストールできます。
色々選択肢はありますが、上記画像通り、「(LTS)」と記載のあるバージョンを選択しておきます。 その後、以下の画像のように、インストーラーのタイプを選択します。
「macOSのインストーラー(.pkg)」をクリックしてインストーラーをダウンロード、実行してください。 インストール先など選択肢はすべてデフォルトでOK。
インストールできた確認
ウィンドウズでも、Macでもターミナルを開いて、以下のコマンドを打ち込みます。
node -vnpm -v
以下のように、何かしらバージョンが出てくれば、無事にインストールができています。
node -vv24.3.0
npm -v11.7.0VS Codeの準備
公式サイトよりVS Codeを入れます。
インストール後、最低限これだけやると快適です。
- フォルダを開く：Astro用のフォルダ（例：
Documents/blog）を作って開く - 拡張機能（余裕があれば）
- Astro（.astroの補完）
- Markdown All in One（Markdown編集補助）
- markdownlint（Markdown規則に合致しているかチェック）
- 日本語化（必要なら）
Astroをインストール
Astroプロジェクト作成
作業フォルダ（例：Documents/blog）でターミナルを開き、以下を実行します。
npm create astro@latest blogすると対話形式のウィザードが始まります。
【最大の注意点】テンプレ選択で事故る
ウィザードの「どのように始めますか？」（テンプレ選択）では、必ず 「基本的な、役立つスタータープロジェクト」 か Empty を選んでください。 （いきなり凝ったテンプレを選ぶと、ファイルが多すぎて“何が大事か”が見えなくなり、高確率で迷子になります。（一敗））
私が実行したときの実際のインストールのログを以下に示します。
npm create astro@latest blogNeed to install the following packages:create-astro@4.13.2Ok to proceed? (y) y
> npx> "create-astro" blog
astro Launch sequence initiated.
◼ dir Using blog as project directory
tmpl How would you like to start your new project? A basic, helpful starter project
deps Install dependencies? Yes
✔ Project initialized! ■ Template copied ■ Dependencies installed ■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./blog 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! 🚀╰─────╯Astroをローカルで動かす
プロジェクト作成後、フォルダ（例：blog）へ移動して開発サーバーを起動します。
cd プロジェクト名（例：blog）npm run dev表示されたURL（だいたい http://localhost:4321 みたいなやつ）をブラウザで開いて、ページが出たら成功です。
お疲れ様でした！！
VS Codeについては、今回のとりあえず動かすタイミングでは使えませんでしたが、今後実際のマークダウン形式での記事の作成やAstroの左右の編集などに使用します。