2021.12.27 追記
この記事で公開されているGitHubのURLは、Nuxt v2.13未満で作成したVersion4のコードとなります。
現在のレイアウトはVersion5となり、Nuxt v2.15 & TypeScriptで構築されています。
Nuxt×TypeScriptのブログ作成方法は、こちらのカテゴリーで公開しています。

このブログのソースコードを公開しました。

どうぞお気軽にダウンロードしてください。

共有リンク

Githubに公開しています。

https://github.com/andou0/nuxt_blog_template_v4

clone作成方法

< >内はご自身の情報に書き換える部分を表しています。
実際には< >の記号を含めずに設定してください。

まずはcloneコマンドをターミナルで実行し、依存するモジュールをインストールしてください。

$ git clone https://github.com/andou0/nuxt_blog_template_v4.git <app_name>
$ cd <app_name>
$ yarn install

次に.envファイルをルートディレクトリ直下に作成し、以下の環境変数を設定してください。

<app_name>/.env

## contentful
CTF_PERSON_ID=<person_id>
CTF_SPACE_ID=<space_id>
CTF_CDA_ACCESS_TOKEN=<access_token>
CTF_PREVIEW_API_KEY=<preview_api_key>
POSTLIMIT=20

## meta data
BASE_URL=http://localhost:3000
SITE_NAME=<サイト名>
BASE_DESC=<サイトの説明>

## SNS
TWITTER_ACCOUNT=<@を含めないtwitter_id>
FB_APP_ID=<facebook_user_id>
SLACK_LINK=<slackの招待link>
EMAIL=<問い合わせ先email>

## Google
GA_ADSENSE_ID=<ca-pub-から始まるadsense_id>
GA_TRACKING_ID=<UA-から始まるanalytics_tracking_id>

以上の設定が完了したらNuxt.jsを起動し、ブラウザで表示を確認してください。

$ yarn dev

Googleアドセンスの設定方法

components/ui/adsense/*内にあるコンポーネントファイルは、全てGoogleアドセンスのコンポーネントです。

slotIDは全て0000...に置き換えていますので、ご自身のIDに書き換えてください。

export default {
  data () {
    return {
      slot: '0000000000', // 書き換え
      env: process.env.NODE_ENV
    }
  }
}

Contentfulのmodel郡

contentfulのmodelとそのfields、model間の関連付けは以下の通りとなります。

レイアウトの設計

レイアウト設計は以下の通りとなります。

コードのご質問は

Twitterでお気軽に。

https://twitter.com/esegrammer