静的サイトジェネレーター「Astro」を軽く調べて立ち上げてみた

4827 ワード
React astro HTML JavaScript CSS HTML テキストリンク

Astroとは？

直訳

🚀 Astro紹介：新しいタイプの静的サイトビルダー
⚡️ React、Preact、Svelte、Vueで動作する
⚡️ Astroはすべてを静的なHTMLにレンダリングする
⚡️ 結果：デフォルトでJSは0バイト
⚡️ インタラクティブなコンポーネントをオンデマンドで読み込む

特に気になるのは

⚡️ Astroはすべてを静的なHTMLにレンダリングする
⚡️ 結果：デフォルトでJSは0バイト
⚡️ インタラクティブなコンポーネントをオンデマンドで読み込む

ですかね。
今回は実際にローカルで立ち上げてみるまでの手順公開のため、この恩恵を明示できないのですが...

Astroは2022/03/05現在で公開されている最新のバージョンは0.10.14とBeta版のようです。

前提

$ node -v
v16.14.0
$ npm -v
8.3.1
$ yarn -v
1.22.17

叩くコマンド（以下yarnで実行）

  1. npm init astro
  2. yarn install
  3. yarn start

以上

実行手順

  1. npm init astro

テンプレート選択
色々あるみたいですが、とりあえず起動してみたいだけですので「Starter Kit (Generic)」を選択します。

$ npm init astro

Welcome to Astro! (create-astro v0.7.1)
If you encounter a problem, visit https://github.com/withastro/astro/issues to search or file a new issue.

> Prepare for liftoff.
> Gathering mission details...
? Which app template would you like to use? › - Use arrow-keys. Return to submit.
❯   Starter Kit (Generic)
    Blog
    Documentation
    Portfolio
    Portfolio Svelte
    Minimal

フレームワーク選択
（今回こだわりはないので）一番上の「PReact」を選択します。

? Which frameworks would you like to use? ›
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◯   Preact
◯   React
◯   Solid
◯   Svelte
◯   Vue

Next stepsにgit initも入っていますが、今回はスルーで。

> Copying project files...
✔ Done!

Next steps:
  1: npm install (or pnpm install, yarn, etc)
  2: git init && git add -A && git commit -m "Initial commit" (optional step)
  3: npm run dev (or pnpm, yarn, etc)

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://astro.build/chat

2. yarn install
warningが出ているけど、へーきへーき！()

$ yarn install
yarn install v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning astro > @astropub/[email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning astro > @astrojs/language-server > [email protected]: This package has been renamed to @vscode/emmet-helper, please update to the new name
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 24.31s.

3. yarn start
準備ができたので提示されたhttp://127.0.0.1:3000/にアクセスしてみます。

$ yarn start
yarn run v1.22.17
$ astro dev
18:07 [astro] Server started                               113ms
18:07 [astro] Local: http://127.0.0.1:3000/

無事立ち上がりました！

おわりに

このような静的サイトジェネレーター（ビルダー）は他にも色々あり、結局どれがいいの？どれが自分・プロジェクトに合っているの？と迷うかもしれません

ですがご安心を...
なんと各種静的サイトジェネレーターとの比較まで公式ドキュメントにまとまっているではありませんか！
百聞は一見にしかず...。
と言うことで行ってらっしゃい！（投げやり）