nuxt contentでブログ開設した話

oskn259

2021-08-27

プレイステーションを持っていないので、やったことの記録用のサイトを立ち上げました。
どうもwordpress興味湧きづらいし、フルスクラッチというのも後々のコンテンツ管理が面倒になるというのでnuxt contentというのを使いました。
MarkDownで記事を書くとwebページにしてくれるというやつで、wordpressみたいなCMSの既製品と、フルスクラッチの自由度の中間のような存在です。
構成と良いところ悪いところを整理して記録しておきます。

何をした

nuxt contentを使ってこのサイトを立ち上げました。
あとはvercelにデプロイするだけのお手軽構成。

コードベース用意

1	$ yarn create nuxt-app oskn259-blog

で初期設定。
色々と質問してくれるので好きなものを選びます。
今回はtypescript化、vuetifyを追加しました。
途中、contentオプションを追加するか聞かれるタイミングがあるので追加して進めればOKです。

ページの体裁を整える

デフォルトでデモページがあるので、この構造をそのまま使えます。
関連するディレクトリはこんな感じです。

1
2
3

content/   # ここにmdでページを書き足していくとwebページになる
layouts/   # ページに関わらず必要になるヘッダフッタを書ける
pages/     # 記事一覧、記事ページの見た目をここに記述

content/articlesにmdファイルを置いておくと、pages/に配置するコードではこんな感じで内容を取ってこれます。

async asyncData({ $content }) {
  return {
    article: await $content('articles')                // content/articlesディレクトリの中を探索
      .only(['title', 'banner', 'createdAt', 'slug'])  // select xxx from ... のxxxの部分に相当
      .sortBy('createdAt', 'desc')                     // 作成日時順に整列して取得
      .fetch()
  }
}

公開

vercelにGitHub連携でアカウントをつくって、導かれるままに設定したらできました。
最初はfirebaseのHostingにあげようとしていたのですが、それより断然簡単です。
push時にデプロイするというCI的挙動を、特別な設定なく自然にやってくれるのは楽ですね。

このサイトのURLとするドメイン名について、デプロイしたサイトのIPを紐づけて公開してくれるような機能もありました。
どこかでドメインを取ってきてvercelに突っ込めばいいぐらいの勢いです。
webコンソール画面もシンプルで、本当に道なりにやっていけばいいという印象です。

完成

サイト: https://blog.oskn259.com
コード: https://github.com/oskn259/oskn259-blog

良さ、悪さ

本当にMarkDownがサイトになってくれて、やったことメモがそのまま記事になってくれます。楽。
今回は記事の公開ページまでですが、例えば写真のギャラリーみたいなページを作ろうと思ったとき、
普通にページを一枚追加すれば実現できるという自由度の高さは良さそうです。
wordpressだとこれは大変な気がします（あんまwordpress詳しくないですが）。

個人的にはどっちかというとreact派なので、Next.js版があったら嬉しかったですね。
<template>の中でtypescriptの型補完してくれるエディタが欲しい。

今後

オサレ感な見た目にしたい
タグをつけてタグ検索みたいなこともできるっぽいので付け足したい
SEOを意識したmeta情報付与