# vuepress-plugin-sitemap でサイトマップ自動生成
vuepress にブログ移行してから 1 年経ちますが、機能的にしても SEO にしてもとても満足しています。サイトのアクセス速度は Wordpress と比べ物にならないくらい速いので、ページビューも順調に増えています。強いて不満と言えば、自動的にサイトマップできなくて、毎回手動で作成してアップすることかな。
これまではxml-sitemaps (opens new window)というサイトマップ ジェネレーター 使っていましたが、毎回手動で入力しないといけないし、ビルドするのに時間かかるし、作成したサイトマップを再度アップロードする必要があります。慣れたらストレスなく作業はできますが、サイトマップをビルド忘れたら遅れたらするので、自動化できたらいいなあと思って調べました。
調べるとすでにvuepress-plugin-sitemapというプラグインが提供されているので、使ってみます！
プラグインをインストール
Yarn
yarn add vuepress-plugin-sitemap
NPM
npm i vuepress-plugin-sitemap
sitemap プラグインの設定できるオプション
- hostname
- outFile
- urls
- exclude
- dateFormatter
hostname は必須ですが、個人的に exclude で 404 ページも除外しておいたほうが良さそうです。
hostname:
type: string
required: true
default: null
description: website root url
example: https://pake.web.id
outFile:
type: string
required: false
default: sitemap.xml
description: sitemap file name
example: sitemap.txt
urls:
type: array
required: false
default: [],
description: custom urls to append
example: [
{ url: '/place', changefreq: 'monthly' }
]
exclude:
type: array
required: false
default: [],
description: pages path to exclude
example: ['/404.html']
dateFormatter:
type: function
required: false
description: change the date format
default: time => new Date(time).toISOString()
# .vuepress/config.js 設定ファイル変更
Vuepress v0.x は少し違いますが、1.7 使っているので Vuepress v1.x の設定でやっていきます。
plugin 設定 object
.vuepress/config.js
module.exports = {
plugins: {
sitemap: {
hostname: "https://hapicode.com",
},
},
};
plugin 設定 array
.vuepress/config.js
module.exports = {
plugins: [
[
"sitemap",
{
hostname: "https://hapicode.com",
},
],
];
これで完了？あとは npm run build 叩いたら自動的にdistディレクトリに sitemap.xml 生成される〜〜と思いましたが、エラーが出た。
# error vuepress-plugin-sitemap apply generated failed
generate 失敗でエラー発生 dateFormatter あたりに問題あるかもって感じのエラー
SITEMAP Generating sitemap...
error vuepress-plugin-sitemap apply generated failed.
RangeError: Invalid time value
at Date.toISOString (<anonymous>)
at dateFormatter (/Users/xxxx/Documents/hapicode.com/node_modules/vuepress-plugin-sitemap/index.js:24:60)
at pages.forEach.page (/Users/xxxx/Documents/hapicode.com/node_modules/vuepress-plugin-sitemap/index.js:69:13)
at Array.forEach (<anonymous>)
at generated (/Users/xxxx/Documents/hapicode.com/node_modules/vuepress-plugin-sitemap/index.js:56:13)
at AsyncOption.asyncApply (/Users/xxxx/Documents/hapicode.com/node_modules/@vuepress/core/lib/node/plugin-api/abstract/AsyncOption.js:33:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hapicode.com@1.2.0 build: `vuepress build docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hapicode.com@1.2.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
原因は@vuepress/last-updatedとvuepress-plugin-sitemapの設定にあります。
@vuepress/last-updatedに設定した最後の修正時間を一日前 １時間前をvuepress-plugin-sitemapはこのフォーマットサポートしていないからです。
@vuepress/last-updated の設定
"@vuepress/last-updated",
{
transformer: (timestamp, lang) => {
const moment = require("moment");
moment.locale(lang);
return moment(timestamp).fromNow();
},
};
# sitemap plugin に dateFormatter 指定
.vuepress/config.js にある sitemap の dateFormatter 指定することでエラー解消はできます。
"sitemap",
{
hostname: "https://hapicode.com",
exclude: ["/404"],
dateFormatter: val => {
return new Date().toISOString()
}
},
以上！
npm run build する度に最新の sitemap 生成されるようになります。
2020-12-08