GatsbyとPrismicで作るJamstackなWebサイト

全8回

静的サイト生成もできるフルスタックなフレームワークである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サイトはどのようなものか、その全容を解説します。