世界を旅して暮らしたい放浪エンジニアブログ

Nuxt.jsの本ブログにてsitemap.xmlを作成する方法

本ブログのsitemap.xmlを作成する為、@nuxtjs/sitemapを導入していきます。

[ 目次 ]

はじめに

こんにちは、香港に住んでいる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の導入と、設定のみで実現できるのでとても簡単ですね。

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts