Profile

Tech Note Blog with Astro

Astroを使ったサイト構築手順のまとめ


Static Site Generator Astroのセットアップ

By Kei Yokoo July 4, 2025 Posted in Astro
Static Site Generator Astroのセットアップ

こちらの記事では、static site generator Astroの開発手順をまとめます。

Astroとは

AstroはJavaScriptベースの多機能で効率的な静的サイトジェネレーターのひとつです。

以下のサイトでは現在starの数も第6位となっており、開発者コミュニティから高い評価を受けています。

https://jamstack.org/generators/

公式サイト

https://astro.build/

Astroの設定方法

※vs codeで作業をお行いますので、必ずインストールしておいてください。
また、vs codeにAstroのエクステンションも入れておくとよいでしょう。

1. Node.jsのインストール

こちらからダウンロード

https://nodejs.org/ja

2. npm npxの確認

npm --version
npx --version

でバージョンを確認する。

以下のエラーが出る場合は実行ポリシーを変更する必要あり。

npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。詳細については、「about_Execution_
Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。

参考サイト

https://ydk.vc/vscode-nodejs-scripts-about-execution-policies/ https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.5 https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4

実行ポリシーを変更する

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

3. Astroのセットアップ

作業ディレクトリを決め、ターミナルを起動 私の場合は

C:\Users\**USERE_NAME**\Desktop\Astro_test\astro

のディレクトリにしました。 USER_NAMEAstro_testastroなどは適宜変更してください。

ディレクトリを移動したら、 ターミナルに、以下のコマンドを入力

npm create astro@latest

これで初期設定完了です。


こちらもおすすめ