BeginnerEngineerBlog
Kazuki Yokouchi
Kazuki Yokouchi

Astroをローカル環境で立ち上げてみた時のメモ

公開: 2023-10-24 18:12
更新: 2023-10-25 12:34
313
#astro #静的サイトジェネレーター SSG
静的サイトジェネレーター(SSG)のAstroを試してみたかったので、その時のローカル環境構築方法のメモです。

新しいプロジェクトの作成


下記の公式ドキュメント(日本語翻訳版)の「Astroを自動CLIでインストール」を参考にAstroの開発環境を構築してみました。

2023年10月24日時点での前提条件は下記とのことです。
Node.js - v18.14.1 またはそれ以上。


任意のディレクトリにてcreate astroを実行し、Astroをインストールしていきます。
※プロジェクトディレクトリはcreate astroの実行後にコマンドライン上で作成します。
npm create astro@latest

上記の実行後にコマンドで新規プロジェクトのディレクトリの作成や、既成テーマの使用有無、TypeSriptの使用有無を回答形式で入力していくと、依存するファイル等がインストールされます。



Astroを起動する

cdコマンドでプロジェクトインストール時に作成したプロジェクトディレクトリへ移動します。※自分はastro-sampleでディレクトリを作成したので下記の様になります。

cd astro-sample

該当のディレクトリに移動できたら下記のコマンドを実行で開発環境を起動します。

npm run dev

Astroは開発サーバーが予め内蔵されているので、起動が成功したら http://localhost:4321/で開発サーバーが立ち上がります。ブラウザで下記の画面が表示されれば、構築成功です。

今回は公式ドキュメントのインストール方法を参考に簡単に環境構築をしてみました。

0
0
0
5
通信エラーが発生しました。