[小ネタ]Astroという静的サイトジェネレータでWebサイトをサクッと作ってみた

こんにちは！コンサル部のinomaso(@inomasosan)です。

クラスメソッド入社前は、静的サイトジェネレータの一つであるHugoで個人ブログを書いていました。
それから数年が経ち別の静的サイトジェネレータを触ってみたいと思い調べていたところ、Astroを見つけたのでローカルでWebサイトを動かすところまでやってみました。

Astroとは？

AstroはWebサイトに特化して設計された静的サイトジェネレータとなります。

Next.js、SvelteKit、Nuxt、Remix等のモダンなWebフレームワークはクライアントサイドレンダリングが必要ですが、Astroの場合はサーバーサイドレンダリングを可能な限り活用します。 Webアプリケーションに特化して開発したいのであれば、Astro以外のWebフレームワークを検討していただく方が良いかもしれません。

また、公式ドキュメントの主な特徴には、以下のように記載されています。

• コンポーネントアイランド： 高速なウェブサイトを構築するための新しいウェブアーキテクチャー。
• サーバーファーストのAPI設計： ユーザーのデバイスから高コストのハイドレーションをなくします。
• デフォルトでゼロJS： サイトを遅くするJavaScriptランタイムオーバーヘッドはありません。
• エッジ対応： DenoやCloudflareのようなグローバルなエッジを含め、どこでもデプロイできます。
• カスタマイズ可能： Tailwind、MDX、その他100以上のインテグレーションから選択可能です。
• 特定のUIに依存しない： React、Preact、Svelte、Vue、Solid、Litなどをサポートします。

Astroのドキュメントの多くは日本語に対応しているので、詳細はそちらをご覧いただければと思います。

ただ、翻訳されたドキュメントの運命なのか、英語よりも古い箇所があったため、より正確な情報を得たい場合は言語を英語に切り替えたほうが良いでしょう。

やってみた

検証環境

今回実行した環境は以下の通りです。

セットアップウィザードを実行

以下のコマンドでプロジェクトを新規作成します。

% npm create astro@latest

初回プロジェクト作成の場合は、インストール確認されるのでyを入力します。

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

プロジェクト用に任意のルートディレクトり名を入力します。 ウィザードでディレクトリは自動作成されるため、事前に作成する必要はありません。 今回はtutorialと入力します。

Where should we create your new project?
tutorial

どのテンプレートを使用するかを選択することができます。 今回はInclude sample filesのままとします。

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

npm依存関係のインストールするか選べます。 今回はYesを選択します。

Install dependencies?
● Yes  ○ No

AstroはTypeScriptをサポートしています。 今回はYesを選択します。

Do you plan to write TypeScript?
● Yes  ○ No

TypeScriptの型チェックの厳しさを選択します。 今回はStrictのままとします。

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

gitリポジトリを初期化するかを選択します。 今回はYesを選択します。

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

入力した内容でセットアップが完了すると以下が表示されます。

Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./tutorial 
         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! ?
╰─────╯

Webサイトの動作確認

ローカルの開発サーバを起動し、ウェブサイトが動作するかを確認していきます。

まずは、プロジェクト用のフォルダに移動します。

% cd tutorial

以下のコマンドでAstroの開発サーバを起動します。

% npm run dev

特に問題なければ、以下のように表示されます。

> tutorial@0.0.1 dev
> astro dev

  ?  astro  v2.0.15 started in 26ms

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

ブラウザに上記URLを入力し、Webサイトを表示できることを確認していきます。

参考

まとめ

久々に静的サイトジェネレータを触ったのですが、Webサイトの作成を簡単に始められるのは魅力的ですね。 機会があればデプロイガイドも試してみようと思います。

この記事が、どなたかのお役に立てば幸いです。それでは！