Netlify-CMSとNuxt.jsでブログを立ててみた

Netlify-CMSがbitbucketでも対応したので、こちらのブログを立てる際に採用しました!
導入の手順をメモがてら書き起こしたいと思います。

nuxt&netlify-cmsがすでに入ったテンプレートを使う

nuxt-netlify-cms-starter-templateを使って、導入は爆速に。
vue-cliが入っている前提で、こちらのテンプレートをセットアップしていきます。

$ vue init renestalder/nuxt-netlify-cms-starter-template my-project  
$ cd my-project                     
$ yarn install
// 立ち上げは↓
$ npm run dev

こちらを使うと、

  • 記事を書く画面の/admin
  • 記事のリストを表示している /
  • 記事を表示する/blog/_slug

が作成された状態から始められます。
あとは、スタイルのカスタマイズや、表示項目を増やしたりお好みで。

Netlifyにupする!

Bitbucketでupするのに情報が少なかったのでメモ。
GithubでのNetlify-CMSの接続と同様に同様にwebhookとOauthの許可が必要です。

ビルドとdeployの設定をする。

この辺りは割愛。
詳しくは、netlify.tomlに設定が書いてあるので、そんなに問題ないと思います。

webhooksを許可する

Bitbucketで、対象リポジトリの設定から、Webhooksを許可します。 設定 > Webhooksに移動。
Titleに任意の名前を追加。 URLにhttps://api.netlify.com/hooks/bitbucketを追加して保存します。

oauthの設定をする。

bitbucketのアカウントでCMSの管理画面/adminに入れるようになります。
bitbucketの画面上の、
ユーザーアイコンをクリック > bitbucketの設定 > OAuth > OAuthコンシューマ の欄まで進みましょう。
名前を適当なものを入力。
コールバックURLに https://api.netlify.com/auth/done
URLに自分のサイトのドメインを入力します。 ex)https://kamemi.top
権限はリポジトリ > 書き込み にしておきましょう。

保存を押すと、 記入した名前で項目が追加されています。
名前の欄をクリックすると、

  • URL
  • シークレット

を確認できます。 鍵とシークレットはNetlifyのダッシュボードに追加が必要です。

NetlifyのSetting > Accses controll > OAuthまで進みます。
Install Provider をクリックし、Bitbucketを選択、先ほどBitbucketで確認した、

  • シークレット

を入力します。

Identifyも有効にしておきましょう。

markdownに対応させる

やっぱり記事はmarkdownで書きたい。
Netlify-CMSにはmarkdownでも書ける便利なエディタがついています。
しかし、吐き出される記事のjsonではhtmlに変換して出してくれないので、表示側で変換する必要があります。

@nuxtjs/markdownitを使用することにしました。 使い方は簡単。
nuxt.conf.jsにmoduleとして追加。

// nuxt.config.js
 modules: [
    '@nuxtjs/markdownit'
  ],

こちらも追加。

// nuxt.config.js
markdownit: {
  injected: true
}

/pages/blog/_slug.vue にv-htmlで以下のようにbodyを追加するだけ。

// /pages/blog/_slug.vue
<template lang="pug">
.body(v-html="$md.render(body)")
</template>

ついでにgithub-markdown-cssを追加すると見た目いい感じです。