Nuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう！【JAMstack】

Nuxt.jsを用いた静的サイト生成の方法を学ぶことに加え、ヘッドレスCMSのContentfulと連携させることでJAMstackサイト制作のスキルを学ぶ。教材内では、記事一覧ページ、個別記事ページの作成に加え、タグ機能、検索機能といった汎用的な機能の実装も学ぶ。

0章 : はじめに

0-1 Nuxt.js & Contentful & Netlifyでハイスペックなポートフォリオサイトを超簡単に公開しよう

0-2 環境構築(Mac)

1章 : Contentfulで記事データを作成しよう

1-1 Contentfulで記事を作成する用意をしよう

1-2 記事データを作成しよう

2章 : Nuxt.jsプロジェクトを準備しよう

2-1 Nuxt.jsアプリを新規作成しよう

2-2 Nuxt.jsアプリとContentfulを連携させよう

3章 : Nuxt.jsアプリケーションで記事データを取得・表示させよう

3-1 ヘッダーを作成しよう

3-2 トップページに作品一覧を表示させよう

3-3 作品アイテムをコンポーネント化しよう

4章 : 作品の個別ページを作成しよう

4-1 作品個別ページ用のファイルを用意しよう

4-2 スラッグを手掛かりに作品データを取得しよう

4-3 作品データを個別ページに表示させよう

4-4 本文をマークダウン形式で書けるようにしよう

5章 : カテゴリ＆タグページを作成しよう

5-1 カテゴリページを作成しよう

5-2 タグページ用のファイルを作成しよう

6章 : キーワード検索機能を実装しよう

6-1 検索結果ページを追加しよう

6-2 ヘッダーに検索ボックスを設置しよう

7章 : Netlifyでサイトを公開しよう

7-1 静的サイト生成のための設定をしよう

7-2 テンプレートフォルダをGitHubレポジトリにアップロードしよう

7-3 NetlifyとGitHubを連携させよう

1-2

記事データを作成しよう

Workデータ, タグデータを作成しよう

3つのモデルを作り終えたら、それぞれについていくつかサンプルデータを作成しておいてください。上メニューから「Content」へ移動し、「Add entry」から作成したいContent Typeを選択すると、データ作成画面に移動できます。

サンプルデータを自由に入力してください。

APIキーを取得しよう

データを作成できたら、Nuxt.jsとの連携に必要なAPIキーを作成します。ページ上部の「Settings」の「API keys」に移動し、右の「Add API Key」をクリックするだけです。

必要になるのは、「Space ID」と「Content Delivery API - access token」の２つです。

以上でContentful側の準備は完了です。次章ではNuxt.jsアプリを用意します。