NuxtでSiteMapを生成する方法
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
既存で作っていたものを、
試しにリプレイスしようとしている。
そんな中で、
- SiteMap
を生成しようとした時に、
調べたことなどを、
個人用にメモ。
ちなみに、
Nuxtのバージョンについても、
バージョン2系ではなく、
バージョン3系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
NuxtのModulesを確認
NuxtのModulesを確認すると、
- simple-sitemap
というモジュールがあるようなので、
こちらを使ってみます。
simple-sitemapを試す
上記の公式サイトにも記載のある、
simple-sitemap
を試します。
コマンド
npm i nuxt-simple-sitemap
こちらで、
モジュールのインストールを実施。
次に設定を行います。
最新情報は、
上記のNPMパッケージのサイトから、
Githubページを見てもらえると良いですね。
実際に試した時のメモ。
修正ファイル
nuxt.config.ts
調整内容
export default defineNuxtConfig({
modules: [
'nuxt-simple-sitemap',
],
runtimeConfig: {
public: {
siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
}
},
})
上記の調整を行って、
実際にコンパイル等を行って、
https://example.com/sitemap.xml
を確認してみると、
このような感じで、
sitemapが作成されました。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。