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

GitHub - utautattaro/nuxt3-blogtest-system

Contribute to utautattaro/nuxt3-blogtest-system development by creating an account on GitHub....

github.com

GitHub - utautattaro/nuxt3-blogtest-content

Contribute to utautattaro/nuxt3-blogtest-content development by creating an account on GitHub....

github.com

利用イメージ

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

手順

Nuxt3の導入

Installation · Get Started with Nuxt

Get started with Nuxt quickly with our online starters or start locally with your terminal....

nuxt.com

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

@nuxt/contentの導入

https://content.nuxtjs.org/get-started

> 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するとコンテンツがレンダリングされます。