Sin Note

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

2021/01/14 01:44#Nuxt.js#microCMS

microCMSってなに?

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

Nuxt.jsってなに?

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

開発の流れ

前提

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

プロジェクトの作成

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

$ yarn create nuxt-app <project-name>

色々設定を聞かれると思うので、お好みで必要なものを追加していきます。
このサイトのソースコードも公開しています。
よければ参考にしてください。

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

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