Nuxt3+@nuxt/contentでブログを作ってcontentをgit submoduleで別リポジトリ管理にする

2023年6月14日(水) 12時57分6秒 | 228 view |

なるべくお金をかけずに、複数人でコンテンツ管理が可能な静的Webサイトが作りたくなったのでNuxt3の勉強がてら作ってみます。
システム


コンテンツ

利用イメージ

nuxt3-blogtest-systemの方でNuxt3製Webシステムを構築、contentディレクトリをnuxt3-blogtest-contentからgit submoduleで引っ張ってくる、著者はnuxt3-blogtest-contentだけを操作するイメージ。

手順

Nuxt3の導入

> npx nuxi init nuxt3-blogtest-system
> cd nuxt3-blogtest-system
> npm install


@nuxt/contentの導入

> npm install --save-dev @nuxt/content

nuxt.config.tsを編集

export default defineNuxtConfig({
 modules: [
  '@nuxt/content'
 ],
 dir :{
  public: "content/public"
 }
})


pagesフォルダを作成

> mkdir pages
> cd pages
> touch index.vue
> mkdir posts
> cd posts
> touch [...slug].vue


index.vue / [...slug].vueをそれぞれ作成

index.vue

<template>
  <div>
    <p> here is index.vue</p>
  </div>
</template>


[...slug].vue

<template>
 <main>
  <ContentDoc />
 </main>
</template>


content用ディレクトリを作成

// systemとは別階層で作成する
> mkdir nuxt3-blogtest-content
> cd nuxt3-blogtest-content
> mkdir public
> mkdir content
> cd content
> mkdir posts


nuxt3-blogtest-content/content/postsディレクトリにmarkdownファイルを追加

> touch hello.md


hello.md

# here is hello.md
画像を利用する
![myimg](/img/img.png) //画像を使う場合はpublic/img フォルダにimg.pngという名前で画像を保存


nuxt3-blogtest-system側でnuxt3-blogtest-contentをsubmodule化

> git submodule add https://github.com/utautattaro/nuxt3-blogtest-content.git content


コンテンツを更新した場合は、submoduleをupdate

> git submodule update --remote


これでnpm run dev もしくは npm run generateするとコンテンツがレンダリングされます。