12周年記念パーティ開催! 2024/5/10(金) 19:00

GatsbyJSで作る静的サイト

全4回

静的サイトジェネレーターのGatsbyJSを解説します。React.jsとの親和性が大変高いため、React.jsのエコシステムの資産を使うことができるのが特徴です。

最終回 リストページとページネーションの実装

最終回は記事一覧ページを作成します。記事は多いのですべてを1ページでリスト化せず、任意の記事数ごとにページネーションを実装します。

第3回 テンプレートとデータを用いたページ生成

取得したMarkdownファイルのデータとページテンプレートを使って、新たなページを生成してみましょう。mdだけでなく、基本的にどのようなデータ形式でも同様の処理ができます。

第2回 ページ作成とデータソースの取得

ページ作成の2つの方法を解説します。ひとつはReact.jsコンポーネントを使用する方法、もうひとつは外部データを取り込んでページを生成する方法です。データソースの取得手順をマスターしましょう。

第1回 GatsbyJSに触ってみる

GatsbyJSは静的サイトジェネレーターのひとつです。React.jsをテンプレートエンジンのように使い、整備されたReact.jsのエコシステムにそのまま乗ることができるので大変ポピュラーです。さっそく触ってみましょう。