Nuxt Contentで作ったサイトをNetlifyで公開します。
検証した環境
| 1 | @nuxt/content | 1.8.1 |
Nuxtのgenerate設定を追加
Nuxt Content公式に書かれている generate の設定を「nuxt.config.js」に追記
発展的な機能 - Nuxt Content
nuxt.config.js
export default {
・・・
generate: {
async routes() {
const { $content } = require('@nuxt/content')
const files = await $content().only(['path']).fetch()
return files.map(file => (file.path === '/index' ? '/' : file.path))
},
},
}generateを試す
追記した generate が実行出来るかを試します。
私は $yarn create nuxt-app <プロジェクト名> でサイトを生成した時（TypeScript版です）に以下の npm-scripts が登録されていました
package.json
{
"scripts": {
"generate": "nuxt-ts generate",
"start": "nuxt-ts start",
・・・
},
}この generate と start を使います。
# distフォルダに書き出す
$ yarn run generate
# distフォルダの内容をローカルサーバで実行
$ yarn run start
=> localhost:3000 にアクセスこれで無事サイトが表示されればOK！
Netlifyの設定
GitHubやGitLab等のプロジェクトとNetlifyを連携します。 ここの手順はスキップします
NetlifyのBuild settings
- Build command・・
yarn run generate - publish directory・・
dist
にします。
あとはmasterブランチにマージ等する事でNetlifyにデプロイされます。
（余談）Basic認証の設定
有料になってしまいますがBasic認証を設定する事も出来ます。
以下の記事はNext.jsとの連携ですが参考になるはずです
Nuxt Content版だとざっくり私は以下のような設定になりました
package.json
{
"scripts": {
"generate": "nuxt-ts generate",
"start": "nuxt-ts start",
"echo-netlify-basic-auth": "echo \"/*\\n Basic-Auth: $BASIC_AUTH_ID:$BASIC_AUTH_PASSWORD\" > dist/_headers"
},
}netlify.toml
[context.production]
command = 'yarn run generate'
[context.develop]
command = 'yarn run generate && yarn run echo-netlify-basic-auth'
[context.deploy-preview]
command = 'yarn run generate && yarn run echo-netlify-basic-auth'
