[Astro] AstroでWebサイトを構築する

Astroは、Webサイト制作するためのWebフレームワークとなります。
ReactやVue.jsを使用するほど機能が複雑なわけでもなく、Wordpressを使用するにもデータベースのセットアップが必要となります。
Astoroはイベント告知や静的な情報を掲載するだけの、Webサイトを構築するのに最適となります。
とある案件において、通常のhtmlやcssを使用しても良かったですが、せっかくなのでAstroを使用して構築しました。
Webスピードは場合によってhtmlで作った時より早くなるケースもあるようです。

開発環境

• MacOS v14.6.1
• Node.js v18.18.2
• npm 9.8.1
• yarn 4.3.1
• Astro v4.15.4

Astroの導入

それではまずは以下のコマンドでAstroをインストールします。

npm create astro@latest

yarnでインストールしたい場合は以下のコマンドとなります。

yarn create astro

以下のように質問形式でメッセージが表示されますので、適宜入力していきます。
まずはプロジェクト名を入力します。

dir   Where should we create your new project?

次にどのようなプロジェクトを作成するかを選択します。

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

一番上の「Include sample files (recommended)」を選択します。

次にTypeScriptを使用するかどうかを選択します。

ts   Do you plan to write TypeScript?
    ● Yes  ○ No 

今回は私は使用するため「Yes」を選択しました。

次にどのような厳格さでTypeScriptを使用するかを選択します。

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

おすすめの「Strict」を選択します。

次に依存関係をインストールするかどうかを選択します。

deps   Install dependencies? (recommended)
    ● Yes  ○ No 

最終的にインストールするので「Yes」を選択します。

最後にgitリポジトリを初期化するかどうかを選択します。

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

一旦「Yes」を選択しましたが、最終的にどうやってプロジェクト管理をするかで決定してください。

Astroの起動

それでは以下のコマンドでAstroを起動します。

npm run dev

yarn を使用する場合は以下となります。

yarn run dev

以下のメッセージを表示し、ローカルでのWebサイトが起動します。

▶ Astro collects anonymous usage data.
  This information helps us improve Astro.
  Run "astro telemetry disable" to opt-out.
  https://astro.build/telemetry

15:59:17 [types] Generated 3ms

 astro  v4.15.4 ready in 623 ms

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

上記に記載されたURLにアクセスすると、Astroの初期画面が表示されます。

Webサーバーを終了する場合は「cntrl + c」で終了します。

Astroのビルド

Astroのビルドは以下のコマンドで行います。

npm run build

成功すると「dist」ディレクトリが作成され、ビルドされたファイルが格納されます。
こちらのファイルをアップロードすることでWebサイトが公開されます。

一旦基本的な動作については以上となります。
また今後はサイトを作成してみて、必要な情報を書き出していきたいと思います。