GatsbyJSで作る静的サイト
- カテゴリー
- Jamstack >
- 静的サイトジェネレーター
全4回
静的サイトジェネレーターのGatsbyJSを解説します。React.jsとの親和性が大変高いため、React.jsのエコシステムの資産を使うことができるのが特徴です。
最終回 リストページとページネーションの実装
最終回は記事一覧ページを作成します。記事は多いのですべてを1ページでリスト化せず、任意の記事数ごとにページネーションを実装します。
第3回 テンプレートとデータを用いたページ生成
取得したMarkdownファイルのデータとページテンプレートを使って、新たなページを生成してみましょう。mdだけでなく、基本的にどのようなデータ形式でも同様の処理ができます。
第2回 ページ作成とデータソースの取得
ページ作成の2つの方法を解説します。ひとつはReact.jsコンポーネントを使用する方法、もうひとつは外部データを取り込んでページを生成する方法です。データソースの取得手順をマスターしましょう。
第1回 GatsbyJSに触ってみる
GatsbyJSは静的サイトジェネレーターのひとつです。React.jsをテンプレートエンジンのように使い、整備されたReact.jsのエコシステムにそのまま乗ることができるので大変ポピュラーです。さっそく触ってみましょう。