[ 目次 ]

• はじめに
• @nuxtjs/sitemapインストール
• nuxt.config.jsに設定を追加
• generateしてsitemap.xmlを確認
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNuxt.jsで作られている本ブログでsitemap.xmlを生成するように修正していきます。
@nuxtjs/sitemap を利用してsitemap.xmlを生成していきます。

@nuxtjs/sitemapインストール

■ npmを利用する場合

$ npm install @nuxtjs/sitemap --save

■ yarnを利用する場合

$ yarn add @nuxtjs/sitemap

nuxt.config.jsに設定を追加

modulesに読み込みの設定を追加します。

modules: [
   ['@nuxtjs/sitemap']
],
sitemap: {
  path: '/sitemap.xml',
  hostname: process.env.BASE_URL,
  cacheTime: 1000 * 60 * 15,
  gzip: true,
  generate: true, // 静的ジェネレート時にも利用
  exclude: [
    '/404*', // 404ページは除く
  ],
  routes: () => {
    return Promise.all([
      client.getEntries({
        'content_type': process.env.CTF_BLOG_POST_TYPE_ID
      }),
      client.getContentType(process.env.CTF_BLOG_POST_TYPE_ID)
    ])
    .then(([entries, postType]) => {
      const total = entries.items.length
      const pageCount = Math.floor((total - 1) / process.env.PAGENATE_LIMIT) + 1
      return [
        '/posts',
        ...[...Array(pageCount).keys()].map(i => '/posts/page/' + ++i),
        ...entries.items.map(entry => `/posts/${entry.fields.slug}`),
        ...postType.fields.find(field => field.id === 'tags').items.validations[0].in.map(tag => `/tags/${tag}`),
        ...postType.fields.find(field => field.id === 'category').items.validations[0].in.map(category => `/categories/${category}`)
      ]
    })
  }
}

generateしてsitemap.xmlを確認

npm run generate or yarn generate を利用して静的ファイルを生成してください。sitemap.xmlとsitemap.xml.gz（圧縮したsitemap.xml）が生成されます。
意図した形のsitemap.xmlが生成しているか中身を確認してみましょう。

問題なければ本番サーバーにデプロイします。

最後に

今回は、sitemap.xml の作成方法についてまとめました。
@nuxtjs/sitemapの導入と、設定のみで実現できるのでとても簡単ですね。