TL;DR
- Progressive Web App
- Google Tag Manager
- sitemap.xml
- feed
辺りの導入について
各モジュール類
全部Nuxtのコミュニティがサポートしていたりしますので簡単です。
GTM
用意するもの
- タグマネージャーのID(GTM-XXXXXXX)
実装方法
npm i @nuxtjs/google-tag-manager- nuxt.config.js の moduleへの追加
modules: [ // ... ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }], ]
PWA
用意するもの
なし
実装方法
npm i @nuxtjs/sitemap- nuxt.config.js の moduleに追加。
modules: { ... ['@nuxtjs/pwa', { icon: false }], //TODO Ensure static dir exists and optionally create static/icon.png. (Recommended to be square png and >= 512x512px) }
- manifestを設定（headと同じ階層）
manifest: { short_name: 'isoppp', name: 'isoppp.com', lang: 'ja', background_color: '#d4e0eb', theme_color: '#17a2b8', orientation: "portrait" },
これだけです。
基本的には恐らくキャッシュの機構がメインとなっていて、 当然ながらプッシュ通知を行いたい、等の場合は別途設定が必要です。
sitemap
用意するもの
なし ※ 今回のようなSSRせずにgenerateしてホスティングする場合、markdown編のgenerateの設定で使用している生成関数が必要です。
実装方法
npm i @nuxtjs/sitemap- nuxt.config.js の moduleに追加
modules: { ... ['@nuxtjs/sitemap'], }
- 設定の追加（SSRせずにgenerateしてhosting、記事の動的を含むURLの設定
sitemap: { hostname: 'https://isoppp.com', generate: true, gzip: false, exclude: [ '/404', ], routes: generateDynamicRoutes, }
feed
用意するもの
なし
実装方法
npm i @nuxtjs/feed
- nuxt.config.js の moduleに追加
mocules: { ... ['@nuxtjs/feed'], }
- 設定の追加
ここは色々と書き方があるのですが、当サイトの場合こんな感じになりました （今までの記事で使用している関数等があります）
ちょっと手間でしたねこれは…。
feed: [ { path: '/feed.xml', // The route to your feed. async create (feed) { feed.options = { title: 'isoppp.com Note', link: 'https://isoppp.com/feed.xml', description: 'isoppp.com Note Rss Feed', } sourceFileArray.forEach(item => { const summary = fileMap[item.replace('.md', '.json').replace('/markdown/', '/json/')] const note = require(path.resolve(__dirname, item.replace('/markdown/', '/json/').replace('.md', '.json'))) const post = { title: summary.title, url: 'https://isoppp.com' + sourceFileNameToUrl(item), description: summary.preview, content: note.bodyHtml, } feed.addItem({ title: post.title, id: post.url, link: post.url, description: post.description, content: post.content }) }) feed.addContributor({ name: 'isoppp', email: 'dummy@dummy.com', link: 'https://isoppp.com' }) }, // The create function (see below) cacheTime: 1000 * 60 * 15, // How long should the feed be cached type: 'rss2' // Can be: rss2, atom1, json1 } ]
おわりに
大体全部公式に載っている内容なので実装する場合はそちらも参照してください。 こういう系はNuxtコミュニティのmoduleが結構あってここは心強いですね。
目次
このサイト作ったぞシリーズです。
