このチュートリアルの目的

このチュートリアルでは、ContentfulというHeadless CMSでブログ記事を作成し、それらをNuxt.jsで表示させ、サイトをNetlifyで公開していきます。

このチュートリアルの前提

①Vue.jsをさわったことがある（公式チュートリアルで十分です）
②VS Code, Atomなどのコードエディタを持っている（無料で入手できます）
③Markdownを書ける（知らなくても、一瞬で書けるようになります）

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

1.1. Contentfulのアカウントを作成しよう

Contentfulトップページの「Try for free」から、Contentfulのアカウントを作成してください。後ほど、GitHubアカウントとの連携が必要になるので、GitHubアカウントでサインインするようにしてください。

アカウントが作成できたら、ユーザーページの左上のメニューボタンを押して、サイトバーを表示させてください。

サイドバー上部の「＋Create space」を押すと、Spaceの作成に入ります。「Space Type」は「Free」を選び、「Create an empty Space」を選択して、任意の名前をつけてください。

1.2. Content Modelを作成しよう

Spaceが作成できたら、Content Model（＝記事、カテゴリ、タグなどのデータがそれぞれどのような項目を含むかを決めるもの）を作成していきます。

1.2.1. Postモデルを作ろう
Spaceのメインページから「Create a content type」をクリックすると、Content Typeの作成に入ります。はじめに、記事データ用のContent Modelを作りたいので、名前を「Post」としてください。その他の項目は操作しなくて構いませんので、そのまま「Create」を押してください。

続いて、「Post」というタイプのデータがどのような項目（field）を持つかを決めます。まず、記事タイトル用のフィールドとスラッグ（個々の記事を特定するためのID）用のフィールドを作りましょう。

Content Modelのメインページ右の「Add fields」を押すと、そのタイプの持つ項目を追加できます。

タイトル：「Text」、「Short text」を選び、「Title」と名前をつけます。特に詳細設定の必要はないので、そのまま「Create」を押してください。

スラッグ：「Text」、「Short text」を選び、「Slug」と名前をつけます。今度は、「Create and Configure」を押してください。「Validation」タブにて「Unique field」を選びます（スラッグはIDとして用いるので、重複させないための設定です）。さらに「Apperance」タブにて「Slug」を選んでください（これにより、タイトルを入力すると自動でスラッグが生成されるようになります）。

同様の方法で、残りのフィールドを作っていきます。必要なフィールドと設定方法は以下に正確に従ってください。

1.2.2. Category, Tag用のModelを作ろう
加えて、カテゴリ（Category）、タグ（Tag）用のModelを作ります。共に、次の通りにフィールドを作成してください。

1.2.3. サンプルデータを作成しよう
Modelを作ったら、いくつかサンプルデータを作成しておいてください。面倒であれば、タイトルだけなどでも構いません。

1.2.4. APIキーを取得しよう
以上でContent Typeの作成は完了です。最後に、Nuxt.jsとの連携に必要なAPIキーを作成します。ページ上部の「Apps」タブに移動し、右の「Add API Key」をクリックするだけです。

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

以上で、Contentful側の準備は完了です。

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

2.2. Nuxt.jsプロジェクト作成しよう

Nuxt.js（Vue.jsベースのフレームワーク）のプロジェクトを作成しましょう。ターミナルで次のコマンドを実行してください。

$ npx create-nuxt-app jamstack-blog

npxを使うには、npmが必要です。まだインストールしていない場合は、こちらのページを参考にインストールを済ませたのち、上のコマンドを実行してください。

プロジェクトフォルダが作成されたら、フォルダ直下に移動します。

$ cd jamstack-blog

2.2. 必要なツールをインストールしよう

そこで、必要なツールをインストールしていきます：
　①stylus & stylus-loader: CSSをStylusで書くために使います
　②contentful: ContentfulとNuxt.jsを連携するのに使います
　③markdown-it: MarkdownをHTMLに変換するのに使います
　④vue2-filters: 記事データの抽出、並び替えに使います

$ npm install stylus stylus-loader contentful markdown-it vue2-filters --save

その後、pluginsフォルダのなかにcontentful.jsおよびvue2-filters.jsというファイルを作成し、それぞれ次の通りに編集してください。

$ cd plugins
$ touch contentful.js
$ touch vue2-filters.js

// plugins/contentful.js

const contentful = require('contentful')
const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

// plugins/vue2-filters.js

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
 
Vue.use(Vue2Filters)

2.3. Contentfulと連携させよう

プロジェクトフォルダ内のnuxt.config.jsを次の通りに編集してください。

// nuxt.config.js

const config = require('./.contentful.json')

const contentful = require('contentful')
const client = contentful.createClient({
  space: config.CTF_SPACE_ID,
  accessToken: config.CTF_CDA_ACCESS_TOKEN
})

module.exports = {
  // 
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN
  }
  modules: [
    '@nuxtjs/markdownit'
  ],
  plugins: [
    '~/plugins/vue2-filters'
  ], 
  markdownit: { 
    html: true,
    injected: true,
    linkify: true,
    breaks: false
  },
  generate: {
    routes () {
      return Promise.all([
        client.getEntries({
          'content_type': 'post'
        }),
        client.getEntries({
          'content_type': 'category'
        }),
        client.getEntries({
          'content_type': 'tag'
        })
      ]).then(([posts,categories,tags]) => {
        return [
          ...posts.items.map(post => `posts/${post.fields.slug}`),
          ...categories.items.map(category => `posts/category/${category.fields.slug}`),
          ...tags.items.map(tag => `posts/tag/${tag.fields.slug}`)
        ]
      })
    }
  }
  // ...
}

続いて、プロジェクトフォルダ直下に.contentful.jsonというファイルを作成し、次の通りに編集してください。

$ touch .contentful.json

{
  "CTF_SPACE_ID": "<先ほど作成したSpace ID>",
  "CTF_CDA_ACCESS_TOKEN": "<先ほど作成したaccess token>"
}

これで、プロジェクトフォルダの下準備は完了です。

3. 記事を表示させるためのテンプレートを作ろう

以上で既に、Nuxt.j側で記事を取得してページに表示させることができる状態になっています。これからページのデザインを行い、実際に記事を表示させていきます。

Nuxt.jsでは、ページ内の各セクション（ヘッダー、フッター、サイドバーなど）を、コンポーネントという小さい部品に区切って管理することができます。それぞれのファイルが長ったらしくならないだけでなく、一つのコンポーネントを複数の場所で使いまわすことができるので、非常に便利です。

今回は、あらかじめ準備してあるファイルを組み込んでもらった上で、ポイントになる箇所について説明します。

まず、プロジェクトフォルダ内のpagesとcomponentsの２つのフォルダを全て空にして下さい。

その後、下のリンクからComponents.zipをダウンロードし、中に入っている６つのvueファイルを、プロジェクトフォルダ内のcomponentsフォルダに入れてください。

さらに、下のリンクからPages.zipをダウンロードし、中に入っているフォルダとvueファイルを、プロジェクトフォルダ内のpagesフォルダに入れてください。

（編集中）

以上で、ブログを公開する準備が整いました。プロジェクトフォルダ直下で

$ npm run dev

を実行すると、開発モードでサイトを閲覧することができます。

4. Netlifyでサイトを公開しよう

今回は、Netlifyという無料のホスティングサービスを使ってサイトを公開します。

Netlifyを使うには、はじめにGithubというオンラインでファイルを管理するためのサービスを使い、テンプレートフォルダをアップロードする必要があります。

4.1. GitHubレポジトリを作成しよう

Githubのアカウントを持っていない場合、作成してください。アカウント作成後、右上の「＋」ボタンから「New repository」を選び、新しいレポジトリ（ファイルの置き場）を作成してください。

レポジトリ作成後、レポジトリのトップページにて、レポジトリへのリンクをコピーしてください。

4.2. GitHubレポジトリにプロジェクトフォルダをアップロードしよう

その後、VSCodeに戻り、ターミナルにて次のコードを順番に一行ずつ連続して実行してください。

$ git init
$ git add .
$ git commit -m"changed title"
$ git remote add origin <先ほどコピーしたレポジトリのURL>
$ git push -u origin master

途中でGithubのアカウント名・パスワードを聞かれた場合は、それらをターミナルに入力してください。

pushが完了すると、先ほど作成したレポジトリにテンプレートファイルがアップロードされているはずです。

4.3. NetlifyとGitHubを連携させよう

GitHubレポジトリとNetlifyと連携させて、ブログを公開します。Netlifyのアカウントを持っていない場合は、アカウントを作成してください。

アカウント作成後、「Sites」ページの右上にある「New site from Git」をクリックしてください。

すると、下のページに移るので、「GitHub」を選び、GitHubアカウントとの連携を行います。

GitHubアカウントとの連携が成功すると、GitHubレポジトリの一覧が現れるので、テンプレートフォルダがアップロードされているレポジトリを選択してください。

最後に、デプロイ（静的ファイルを生成し、ブログとして公開する作業）に関する設定を行います。下のように、「Build command」は「npm run generate」、「Publish directory」は「dist」とし、「Deploy site」をクリックしてください。

Netlifyでのデプロイプロセスが完了すると、自動生成されたURLにサイトが公開されています。URLを変更したい場合は、サイトトップページから「Site settings」を選び、「Site information」ボックス下部の「Change site name」から任意の文字列に変更できます。

URLへアクセスし、ブログが公開されていることが確認できれば、成功です。