microCMS portfolio Template

このリポジトリは下記の記事に沿って構成されています。
Nuxt×microCMS×Netlify でポートフォリオを作ってみよう

技術構成

• Nuxt（SSG）
• microCMS（コンテンツ）
• Netlify（ホスティング）
• ESLint
• Prettier
• Sass

microCMS の API スキーマ設定

制作物

endpoint: works
type: リスト形式

フィールド ID	タイトル	種類
title	タイトル	テキストフィールド
thumbnail	画像	画像
overview	制作概要	テキストエリア
release	リリース日	日時
term	作業期間	テキストフィールド
url	URL	テキストフィールド
responsibility	担当	セレクトフィールド（複数選択）
skill	技術	セレクトフィールド（複数選択）
tools	ツール	セレクトフィールド（複数選択）
points	アピールポイント	テキストエリア

サイト設定

endpoint: settings
type: オブジェクト形式

フィールド ID	タイトル	種類
mainVisualPc	メイン画像（PC）	画像
mainVisualSp	メイン画像（SP）	画像
profileImage	プロフィール画像	画像
name	名前	テキストフィールド
nameEnglish	英名	テキストフィールド
skills	技術スタック	テキストフィールド
hobby	趣味	テキストフィールド
message	自己紹介	テキストエリア

環境変数

プロジェクトルートの.env.templateファイルを.envに変更して、以下の項目を設定してください。

• GET_API_KEY（microCMS の API キー）
• SERVICE_DOMAIN（microCMS のサービス ID）

開発方法

# 依存関係をインストール
$ yarn install

# 開発サーバーを起動（localhost:3000）
$ yarn dev

# ビルド & 開発サーバーを起動
$ yarn build
$ yarn start

# 静的生成
$ yarn generate