特別なスタイルを当てなければブログの開発にたった1日。インフラの構築もたった1日、テスト環境では Netlifyを、本番環境では AWS Fargate を採用しました。インフラ周りについては後日記したく思います。
Contentful の管理画面より事前の登録が済んでいることを確認してください。予め登録でき次第、スペース Nuxt blog
、テンプレートに blog
、またフロントエンドフレームワーク (Nuxt.js) から Contentful の入るデータにアクセスするのに必要なトークンを設定してください。
# スペース
contentful space create --name 'Nuxt blog'
# テンプレート
contentful space seed --template blog
# アクセストークン
contentful space accesstoken create --name nuxt-blog
基本的にカラムを作るのも、各個人の判断に委ねられる訳ですが、この度当ブログにおいて下記のようにカラムを準備、各モデル全て必須 (required) 項目にしました。
Column | Type |
---|---|
Title | string |
Slug | string |
Hero image | string |
Description | string |
Body | string |
Author | object |
Publish | Date |
Tags | Array |
Category | string |
Hero Image
で設定しているが、Contentfulでは非常に容易に設定できる。
tags
や category
で設定しているが、こちらも容易に設定できる。
一通り .contentful.json
に設定を記述するが、Nuxtでは .env
を新たに作って、 process.envでアクセスできるようにします。
module.exports = {
env: {
CTF_PERSON_ID: CONTENTFUL_CONFIG.CTF_PERSON_ID,
CTF_BLOG_POST_TYPE_ID: CONTENTFUL_CONFIG.CTF_BLOG_POST_TYPE_ID,
CTF_SPACE_ID: CONTENTFUL_CONFIG.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: CONTENTFUL_CONFIG.CTF_CDA_ACCESS_TOKEN,
}
}
createClient()でインスタンスを作成することでブログを取得できるようになりました。
client
.getEntries(contentfulOptions)
.then(entries => {
// console.log(entries)
})
.catch(console.error)
CTF_PERSON_ID
ですが..🤔 設定し無くても普通に動作するので気にしない。