Published on

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

microCMS ってなに?

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

Nuxt.js ってなに?

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

開発の流れ

前提

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

プロジェクトの作成

新規のプロジェクトを作ってみましょう。

以下のコマンドを実行します。

$ yarn create nuxt-app <project-name>

色々設定を聞かれると思うので、お好みで必要なものを追加していきます。
このサイトのソースコードも公開しています。
よければ参考にしてください。
デザインやサイト構造を決める。
デザインはシンプルなものがいいと考え Zenn のデザインを真似させてもらいました。
サイト構造はトップページにコンテンツの一覧を、プロフィール、各コンテンツ(blogs 配下を動的生成)とシンプルに仕上げています。