Contentfulチュートリアルメモ

CMS

正月で適度に時間があるので、前々から気になっていた https://app.contentful.com を試す

Contentful

いわゆるheadless CMSらしいということだけ知った上でチュートリアルに取り掛かる

※2019/01/01時点の内容です

チュートリアルメモ

事前準備

  • アカウント作成
    • 今回はgoogle認証から作成
  • npm i -g contentful
    • contentfulコマンドが実行できるようにしておく

1️⃣Sign in to a new or existing account

? Open a browser window now? -> Yes

ブラウザが立ち上がり、tokenが発行されるのでコピー

Paste your token here: -> 貼り付ける

2️⃣Create a Space to hold your content

? Create your new Space now? Yes

? Do you want to confirm the space creation? Yes

Gatsby Starter Blog というspaceができた

3️⃣Create your Content model and first Entries

? Populate the Content model to your Space now? Yes

推奨構成でモデルができる。

4️⃣Set up a Gatsby Starter Blog to display your content

We’ll now download the latest version of the Gatsby Starter Blog source to your machine. Just select a directory name, a destination, and we can continue. ということなので、適当な場所を選択するとDLされる

5️⃣Run the website in development mode on your machine

yesとやったらローカルで動くけど別にいまやらなくても良い気がする。

"scripts": {
    "dev": "gatsby develop",
    "build": "gatsby build",
    "heroku-postbuild": "gatsby build",
    "serve": "gatsby serve"
  }

ということなので、npm run dev とすれば起動できる。gatsby.jsですね。使ったこと無いや。

起動してしまった場合はCtrl-Cで終了すると次へ進む

Congratulations! The guide is now completed.

この時点で https://app.contentful.com/spaces/xxxxxxxx/entries. に移動するとサンプル記事が追加されており、適当に編集したあとローカルで見ると変更されていることが確認できる。

f:id:assaulter:20190101184829p:plain
適当に見出しを書き換えた

まとめ

チュートリアルを試しただけで、app.contentful.com側に

  • 個人のスペース
  • 管理画面
  • 記事を返すAPI

が作られた。gatsby側にgraphqlという文字列が見えるので、graphqlなAPIの口があるのでしょう。

次のアクション

チュートリアルだとNetlifyを使ってgatsbyなプロジェクトをdeployしましょうとあるのですが、一旦gatsbyとnetlifyなどのホスティングサービスについて調べてみることにします。