なるべくお金をかけずに、複数人でコンテンツ管理が可能な静的Webサイトが作りたくなったのでNuxt3の勉強がてら作ってみます。
システム
https://github.com/utautattaro/nuxt3-blogtest-system
コンテンツ
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だけを操作するイメージ。
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
https://content.nuxtjs.org/get-started
> npm install --save-dev @nuxt/content
export default defineNuxtConfig({
modules: [
'@nuxt/content'
],
dir :{
public: "content/public"
}
})
> mkdir pages
> cd pages
> touch index.vue
> mkdir posts
> cd posts
> touch [...slug].vue
index.vue
<template>
<div>
<p> here is index.vue</p>
</div>
</template>
[...slug].vue
<template>
<main>
<ContentDoc />
</main>
</template>
// 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という名前で画像を保存
> git submodule add https://github.com/utautattaro/nuxt3-blogtest-content.git content
コンテンツを更新した場合は、submoduleをupdate
> git submodule update --remote
これでnpm run dev
もしくは npm run generate
するとコンテンツがレンダリングされます。
3D Gaussian Splattingで作成したplyデータのもやもやを超簡単に取る
2023年11月1日(水) 8時29分10秒 | 2448 viewエンジニアが「社会人サークル」を始めるべきである7つの理由
2022年8月16日(火) 14時29分57秒 | 586 viewWindows11でダークモードにした際にChromeでCSSが変更されて見えづらくなってしまう問題を解決した
2022年2月24日(木) 12時49分57秒 | 162 view埋め込み要素(iframe / embed)をいい加減対応させたい
2021年6月9日(水) 1時2分54秒 | 73 viewテキストから一意の値を算出する
2020年10月27日(火) 14時9分41秒 | 33 view