WordPress + Nuxt.js でポートフォリオサイトを作る その4

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その4

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

Netlify にデプロイ

Netlifyのサイト にデプロイできたので手順メモ

• Netlify でアカウント/サイト作成
• GitHub のリポジトリと紐付け
• nuxt.config.js の設定変更
• 記事更新時の自動デプロイ有効化

nuxt.config.js の設定変更

記事の更新時に静的HTMLの生成（npm run generate）できるように nuxt.config.js 仕込む

  const apiURL = 'https://works.yuheijotaki.com'
  // ...
  generate: {
    interval: 1000,
    routes() {
      return Promise.all([
        axios.get(`${apiURL}/wp-json/wp/v2/posts?per_page=100&page=1&_embed=1`)
      ]).then((data) => {
        const posts = data[0]
        return posts.data.map((post) => {
          return {
            route: '/work/' + post.slug,
            payload: post
          }
        })
      })
    }
  },
  // ...

記事更新時の自動デプロイ有効化

WP側でプラグイン JAMstack Deployments をインストール&有効化。
「設定」 > 「Deployments」からフック対象のカスタム投稿を選択、Build Hook URL をコピーしておく。

Netlify管理画面側で「Deploy settings」 > 「Build hooks」にビルドフックを追加。

以上でGitHubの対象（master）ブランチにプッシュするたび/WordPressの記事更新するたびにデプロイされる環境作成ができた。

参考：

• 【コードある】Nuxt + WordPress で netlify 運用が爆速すぎて神だった - Qiita
• Nuxt.jsでWordPressの記事をNetlifyにデプロイする（ざっくり版） – expexp.jp
• 【nuxt.js】WordPressで記事を更新したときにフックしてNetlifyに自動デプロイする方法 | hirakublog ヒラクブログ

残りやること

• データ登録・調整
• 全体スタインリング
• meta 調整