なるべくお金をかけずに、複数人でコンテンツ管理が可能な静的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
Get started with Nuxt Content by creating a new project or adding it to an existing Nuxt application...
content.nuxtjs.org
> 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
画像を利用する
![myimg](/img/img.png) //画像を使う場合は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
するとコンテンツがレンダリングされます。
mailchimpのフッターから自分の住所を削除する
2021年6月7日(月) 1時11分14秒 | 1167 viewPlayCanvas Editor APIで面倒な作業を自動化する
2022年4月18日(月) 6時39分30秒 | 153 viewWindows11でダークモードにした際にChromeでCSSが変更されて見えづらくなってしまう問題を解決した
2022年2月24日(木) 12時49分57秒 | 103 view【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい
2021年1月13日(水) 15時21分41秒 | 91 viewNCMBのスクリプト機能はGETでいいなと思ってもPOSTで設定しておこう
2021年3月6日(土) 18時29分49秒 | 42 view