小ネタ集 2. Nuxt.js
2020年04月19日に公開

Nuxt.jsで作ったこのブログのコードをGithubに公開しました

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

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

共有リンク

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間の関連付けは以下の通りとなります。

contentful models

レイアウトの設計

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

layouts

コードのご質問は

Twitterでお気軽に。

https://twitter.com/esegrammer

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス