なるべくお金をかけずに、複数人でコンテンツ管理が可能な静的Webサイトが作りたくなったのでNuxt3の勉強がてら作ってみます。
システム
GitHub - utautattaro/nuxt3-blogtest-systemContribute to utautattaro/nuxt3-blogtest-system development by creating an account on GitHub.
github.com
コンテンツ
GitHub - utautattaro/nuxt3-blogtest-contentContribute 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の導入
> 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/contentnuxt.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].vueindex.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
画像を利用する
 //画像を使う場合は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するとコンテンツがレンダリングされます。
