nuxt.jsContentfulというサービスを知る機会があったので、それを用いてブログを作ってみました。Contentfulは、ユーザー向けのページを提供しないCMS(ヘッドレスCMS)というもので、コンテンツの追加・編集画面やデータベース、そしてそのコンテンツを利用するためのAPIなどを提供しています。ベルリンの会社で、Lyftとかも顧客にいるみたいです。いった形で簡単なブログを作ってみたいと思います。コードはこちらで公開しています。github.comContentfulまずはContentful周りの作業をします。以下のページからContentfulのアカウントを作成できます。使うだけなら無料です。www.contentful.comSpaceの作成その後、Spaceというものを作ります。データベースの名前みたいなものです。blogという名前の物を作ります。Modelというものを作ります。データベースで言うテーブルのようなものです。Modelでは、複数のFieldを定義していきます。種類は以下のようなものがあります。今回はこのようにフィールドを定義していきました。Modelの定義が終わったら、それに従ってContentを作成していきます。編集画面はこのようになっています。シンプルでとても使いやすいです。express次に、「Contentfulからデータを取得し、整形してレスポンスとして返す」APIをexpressで作成します。}}config.jsこちらに必要な値はContentfulで取得できます。text形式のデータをHTMLに変換するためのコードも含んでいます。text形式のデータについてはこちらを参照してください。記事のデータを取得といったようにしています。投稿のリストを取得します。以下のようなレスポンスが返ってきます。投稿の詳細を取得します。以下のようなレスポンスが返ってきます。style=\"font-weight:bold;\">ヘッドレスCMS</span>です。</p><p>以下のように画像を挿入したりもできます。1.50.46\"></img><p></p><p></p><p></p><p></p></div>"}Nuxt.js次に、expressからデータを取得して表示するページをNuxtで作成します。}}nuxt.config.jsNuxtの設定ファイルです。axiosモジュールを使うようにしています。],};layouts/default.vueデフォルトのレイアウトを定義します。#333;}</style>pages/index.vueトップページ(記事の一覧ページ)です。今回は簡単のためにコンポーネント化などはしません。none;}</style>pages/posts/_id.vue記事の詳細ページです。存在しない記事を見ようとした場合には404エラーになるようにしています。サーバーが立ち上がります。以下のように、記事の一覧ページ、記事の詳細ページを表示することができます。Contentful、相当使いやすいですね。疑問点などあったらコメントなどでご質問ください。passport.jsで1分でbasic認証を実装するpassport.jsを用いると、expressでbasic認証が簡単にできます。s3のデータを読み書きするaws-sdkパッケージを使います。Node.js向けのSQLクエリービルダーです。(1)リンクホームページfeedレビューのまとめスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。