#はじめに
簡単に自己紹介をしますと私は現在Vue.js中心に学習中のエンジニア未経験、フロントエンドエンジニア志望の者です。

ただ淡々と学習するのではなくアウトプットを通じて学習したことを深く理解すること、記事を残すことでこれを見た人へ何かしらのヒントになる情報を与えられることができればと思い作成しました。

##Nuxt.jsとは？
公式サイト
Vueから設計されたフレームワークです。
SSR（サーバサイドレンダリング）アプリケーションを簡単に作ることができます。

SSR（サーバサイドレンダリング）
本来クライアントサイドで実行して、レンダリングされるjavascriptの処理を、サーバサイドで実行して、レンダリングする仕組み。

##Contentfulとは？
公式サイト
Wordpress等と同じCMSの一種です。

CMS
=> Contents Management System（コンテンツ・マネジメント・システム）

webサイトを簡単に構築・管理・更新できるシステムです。

##JAM stackとは？
公式サイト
サーバーやデータベースに依存せずにサイトやアプリを作成します。
記事データはAPIで用意し、Nuxt.jsで各ページをマークアップすることで動的なコンテンツで静的なウェブサイトを構築する技術です。

主なメリット

##環境
エディタ
Visual Studio Code

ライブラリ等
node 12.16.3
npm 6.14.4
nuxt 2.12.2

##完成した物
こちらのリンクから実際のサイトをご覧できます。

##設計
ポートフォリオサイトページ構成

作品データ（Contentful）

Slug(スラッグ)について
SlugとはContentfulで記事を作成した時に設定する、サイト内の特定のページを識別するためのURLの一部です。
「vue.js-nuxt.js-portfolio」のように、キーワードをつなげて作ります。

##作成中に起きたトラブル
###問題1.
contentfulの記事データが読み込めない

解決方法
APIkeyを使う
「Space ID」と「Content Delivery API - access token」

// .contentful.json ファイル内
{
  "CTF_SPACE_ID": "Space ID",
  "CTF_CDA_ACCESS_TOKEN": "Content Delivery API - access token"
}

###問題2.
ブラウザに【未定義のプロパティ「field」を読み取れません。】と出てサイトが表示しなくなる。

解決方法
原因：Contentfulで新規記事作成の時Imageを追加していなかった
解決：サムネイル画像を設定

###問題3.
npmインストールしたらディレクトリ構成が変わってサイトが表示しなくなってしまった

解決方法
作業内容を戻す

$ git reset --hard HEAD

###問題4.
NetlifyでGitHubと連携したデプロイができない。

Error: Cannot find module ‘Contentful’

解決方法？

Git連携を諦めて普通にアップロードする

$ npm run generate

でdistファルダ作成
Netfilyでdistフォルダをドラッグ&ドロップ

#記事更新方法
GitHub連携はできなかったのですが、Contentfulで記事作成して、Netlifyでデプロイ更新するだけで記事の更新が反映されるのでそこまで手間にも問題にも感じていません。

#まとめ

最後に連携で詰まってしまい、５時間くらいかかってできなかったので一旦普通にデプロイしました。
いずれ再挑戦します。

フロントエンドエンジニア志望としては
Contentfulというサービスの使い方は学んでおいて損はなさそうです。
簡単にコンテンツが追加できるのは楽しいですね。

Nuxt.jsは初めてでしたがVue.jsが基本なので苦手な感じはしませんでした。
色々とエラーで苦しみながら成長できた気がします。
いい経験になりました！

これから自分なりに機能を追加したりスタイルを変えたりしてみようと思います。

ここまで読んでいただきありがとうございました。

##Link