GatsbyとPrismicで作るJamstackなWebサイト
- カテゴリー
- Jamstack
静的サイト生成もできるフルスタックなフレームワークであるGatsbyと、ヘッドレスCMSのPrismicを使い、JamstackなWebサイトを実装する方法をステップバイステップで解説します。
最終回 未公開記事のプレビュー画面
前回までの実装ではプレビューできなかった、未公開記事のプレビュー画面を作ります。404の画面で画面プレビューを表示させるという方法でこの問題を解決しましょう。
第7回 画面プレビュー：詳細画面と一覧画面への実装
画面プレビューを、ニュース詳細画面と一覧画面に実装していきます。プラグインを利用することで、一から画面プレビューを実装するよりも実装コストを抑えることができます。
第6回 画面プレビュー：プラグインのインストールと設定
Gatsby Cloudへデプロイしたニュースサイトの画面プレビューを実装していきます。Gatsbyには画面プレビューを作れるプラグインが用意されています。
第5回 Gatsby Cloudへのデプロイ
これまで作ってきたニュースサイトをGatsby Cloudへデプロイし、公開します。Gatsby Cloudの特徴や価格などを踏まえ、どのような場合にGatsby Cloudを利用するとメリットがありそうか、考えてみます。
第4回 ニュース詳細画面の実装
ニュースの詳細画面を作ります。今回のニュースサイトのように、記事と同じ数だけの、複数の画面を作りたい場合は、Gatsby Node APIを使います。
第3回 ニュース一覧画面の実装
GatsbyでPrismicのデータを取得する準備ができたら、GraphQL Data Layerから取得してきたデータを使ってニュース一覧画面を作ります。
第2回 PrismicのデータをGatsbyで取得する準備
GatsbyとPrismicを使う準備をします。Prismicにリポジトリを作成し、GatsbyではPrismicのデータを取得するための設定を進めていきましょう。
第1回 GatsbyとPrismic
GatsbyとPrismicを利用して、JamstackなWebサイトを実装していきます。まずはこの連載を通して作っていくWebサイトはどのようなものか、その全容を解説します。