Nuxt.jsとマークダウンで簡単なブログサイトを作成する方法
Nuxt.jsにMarkdownで簡単にブログサイトを作成する方法を記載します。
Nuxt.jsのプロジェクト作成
下記参考にNuxt.jsのプロジェクトを作成してください。
※今回はUI frameworkにVuetify.jsを選択しました。
プロジェクト作成し、Nuxt起動すると下記のような画面が表示されます。
Nuxt/Content を利用する
Contentを利用します。
- Contentとは -
nuxt/contentモジュールを使ってNuxtJSアプリケーションを強化します。content/ディレクトリに書き込むことで、MongoDBのようなAPIを使ってMarkdown、JSON、YAML、XML、CSVファイルを取得します。これはGitベースのヘッドレスCMSとして動作します。
(上記サイトより引用)
下記を package.jsonに追記します。
"devDependencies": {
"@nuxt/content": "^1.0.0",
}
次に、nuxt.config.js に下記を追記します。
modules: [
'@nuxt/content'
],
※上記追加してエラーが表示された場合は、yarn install を実行してください
yarn install
contentディレクトリの作成
Nuxtディレクトリ直下にcontentディレクトリを作成します。こちらにマークダウンファイルを格納するようになります。
今回は、「content/blogs」ディレクトリを作成し、その下にblog.mdファイルを作成しました。
blog.mdファイルは下記のように記載しました。
---
title: ブログを始めました。
date: 2020.12.22
---
# ブログタイトル
## 今日からブログを始めました。
よろしくお願いします。
pagesディレクトリ配下にblogsディレクトリを作成
pagesディレクトリはいかにblogsディレクトリを作成し、下記2ファイル作成します。
- index.vue(一覧用)
- _slug.vue
index.vueファイルは下記のように記載しました。
<template>
<div>
<div v-for="b in blogs" :key="b.slug">
<nuxt-link :to="'/blogs/'+ b.slug">{{b.title}} {{b.date}}</nuxt-link>
</div>
</div>
</template>
<script>
export default {
async asyncData ({ $content, params }) {
const query = await $content('blogs' || 'index').limit(10)
const blogs = await query.fetch()
return { blogs }
}
}
</script>
_slug.vueは下記のように記載しました。
<template>
<article>
<h1>{{blogs.title}}</h1>
<p>{{blogs.date}}</p>
<nuxt-content :document="blogs" />
</article>
</template>
<script>
export default {
async asyncData ({ $content, params }) {
const blogs = await $content('blogs', params.slug || 'index').fetch()
return { blogs }
}
}
</script>
画面確認
ここまで終わったら下記にアクセスします。
すると、下記の洋画画面が表示され、
クリックすると詳細ページへ遷移します。
ccontent/blogs 配下にmdファイルを追加していくことで、ブログが増えていきます。
以上です。
参考
ドキュメントが充実しているでお馴染みのNuxt.js。とりあえず下記を読んでおくことをお勧めします。
https://ja.nuxtjs.org/docs/2.x/directory-structure/content/
読んでいただきありがとうございます。