Jamstack 事始め - Astro でサイトを作成し、Cloudflare でホスティング (その2: Astro でサイトを作成する)

Image Credits: CSS-tricks.com

Jamstack 事始めシリーズ第1回では、Jamstack とは何かで終わってしまいましたので、今回は Astro とは何かを記載した後に、実際に Astro を使ったコンテンツの作成とその動作確認までを行ってみます。

Astro とは？

astro.build

Build faster websites.
Pull content from anywhere and serve it fast with Astro's next-gen island architecture.

Static Site Generator ツールの1つですが、他にも多くあるツールと何が違うのでしょうか。
Why Astro? 🚀 Astro Documentation で5つほど上げています。

コンテンツ重視 (Content-focused)
- Astro はコンテンツが豊富な Web サイトを構築するために設計されています。
サーバーファースト (Server-first)
- HTML をサーバでレンダリングすることで、Web サイトの動作が速くなります。
- Astro は、クライアントサイドレンダリングよりもサーバサイドレンダリングを可能な限り活用しています。
- Astro は、SPA (Single Page App) ではなく、MPA (Multi Page App) アプローチを採用しています。
デフォルトで高速 (Fast by default)
- Astro で遅い Web サイトを構築することは不可能です。
- 良いパフォーマンスはいつも需要であり、コンテンツにフォーカスした Web サイトでは特に重要です。
簡単に使える (Easy to use)
- 専門家でなくても、Astro で何かを構築できます。
- Astro の目標は、全ての Web 開発者がアクセスできること。
  Web 開発のスキルレベルや過去の経験にかかわらず、親しみやすいと感じられるように設計されています。
充実した機能と柔軟性 (Fully-featured, but flexible)
- 100以上の Astro インテグレーションから選択できます。
- Astro は、Web サイトを構築するために必要なものが全て揃ったオールインワンの Web フレームワークです。
- Astro は UI に依存しないので、Bring Your Own UI Framework (BYOF) が可能です。
  (React、Preact、Solid、Svelte、Vue,、Lit は全て正式に Astro でサポートされています。 )

新鋭のツールで、まだ日本ではそこまで名前を聞きませんが、少しづつ、個人、企業でも試されてきているツールのようです。

ローカル環境で Astro を使ってサイトを作成

npm を使ってサイトを作成します。

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

╭─────╮  Houston:
│ ◠ ◡ ◠  Initiating launch sequence...
╰─────╯

 astro   v1.6.10 Launch sequence initiated.
 
? Where would you like to create your new project? › my-astro-site
✔ Where would you like to create your new project? … my-astro-site
✔ How would you like to setup your new project? › a few best practices (recommended)
          ■■▶ Copying project files...(node:88874) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Strict
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./my-astro-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

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut!
╰─────╯

プロジェクトにmy-astro-site という名前を付けていましたので、コマンドを起動したディレクトリにmy-astro-siteディレクトリが作成されております。移動します。

$ cd my-astro-site

package.json の中を確認してみます。

{
  "name": "@example/basics",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "astro": "^1.6.10"
  }
}

ローカルでサーバを起動してコンテンツを確認します。

$ npm run dev

> @example/basics@0.0.1 dev
> astro dev

  🚀  astro  v1.6.10 started in 40ms

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

ちゃんとローカルサーバが起動してコンテンツの確認がとれました。