まわりでAstroの話を耳にすることが増えてきたので、とりあえず触ってみました。

環境情報

• [email protected]

セットアップ

Astorのプロジェクトセットアップも、Next.jsなどと同様にcreateコマンドを利用します。

npm create astro@latest

対話形式で設定を行います。

まずはプロジェクト名（ディレクトリ名）を指定しましょう。

╭─────╮  Houston:
│ ◠ ◡ ◠  We're glad to have you on board.
╰─────╯

 astro   v2.0.6 Launch sequence initiated.

? Where would you like to create your new project? › first-astro-site

その後、テンプレートを選べます。今回はベストプラクティスに従ってみましょう。

? How would you like to setup your new project? › - Use arrow-keys. Return to submit.
❯   a few best practices (recommended)
    a personal website starter kit
    an empty project

npmの設定（？）についての質問が出ました。説明だけでピンと来なかったため、とりあえず推奨に従います。

? Would you like to install npm dependencies? (recommended) › (Y/n)

Gitのセットアップもやってくれるみたいです。

? Would you like to initialize a new git repository? (optional) › (Y/n)

最後に、TypeScriptの設定を選びます。

? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
❯   Strict - (recommended)
    Strictest
    Relaxed
    Help me choose

ここまでの対話とインストール作業を終わらせると、セットアップが完了します。

  next   Liftoff confirmed. Explore your project!

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

HoustonはGPT-3ベースのAI・・・らしい

対話画面に突然出てくるHustonですが、どうもGTP-3ベースのAIらしいです。

「Warning: Wrong answers are still common!」が潔くて個人的にいいなーってなってます。

ローカルで開発サーバーを立ち上げる

ローカルで立ち上げる方法も、Next.jsなどと同じくyarn devやnpm run devを使います。

$ yarn dev
yarn run v1.22.19
$ astro dev
  🚀  astro  v2.0.6 started in 25ms
  
  ┃ Local    http://127.0.0.1:3000/
  ┃ Network  use --host to expose
  

推奨設定で立ち上げると、こんな感じのサイトが表示されます。

とりあえずWordPressの記事データを入れてみる

動的なコンテンツを入れてみようということで、おなじみWordPressのAPIを叩いてみましょう。

src/pages/index.astroに、Axiosなどを使ったAPI呼び出し処理を追加します。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

import axios from 'axios';
const {data: posts} = await axios.get('https://central.wordcamp.org/wp-json/wp/v2/posts');
---

<Layout title="Welcome to Astro.">

その後、取得したデータをループで処理する実装も追加しましょう。

       <ul role="list" class="link-card-grid">
            {posts.map(post => {
                return (
                    <Card
                        href={post.link}
                        title={post.title.rendered}
                        body={post.excerpt.rendered}
                    />
                )
            })}
        </ul>

これで外部APIのデータを読み込んで表示できます。

静的なサイトとしてビルドする

ビルドと静的な配信もやってみましょう。

ビルドはastro buildを実行するだけです。その後、serveなどを使ってローカルで配信してみましょう。

% yarn build
% npx serve dist

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:    http://localhost:59417             │
   │   - Network:  http://172.00.00.6:59417           │
   │                                                  │
   │   This port was picked because 3000 is in use.   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

終わりに

とりあえずえいやで触ってみました。

アドオン的なものやビルトインのAPIなどを使えば、WordPressのデータの取得や表示ももっとよしなにできるかもしれません。