GWひまだったのでNuxt.js+Contentful+netlifyを利用してブログをつくってみました。その過程でやったこと、地味に詰まったことに関する覚書です。

最終的に、かなりあっさりやりたかったことが実現できて驚いています。
ブログが欲しいけど広告入るのは嫌、WordPressはサーバが必要だしなんとなく荷が重い、という方におすすめです。

  1. Contentfulに記事を作成
  2. Nuxt.jsでWebサイトを作成
  3. netlifyでビルド&デプロイ(Bitbucket連携)

Contentfulに記事を作成

Contentfulは、APIベースのCMS(コンテンツ管理システム)です。個人の小規模ブログなのでfreeプランで十分でした。

アカウント作成&設定

The beginner's guide to Contentful」を参考にまずは下準備。

  • Contentfulアカウント作成
  • スペースの作成
  • コンテンツモデルの作成
  • Content Delivery APIアクセストークンの取得

コンテンツモデルの作成は、記事で入力する項目(タイトルやアイキャッチ画像など)=APIで取得できるJSONフィールドを定義する作業です。複雑なフィールドは必要としていなかったことと、UIがわかりやすかったことから、迷うことは少なかったです。

Content Delivery APIアクセストークンは、メニューの「Settings」→「API Keys」→「Content delivery/preview tokens」から取得できます。
もう一つ「Content Management APIアクセストークン」というものもありますが、こちらは使用しませんでした。(他のスペースから記事をインポートしたりする時に使うみたいです)

記事の作成

メニューの「Content」から記事を作成します。Markdownでさくさく書けます。

Tips:「Status」の概念

各記事には、PUBLISHED, CHANGED, DRAFT, ARCHIVEDといったステータスの概念があり、簡単に切り替えることができます。作成直後は「DRAFT」のステータスとなり、すぐに公開はされません。記事を選択して「PUBLISHED」に変更することで初めて公開されます。

記事だけではなく、画像にもステータスの概念があります。
記事をPUBLISHEDに変更しただけでは、画像はDRAFTのままなのでAPIを叩いても取得することができません。記事のプレビュー画像の右上にオレンジの丸が表示されている場合、画像がDRAFT状態になっていることを示しています。
画像アップロード時にちゃんと「Publish」ボタンを押すか、メニューの「Media」からステータスを変更することで取得できるようになります。

Tips:YouTube埋め込み

こちらの記事のコードでサムネイルの埋め込みができました。プレビューにもちゃんと表示されます。
QiitaにYouTubeを埋め込む(MarkdownにYouTubeを埋め込む)

Nuxt.jsでWebサイトを作成

Nuxt.jsで記事を表示するページを作成します。Contentfulで作った記事は、公式で用意されているJavaScriptSDK経由でAPIを呼び出して取得します。

Contentfulを利用するための準備

公式のNuxt.jsチュートリアルを参考に、JavaScriptSDKのインストール、プラグインモジュールの作成を行います。
Integrate Contentful with Nuxt.js

Tips: .contentful.jsonの設定

最初何を設定すればいいかわからずに迷ったのですが、以下の内容を設定したら動作しました。

CTF_PERSON_ID

デフォルトのままでOK(適当な値を入れても動くっぽいので謎のフィールド…)

CTF_BLOG_POST_TYPE_ID

先ほど作成したContentModelのnameを設定します。

CTF_SPACE_ID

スペースのIDを設定します。IDはメニューの「Settings」→「API Keys」→「Content delivery/preview tokens」で確認できます。

CTF_CDA_ACCESS_TOKEN

先ほど取得したContent Delivery APIアクセストークンを設定します。

Nuxt.jsで記事取得&表示

記事を表示するページを自由に作っていきます。
プロジェクト構成やソースコードなどを参考にさせていただきました。
Nuxt.jsとContentfulでブログ作ってみた

Tips: getEntriesの取得条件

記事情報の取得には主にgetEntries()を使用します。取得条件として、APIレファレンスの「Search parameters」の項目が指定できます。
今回はlimit, order, skipを使いました。

Tips: 記事本文はMarkdown

記事本文をAPIで取得するとMarkdown形式で降りてくるため、vue-markdownなどを使ってHTMLに変換してあげる必要があります。
(ただ、vue-markdownが重いみたいで、ビルド時にファイルサイズ大きすぎ!とwarningが出ます…)

Tips: Google Analytics

Google Analyticsの導入については、Nuxt.jsの公式サイトページFAQを参考にしました。
Google アナリティクスを使うには?

Netlifyでビルド&デプロイ

ローカル環境で思い通り動くようになったら、netlifyにデプロイします。
netlifyには各種gitリポジトリとの連携機能があり、今回はBitbucketと連携します。
そのため、出来上がったNuxt.jsのプロジェクトをBitbucketにコミットしておきます。この時、プロジェクトの直下にpackage.jsonが配置されるような構成にする必要があります。

アカウント作成&設定

  • アカウント作成
  • 連携先としてBitbucketを設定、ログイン
  • デプロイ対象リポジトリ、ブランチを選択
  • build commandにnpm run generate、publish directoryに/distを指定

この辺りは画面の通り進んでいけば迷わずできた感じです。

デプロイ

上の設定の流れでdeploy siteを実行するとデプロイが走ります。最初はちょっと時間がかかります。
デプロイ時のログの最後に「Site is live」が出ていればデプロイ成功です。

こちらの記事にもある通り、最初はNetlifyサイトに謎の名前が割り当てられてちょっとびっくりします。
高機能ホスティングサービスNetlifyについて調べて使ってみた
この名前は「Settings」→「General」→「Site Information」→「Change site name」から変更することができます。
今回はやりませんでしたが、カスタムドメインの設定もできます。

これでブログサイトの公開ができました。
以降、対象リポジトリへのpush時に自動で npm run generateし、デプロイしてくれるようになります。
メニューの「Deploys」→右上「Trigger deploy」から手動デプロイもできます。

所感

思っていたよりも簡単に作成〜ホスティングができて驚いています。特にNetlify、便利です。
現在約70記事を作成してありますが、今の所さくさく動いてくれています。
SEO対策など今回手薄なところもあるので、今後も少しずつ触りながら勉強していきたい次第です。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.