Astro を Codespaces で構築する
概要
静的サイトジェネレーター（ SSG: Static Site Generator ）として人気急上昇中の Astro 。開発環境を GitHub Codespaces に構築してみます。
解説動画
www.youtube.com
この記事の目次
GitHub リポジトリ作成
わかりやすい名前で、GitHub にリポジトリを作成します。今回は、とりあえず astro という名前でリポジトリを作成しました。Add a README file や Add .gitignore については、必要であれば、適宜追加してください。（今回は、Add .gitignore のプルダウンのところで、Node を指定し、.gitignore を追加しておきました。一応、README も追加しておきました。）
Codespace 作成
作成した GitHub リポジトリの <>Code▼ ボタンをクリックします。Codespaces のタブにある Create codespace on main ボタンをクリックします。
Astro インストール
まずはバージョンを確認してみます。
$ node -v v19.7.0
では、Astro のインストールです。
$ npm create astro@latest
このブログを執筆している時点でインストールされる最新バージョンは、2.1.3 となります。表示される質問に答えていけば、簡単にインストールが完了します。今回は、ディレクトを「 tutrial 」。依存関係をすべてインストールし、TypeScript を使用することにしました。
Need to install the following packages:
create-astro@3.1.0
Ok to proceed? (y)
╭─────╮ Houston:
│ ◠ ◡ ◠ Let's build something great!
╰─────╯
astro v2.1.3 Launch sequence initiated.
dir Where should we create your new project?
./tutrial
tmpl How would you like to start your new project?
Include sample files
✔ Template copied
deps Install dependencies?
Yes
✔ Dependencies installed
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
Strict
✔ TypeScript customized
git Initialize a new git repository?
Yes
✔ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./tutrial
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! 🚀
╰─────╯
表示してみる
tutrial ディレクトリに移動し、npm run dev で表示してみます。host オプションで 0.0.0.0 を指定してください。オプションを設定しないと Nginx がエラーをはきます。
参考サイト github.com
$ cd tutrial $ npm run dev -- --host 0.0.0.0
以下のような表示が出てくれば OK です。
