更新日:2020/4/30

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

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内容テキストフィールド必須

参考サイト

えいびふらい

© 2019 Sakihara Shinnosuke.