jtk

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

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

f:id:jotaki:20190924093802p:plain

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の記事更新するたびにデプロイされる環境作成ができた。

f:id:jotaki:20200109144217p:plain

参考:

残りやること

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