- 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 配下を動的生成)とシンプルに仕上げています。