kobanote

マークダウン記法で書けるブログを作りました

2021.4.30

背景

このブログは、「Qiita感覚で書けるオリジナルメディア」を目指し、開設されました。
「ブログ = WordPress」という一強な感じに抗いたい欲から解放されるべく、Nuxt.jsを使用しました。それらの過程を備忘録として残しておきます。

使用技術

  • Nuxt.js

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

何はともあれプロジェクトを作成しない限りは開発どころではないので、サクッと作成します。 私は、yarnを使用しましたが、npmなどでも問題ありません。

$ yarn create nuxt-app project-name

上記のコマンドを実行すると、色々と聞かれますが、下記の質問でcontentを選んで頂ければ、他はお好きなものを選んで頂いて結構です。

? Nuxt.js modules:
  ( )Axios
  ( )Progressive Web App (PWA)
 >(*)content

記事はcontentディレクトリに書く

contentディレクトリの中に新たにblogsディレクトリを作成しましょう。
blogsディレクトリにmdファイルを作成し、マークダウン記法でお好きな記事を書いていきましょう。

---
title: kobanote
date: 2021.5.6
category: Programming
---

# At First...

記事の一覧ページを作成する

index.vueを編集する

pagesディレクトリにあるindex.vueを編集していきます。今回、私はTypeScriptとTailWindを使用し、コードを作成しています。

<template>
  <div class="w-full h-full">
    <div class="bg-top-img bg-cover w-4/6 h-64 m-auto my-10 lg:my-20" />
    <ul class="w-11/12 lg:w-9/12 mx-auto flex flex-wrap pb-12">
      <li class="w-1/2 mt-8 mx-auto text-center p-2 md:p-4 lg:p-8" v-for="b in blogs" :key="b.slug">
        <nuxt-link :to="b.slug">
          <h2 class="text-3xl font-semibold">{{ b.title }}</h2>
          <time>{{ b.date }}</time>
          <p class="text-xs md:text-sm lg:text-base">{{ b.description }}</p>
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData ({ $content }) {
    const query = await $content('blogs' || 'index').limit(10)
    const blogs = await query.fetch()
    return { blogs }
  },
})
</script>

_slug.vueを作成&編集

pagesディレクトリに_slug.vueというファイルを新たに作成し、コードを書いていきます。

<template class="w-full h-full">
  <article class="w-11/12 lg:w-9/12 mx-auto p-8">
    <h1 class="text-6xl text-center p-8">{{ blogs.title }}</h1>
    <nuxt-content :document="blogs" />
  </article>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData ({ $content, params }) {
    const blogs = await $content('blogs', params.slug || 'index').fetch()
    return { blogs }
  },
})
</script>

動作確認

最後に http://localhost:3000 にアクセスし、動作確認しましょう。 あとは、mdファイルに記事を書いていくだけです。 サクッと実現することができました。

Kobayashi

Developer