【Astro】プロジェクト作成～初期ページ表示までやってみる

Astroとは？

公式サイトによると、

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

https://docs.astro.build/ja/getting-started/

とのことです。

コンテンツにフォーカスという通り、ブログなどのコンテンツが豊富なWebサイト向きのフレームワークのようです。

今回はAstroでプロジェクトを作成するところまでやってみます。

プロジェクトの作成

プロジェクトを作成するには以下のコマンドを実行します。

npm create astro@latest

上記コマンドを打つとプロジェクトの作成が開始されます。その後は、何度か入力を求められるのでダイアログに沿って応答していきます。

以下のパッケージをインストールする必要があります。⇒y

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

どこにプロジェクトを作成しますか？⇒任意のフォルダを入力

私の場合、既にプロジェクトフォルダを作成済みだったので、直下に作成するように入力しました。

Where would you like to create your new project? ... ./

どのテンプレートを使いますか？⇒使いたいテンプレートを選択

私はデフォルトのJust the basicsを選択しました。

Which template would you like to use? » - Use arrow-keys. Return to submit.
>   Just the basics (recommended)
    Blog
    Portfolio
    Documentation Site
    Empty project

依存関係をインストールしますか？⇒y

Would you like to install npm dependencies? (recommended) ... yes

新しいgitリポジトリを初期化しますか？⇒gitの初期化をしたい場合はy

Would you like to initialize a new git repository? (optional) ... yes

TypeScriptをどのようにセットアップしますか？⇒TypeScriptの型チェックの厳しさを選択

私はrecommendedのStrictを選択しました。

How would you like to setup TypeScript? » - Use arrow-keys. Return to submit.
    Relaxed
>   Strict (recommended) - Enable `strict` typechecking rules
    Strictest
    I prefer not to use TypeScript

ここまで実行するとプロジェクトがセットアップされます。

実行

ひとまず、初期状態で動かしてみます。

npm run dev

すると、コンソールにlocalhostのURLが表示されるので、http://localhost:3000/にアクセスしてみます。

ページが表示されました！

補足

VS Codeで開発を行う場合、Astroという拡張機能を入れておくと便利です。

まとめ

まだ初期状態のページを表示しただけなので、ここから自分のコンテンツを構築していきたいと思います。