GatsbyJS + Contentful + Netlifyの構成でブログを作ったので、まとめてみる。

今回は、ローカル環境の構築までが対象です。
（Netlifyで公開する際の手順はコチラ）

# ブログ作成のてそかポイント

「今日から新しくブログを作る！」

そう意気込むのはいいですが、僕の場合こうなります。。。

1. 某ブログサービス系を使うのは負けな気がする（ワイは凝ったの作りたいんじゃ！）
2. WordPress(CMS)をホストするためのVPSを探すが、お金かかるし構築てそいし嫌になってくる
3. とりあえず、ローカルでWordPressをイジイジし始めるも、どこにホストするか気になって途中で諦める。そもそもDB設定とかてそいし、、、
4. 「そうだ！静的サイトジェネレーターでいいんじゃね！」ってなり、GitHub pagesでホストしてみる（しかもデプロイ自動化なんかして）
5. 暫く勝った気分でいるけど、、、記事をいちいちコミットして更新するのがてそくなり、結局WordPress路線に戻りたくなる

はぁ(｡-д-｡)＜「また今度にしよ。。。」

※てそい＝めんどう（鹿児島弁です）

# そんなテソニストのために

CSMに戻りましょう！！でも、使うのはheadless CSMです(｣･Д･)｣

CSMだけどheadless！
コンテンツ管理できるけどフロントがない！
API経由でコンテンツデータを公開する！

つまり、、、　　 静的サイトジェネレーターでてそかった「記事のコミット」だけをCSMに移譲する感じ！

最強じゃん∑(-∀-ﾉ)ﾉ

## 具体的な記事作成の流れ

1. 静的サイトジェネレーターをビルド
2. ビルドプロセス内でheadless CSMからデータの取得
3. ビルド結果には記事データが載ってくる( *･ω･)bｸﾞｯ
4. それをホストするだけ！！

しかも、これらの処理は以下のトリガーで自動で動くように設定できます。

• Github上の対象リポジトリにPushしたとき
• Contentful上で記事をPublish（公開）したとき

※画像のSlackはビルド結果を通知しています。

# イカすブログの作り方

では早速構築していきましょう！！

##　必要な環境

• nodeJS,Gitが入ったPC
• GitHubのアカウント
• Contentfulのアカウント
• Netlifyのアカウント

※GitHubのアカウントを先に取れば、他はそれを使ってサインアップできます。

## ContentfulでAPI keysを取得

API keysはローカル環境を構築する際も必要になってくるので、先に取得しておくとスムーズです。
ビルド中、記事データ等をContentfulから取得するのに利用します。（認証として）

1. Spaceの作成

作成しておいたアカウントでログイン後、Create Spaceリンクからスペースの作成に入ります。
Spaceは、ブログデータを格納するためのフォルダ的な位置付けです。

プランは無料でOK！！

スペース名は任意です。
スペース上にサンプルの構成(Content model)を作ることもできますが、
今回GatsbyJS側から自動で構築してくれるスクリプトを流すので、Empty Spaceで行きましょう。

これで、Spaceが作られます。

2. API keysの取得

必要なAPI Keyは以下の通りです。

• Space Id：スペースの特定に使う
• Content Delivery API - access token：本番環境用（Draft状態の記事は取得しない）
• Content Preview API - access token：ローカル環境用（Draft状態の記事も取得する）
• ※Personal Access Tokens：Spaceの初期化(Modelを自動で定義してくれる)に利用

※Personal Access Tokensに関しては、1発目の初期化を行うため必要になってきます。 （一度初期化してしまえば不要になります）

これらの取得は、
対象Space -> Settings -> API Keys
から取得できます。
Personal Access Tokensだけは別タブにあるのでご注意を。

## ローカル環境構築

GatsbyJSを使っていきましょう！ （ReactJSを使った静的サイトジェネレーターです。）

1. GatsbyJSのCLIツールをインストール

なくてもできますが、コマンドを省略できるのでテソニストにはおすすめのCLIツールです。
とりあえず入れておきましょう！！

$ npm install -g gatsby-cli

2. スターターキットを使ったブログの作成

ReactJSをゴリゴリ書いてサイトを作ってもいいのですが、 なる早でブログを構築したいのでスターターキットを使うことにします。（テソニストの鏡）

今回はこちらを利用しました。

$ gatsby new sample-blog https://github.com/ryanwiemer/gatsby-starter-gcn.git

※sample-blogはお好きなブログ名に置き換えて実行してください。
※実行すると、カレントディレクトリ配下にsample-blogフォルダができて、ソースコードが配置されます。

gatsbyコマンドで構築した場合、依存モジュールのインストールまで自動でやってくれるので便利ですね。

3. setupの実行

setupを実行すると、API Keyの設定とContentfulのSpace初期化を対話式にやってくれるので便利です。

$ npm run setup

  To set up this project you need to provide your Space ID
  and the belonging API access tokens.

  You can find all the needed information in your Contentful space under:

  app.contentful.com -> Space Settings -> API keys

  The Content Delivery API Token
    will be used to ship published production-ready content in your Gatsby app.

  The Content Preview API Token
    will be used to show not published data in your development environment.

  The Content Management API Token
    will be used to import and write data to your space.

  Ready? Let's do it! 🎉

? Your Space ID {Space Idを入力}
? Your Content Delivery API access token {Delivery API access tokenを入力}
? Your Content Preview API access token {Preview API access tokenを入力}
? Your Content Management API access token {Management API access tokenを入力}

これで、準備は整いました。

4. ブログ起動！！！

$ npm run develop

このコマンドでローカル環境用のサーバが立ち上がります。
ちなみに、ローカル環境ではPreview用のAPIが呼ばれるため、Draft状態の記事データも読み込みます。

http://localhost:8000/にアクセスしてみましょう。

・・・・・・・

・・・・

・・

・

表示できました(･∀･)!!
build後にpublicフォルダをホスティングすれば、簡単に公開できちゃいます( ･ω･)ﾉ
次回の記事では、「Netlifyへのホスティング・自動デプロイの設定」を書いていきます。

雑なまとめですが、①は以上です！