http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その4
GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/
Netlifyのサイト にデプロイできたので手順メモ
記事の更新時に静的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の記事更新するたびにデプロイされる環境作成ができた。
参考: