Nuxt.js + WordPress のポートフォリオサイト

• 概要
• URL
• 構成
• 使用サービス・技術
• 使用モジュール
• ディレクトリ構成
• コマンド
• ステータス
• ブログ

概要

ポートフォリオサイトをNuxt.js と WordPress（WP REST API）を使用して再構築しました。

URL

• フロントエンド： https://works.yuheijotaki.dev/
• バックエンド（CMS）： https://works-wp.yuheijotaki.com/ のWordPress管理画面

構成

使用サービス・技術

• Nuxt.js（フロントエンド）
• WordPress（CMS）
  • JAMstack Deployments（Netlifyへの自動デプロイプラグイン）
• WP REST API（API）
• GitHub（Gitリポジトリ）
• Netlify（ホスティングサーバー）

使用モジュール

• axios（API連携）
• pug-loader（HTMLテンプレートエンジン）
• ress（リセットCSS）
• style-resources-module（.scss使用）
• dotenv-module（環境変数）
• analytics-module（Google Analytics）
• sitemap-module（sitemap.xml）

ディレクトリ構成

/
└ nuxt.config.js（Nuxt.js設定）
└ /dist/（配信コンテンツ）
└ /src/
    └ /static/（静的コンテンツ）
    |   └ /assets/
    |       └ /img/
    └ /assets/（コンパイル用コンテンツ）
    |   └ /scss/
    |   └ /font/
    └ /layouts/（共通レイアウトテンプレート）
    |   └ default.vue
    └ /pages/（ページテンプレート）
    |   └ index.vue
    |   └ /work/
    |       └ _slug.vue
    └ /components/（コンポーネント）
        └ Logo.vue
        └ Search.vue
        └ SingleCapture.vue
        └ WorksItem.vue
        └ WorksList.vue
        └ WorksSingle.vue

コマンド

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

ステータス

ブログ

• WordPress + Nuxt.js でポートフォリオサイトを作る その1
• WordPress + Nuxt.js でポートフォリオサイトを作る その2
• WordPress + Nuxt.js でポートフォリオサイトを作る その3
• WordPress + Nuxt.js でポートフォリオサイトを作る その4
• WordPress + Nuxt.js でポートフォリオサイトを作る その5
• WordPress + Nuxt.js でポートフォリオサイトを作る その6
• WordPress + Nuxt.js でポートフォリオサイトを作る その7
• WordPress + Nuxt.js でポートフォリオサイトを作る その8
• WordPress + Nuxt.js でポートフォリオサイトを作る その9
• WordPress + Nuxt.js でポートフォリオサイトを作る その10
• WordPress + Nuxt.js でポートフォリオサイトを作る その11
• WordPress + Nuxt.js でポートフォリオサイトを作る その12
• WordPress + Nuxt.js でポートフォリオサイトを作る その13