Nuxt.jsとマークダウンで簡単なブログサイトを作成する方法

Koushi Kagawa

2020年12月24日 22:50

Nuxt.jsにMarkdownで簡単にブログサイトを作成する方法を記載します。

Nuxt.jsのプロジェクト作成

下記参考にNuxt.jsのプロジェクトを作成してください。

※今回はUI frameworkにVuetify.jsを選択しました。

プロジェクト作成し、Nuxt起動すると下記のような画面が表示されます。

スクリーンショット 2020-12-23 16.29.31

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ファイルを作成しました。

スクリーンショット 2020-12-23 16.51.34

blog.mdファイルは下記のように記載しました。

---
title: ブログを始めました。
date: 2020.12.22
---
# ブログタイトル
## 今日からブログを始めました。
よろしくお願いします。

pagesディレクトリ配下にblogsディレクトリを作成

pagesディレクトリはいかにblogsディレクトリを作成し、下記２ファイル作成します。

- index.vue(一覧用)
- _slug.vue

スクリーンショット 2020-12-23 16.42.48

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>