はじめに
Astroで簡単なWebサイトを作った時の環境構築メモです。
事前情報
Node.js: v14.18.0、v16.12.0、またはそれ以上
（執筆当時の情報）
Astroとは
コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
静的サイトジェネレーター(SSG) の1つです。
ページの読み込みは、「Astroで遅いウェブサイトを構築することは不可能です。」と言い切っているくらいには早いようです。
Astroは……
コンテンツ重視: Astroは、コンテンツが豊富なWebサイトのために設計されています。
サーバーファースト: HTMLをサーバーでレンダリングすることで、Webサイトの動作が速くなります。
デフォルトで高速: Astroで遅いウェブサイトを構築することは不可能です。
簡単に使える: 専門家でなくても、Astroで何かを構築できます。
充実した機能と柔軟性: 100以上のAstroインテグレーションから選択できます。
引用：Astroを選ぶ理由
ちなみにAstro公式サイトでは、「astro」「Astro」の2種類の表記があります。
どっちが正しいんでしょうか・・
「Astro」の方が正しい気がするので「Astro」でいきます。
Astroインストール
以下のコマンドを実行すると、対話型でastroのインストールを進めることができます。
npm create astro@latest
対話も分かりやすくて親切。。
Need to install the following packages:
create-astro@1.2.4
Ok to proceed? (y) y
√ Where would you like to create your new project? ... ./my-site
√ How would you like to setup your new project? » a few best practices (recommended)
✔ Template copied!
√ Would you like to install npm dependencies? (recommended) ... yes
✔ Packages installed!
√ Would you like to initialize a new git repository? (optional) ... no
◼ Sounds good! You can come back and run git init later.
√ How would you like to setup TypeScript? » Strict
✔ TypeScript settings applied!
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./my-site
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
開発サーバ起動
下記のコマンドを実行すると、開発サーバが起動します。
npm run dev
http://localhost:3000 にアクセスすると、Welcomeページが表示されます。
VSCode拡張機能インストール
コードハイライトを効かせるため、VSCodeの拡張機能をインストールします。
Prettierインストール
npm install --save-dev prettier prettier-plugin-astro
Tailwind CSS導入
npx astro add tailwind
インストールやら設定ファイルの作成やら面倒な作業を対話型でまとめてやってくれます。
終わったら、開発サーバを再起動すると反映されます。
おわりに
Gatsbyを使った時は環境構築に詰まって諦めたのですが、Astroは何も詰まることなく環境構築がさくっと終わって感動しました。
Astro最高！
これからちまちま記事上げていこうと思います。