AstroとHygraphで作るWebサイト
- カテゴリー
- Jamstack >
- 静的サイトジェネレーター
- Jamstack >
- ヘッドレスCMS
全6回
WebフレームワークのAstroとヘッドレスCMSのHygraphを使ってWebサイトを構築するのを例に、コンポーネントを跨いだデータ取得や、ユーザー情報の取得など、実務ででくわしやすいケースにどう対処するかを解説します。
最終回クライアントサイドで動作するUI 後編
クライアントサイドで使うUIが取得したアカウント情報を使い回せるように、ストア機能を使ってみましょう。さらに、コンポーネントの依存関係を整理する実装を考えます。
第5回クライアントサイドで動作するUI 前編
クライアントサイドで扱うデータ例として、ログイン・ログアウト時に使用するログインアカウントの情報を取り上げます。この情報をどう取り回しながらUIを構築するのか解説します。
第4回ニュース画面をつくる
一括して登録したデータを使って、ニュース一覧画面と、動的にニュース本文画面を生成する方法を解説します。
第3回データの一括登録
前回までは基本を理解するためにHygraphに手動でデータを登録しました。今回はより実務に即したデータの一括登録を解説します。
第2回コンポーネントの分割とデータ取得
1つのファイルに書かれていたページコンテンツを責務によって分割します。また、分割したコンポーネントのどこでデータを受け取るのがよいか、その方法とメリット、デメリットを解説します。
第1回AstroとHygraphはどう連携するのか
CodeGridの実績に基づき、静的サイト構築にAstro、コンテンツ管理にHygraphというコンビネーションでの制作を解説します。まずは、Hygraphにコンテンツを登録し、Astroで基本的な1ページを生成し、2つのツールがどう連携するのかを掴みましょう。