NuxtとContentfulで簡単ブログ生活
10月 09日

さくっと2日で完成しました!

特別なスタイルを当てなければブログの開発にたった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) 項目にしました。各フィールド以下のように丁寧に作るだけ。

contentful-model-list

Column Type
Title string
Slug string
Hero image string
Description string
Body string
Author object
Publish Date
Tags Array
Category string

contentful-sample-field

画像投稿するなら、

Hero Image で設定しているが、Contentfulでは非常に容易に設定できる。

hero-image-validation

バリデーションを設定するなら、

tagscategory で設定しているが、こちらも容易に設定できる。

contentful-sample-validation

エンドポイントを使うために、

一通り .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 ですが..🤔 設定し無くても普通に動作するので気にしない。

お問い合わせ
タイトル
メールアドレス
詳細

あわせてよみたい..

-----