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で実行）
npm init astro
yarn install
yarn start
以上
実行手順
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/webapi@0.10.14: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning astro > @astrojs/language-server > vscode-emmet-helper@2.1.2: 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/
無事立ち上がりました！
おわりに
このような静的サイトジェネレーター（ビルダー）は他にも色々あり、結局どれがいいの？どれが自分・プロジェクトに合っているの？と迷うかもしれません
ですがご安心を...
なんと各種静的サイトジェネレーターとの比較まで公式ドキュメントにまとまっているではありませんか！
百聞は一見にしかず...。
と言うことで行ってらっしゃい！（投げやり）
↧