更新日:2019/11/23

microCMSとNuxt.jsでブログサイトを作ってみた

microCMS
Nuxtjs

microCMSってなに?

ヘッドレスCMSと呼ばれるAPIベースでのコンテンツ管理に特化したサービス
日本製では初めてではないでしょうか?
海外ではContentfulが人気を集めているよう

Nuxt.jsってなに?

公式ドキュメントに詳しく書いていますが、Vue.js アプリケーションを構築するためのフレームワークです。
SSR、SPA、静的サイトといった多種多様な使い道があります。
今回は静的サイト生成(generate)の機能を使ってサイトを作成しています。

開発の流れ

前提

yarnがインストールされていること

プロジェクトの作成

新規のプロジェクトを作ってみましょう。
以下のコマンドを実行します。

$ yarn create nuxt-app <project-name>

色々設定を聞かれると思うので、お好みで必要なものを追加していきます。

このサイトのソースコードも公開しています。
よければ参考にしてください。

デザインやサイト構造を決める

デザインはシンプルなものがいいと考ええいびふらいのデザインを真似させてもらいました。
サイト構造はトップページにコンテンツの一覧を、プロフィール、各コンテンツ(blogs配下を動的生成)とシンプルに仕上げています。
CMSのAPIスキーマは以下のように設定しています。

APIスキーマの設定

blogs

フィールドID 表示名 種類 備考
title タイトル テキストフィールド 必須
description 簡易説明 テキストエリア 必須
img メイン画像 画像 必須
body 内容 テキストエリア 必須
tags タグ テキストフィールド 必須、複数の場合は「,」で区切る

profile

フィールドID 表示名 種類 備考
head タイトル テキストフィールド 必須
element 内容 テキストフィールド 必須

参考サイト

えいびふらい