Astro.jsでサイト構築したので、導入した際の構築準備の備忘録です。

CONTENTS

Astro.jsとは

まずAstro.jsとは・・・って最近仲良くさせてもらっているChatGPTに聞いてみたのでそのまま転載です。

Astro.jsは、モダンなWeb開発フレームワークであり、React、Svelte、Vueなどのフレームワークと同じように、コンポーネントベースのアプローチで静的なWebサイトやWebアプリケーションを構築するために設計されたツールです。

Astro.jsは、ビルド時間やパフォーマンスなどの点で優れており、SSR（サーバーサイドレンダリング）や静的サイトジェネレーターとしても機能します。また、Astro.jsは、JavaScript、TypeScript、CSS、Markdownなどのさまざまなファイル形式をサポートしており、開発者が自由に使用できるようになっています。

Astro.jsは、オープンソースプロジェクトであり、GitHub上で開発が進められています。また、Astro.jsには、公式のドキュメントやチュートリアル、サンプルプロジェクトなども用意されており、開発者が学習しやすいようになっています。

・・・だそうです。（手抜きでスミマセン・・・）

https://astro.build/

 

導入方法

まず前提として、node.jsとnpmがインストールされている必要があるのでインストールしておきます。

1. node.jsとnpmのインストールできたらプロジェクトの新規作成。

npm create astro@latest

2. インストールの質問をされるので、下記のように進めていく。

Need to install the following packages:
create-astro@3.1.2
Ok to proceed? (y)

→ [y] を入力

Where should we create your new project?

→ プロジェクトのディレクトリ名を入力

How would you like to start your new project?
● Include sample files (recommended)
○ Use blog template 
○ Empty

→ テンプレートを使用するか選択

Install dependencies?
● Yes ○ No

→ npm依存関係のインストールをするか選択

Do you plan to write TypeScript?
● Yes ○ No

→ TypeScriptを使用するか選択

How strict should TypeScript be?
● Strict (recommended)
○ Strictest 
○ Relaxed

→ TypeScriptを使用する場合は、厳密具合の選択（TypeScriptの使用をNoにした場合はこの質問はない）

Initialize a new git repository?
● Yes ○ No

→ gitリポジトリを初期化するか選択

 

動作確認

上記までで導入は完了なので、実際に動作しているかサイトを開いて確認します。

cd [上記で入力したプロジェクトのディレクトリ名]

でディレクトリを移動して、

npm run dev

でサーバを起動すると、

> projectname@0.0.1 dev
> astro dev

🚀 astro v2.2.3 started in 58ms

┃ Local http://127.0.0.1:3000/
┃ Network use --host to expose

こんな感じで表示されるので、localのURLにアクセスして動作確認をします。
下記のように（テンプレート選択時に「Include sample files (recommended)」の場合）表示されていればOK。

これで準備完了です。