NuxtでSiteMapを生成する方法

Vueを活用する中で、

「Nuxt」

のフレームワークを使用して、

既存で作っていたものを、

試しにリプレイスしようとしている。

そんな中で、

  • SiteMap

を生成しようとした時に、

調べたことなどを、

個人用にメモ。

ちなみに、

Nuxtのバージョンについても、

バージョン2系ではなく、

バージョン3系を導入して、

Nuxtを試している。

個人用の備忘録としてメモを残しておく。

Nuxt.jsの公式サイト

Nuxt.jsに関しては、

こちらのサイトを参考にしました。

リンクをメモ。

NuxtのModulesを確認

というモジュールがあるようなので、

こちらを使ってみます。

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が作成されました。

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

おすすめ書籍

スポンサー

人気記事

おすすめ記事