はじめに
@nuxt/contentを使ってブログを作って公開してみたので備忘録的に一通りの手順を残しておきます。
@nuxt/content
GitベースのヘッドレスCMSとして動作するモジュールで、/contentディレクトリ内のマークダウン、JSON、YAML、CSVファイルを取得できます。
まずは環境構築
create-nuxt-app を使う
$ yarn create nuxt-app プロジェクト名
...
? Choose rendering mode Universal (SSR)
...
一通り終わったら、
$ yarn add @nuxt/content
nuxt.config.jsで以下の設定をします。
nuxt.config.js
modules: ['@nuxt/content'],
generate:{
async ready () {
const { $content } = require('@nuxt/content')
const files = await $content().only(['slug']).fetch()
console.log(files)
}
},
これで準備完了！！！
コンテンツを作成する
プロジェクト内の/contentディレクトリを作成。今回はマークダウンファイルを作成します。
content/
articles/
my-first-blog-post.md
my-first-blog-post.md
---
title: 記事のタイトル
description: 記事のディスクリプション
---
## heading
<info-box>
///
</info-box>
記事内では<info-box>のように/components/global/内で作成したVueコンポーネントを使用することができます。コンポーネントの南昌はケバブケースでしないとエラーが出ます。またセルフクローズタグは使えませんのでご注意。
コンテンツを表示する
template内で<nuxt-content>コンポーネントを使用して記事のbodyを表示します。
_slug.vue
<template>
<article>
<h1>{{ article.title }}</h1>
<nuxt-content :document="article" />
</article>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const article = await $content('articles', params.slug).fetch()
return {
article
}
}
}
</script>
netlifyにdeploy
netlify側の設定手順は以下
- netlifyにログイン、もしくは登録
- 「New site from Git」をクリック
- リポジトリとビルドコマンド(
yarn generate)、公開するディレクトリ(/dist)を選びます
あとはプロジェクトディレクトリ内でyarn generateを叩くと公開されます！
実際に公開したものはこちら(コンテンツはサンプルです)
おわりに
今回はNuxt-content + netlifyでブログを手軽に作成、公開までをざーーーっと書きました。
自分も環境構築から公開まで約１時間くらいで終わりました。
今後は検索機能やタグを付与したりなどどんどん拡張していきたいなと思います。