Astro #2：実行してみる

1. Astroの開発サーバーを起動する

astro.config.mjs を以下のように編集しておくと、Astro起動時にブラウザが自動でサーバーを開いてくれる。

import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    host: true,
    open: true
  },
});

VSCodeのエクスプローラで "NPM Script" にチェックを付け表示させておくと

エクスプローラー上から実行できるようになるので便利。

Astro #1：環境構築

Astroの環境構築

静的なWebサイトの開発が得意なフレームワーク、とのこと。
ということで、インストールを行ってみます。

1. node.jsインストール

node.jsをインストールしておきます。
※ 過去記事：Node.js：#1 インストールする

2. Astroインストール

node.jsのnpmコマンドでAstroの新規プロジェクトを作成することでインストールします。

npm create astro@latest

いくつか質問を聞いてきます。
・Where should we create your new project?

プロジェクト名(フォルダ名)を入力します。
→ 今回は "astro-test" と入力

・How would you like to start your new project?

・Include sample files (recommended) サンプルを含めるか？
・Use blog template ブログ用テンプレートを含めるか？
・Empty 空で作成するか？
→ 今回は Empty を選択

・Do you plan to write TypeScript?

TypeScriptを使うか？
→ お好きな方を選択

・Install dependencies? (recommended)

開発に必要なパッケージをインストールするか？
→ "Yes"

・Initialize a new git repository? (optional)

Gitレポジトリとして初期化するかどうか？
→ 今回は "no" を選択

インストールすると以下のフォルダ構成が作成されます。

---

Web開発, Astro