日本製の Headless CMS である microCMS を使ってブログを作ってみました。

microCMS は 公式ドキュメント が非常に充実しており、社内ブログのデータテーブル構成まで公開してくださっているという素晴らしいサービスです。

初心者でも簡単に作ることができるのでオススメです。

最終目標

• フレームワーク: Next.JS
• Pug.JS を使って記述できる
• TypeScript 対応
• 下書き状態の記事をプレビュー表示
• GCP (Google App Engine) に CloudBuild から自動デプロイ

Express から始めた人間なので、HTMLタグなんて書いてられない体になってしまっている筆者
苦戦した結果、 Next.JS で Pug を使うベストプラクティスがわかったので使っていきます。
また公式チュートリアルは JS なので aspida を使い、型安全な実装を目指します。

完成品:
完成品はこのブログ (実働デモ) です。
Repo: https://github.com/Kotokaze/blog

1 microCMS でデータを用意する

microCMS にアクセスし、API 作成をしていきます。
100GB/月 まで Fetch が無料なので、設定を間違えなければ請求は来ません。
PDF などのファイルアップロードは出来ません (筆者のサイトでは Git Submodule として PDF を直接ローカルに配置しています) が、Hobby プランのみで十分運営できます。

microCMS に入稿したデータには日時データ publishedAt revisedAt createdAt updatedAt ( ISO形式 ) を付与してくれるので、定義する必要はありません。
リスト形式であればユニークな id も自動付与されます。便利ですね。

リスト形式
   データ送信フォームを定義するイメージです (基本的にこっちを使う)
   配列として contents フィールドに格納して返されます

[
   id: "hoge"
   contents: [ { "type": "A'", "data": "hoge", ... }, { "type": "B", ... }, ... ]
   ...
}

オブジェクト形式
   不変の (増加しない) データをまとめる際に使われます
   こちらは JSON のルートに直接入力されます

{
   title: "hoge"
   author: "fuga"
   createdAt: "20XX-MM-ddThh:mm:ss.xxxZ"
   ...
}

/authors - 著者

著者情報をまとめておきます。
カスタムフィールドにて、他の紹介したいアカウント情報を格納するフィールドを作っておくとデータが綺麗になります。
githubId - GitHub Account ID | テキストフィールド
twitterId - Twitter Account ID | テキストフィールド
wordpress - WordPress URL | テキストフィールド

/categories - カテゴリ

投稿のカテゴリ (タグ) を入れます。

/blogs - ブログ

ブログの記事データをまとめます
リッチエディタ はマークダウン形式での入力ができますが、完全な対応とはなっていないため HTML を直接書き込む欄も設定します。 ( 公式の実装例 )
セクション毎に別の入力欄を作れるので管理画面からも見やすいので設定することをお勧めします。

/site - サイトデータ

全ページに共通するサイト情報をまとめておきます。

2 Next.JS プロジェクトのセットアップ

microCMS の 公式サンプル (Next.JS 版) や Next.JS の チュートリアル は充実しており非常に作りやすいです。

プロジェクトを立ち上げる

今回は TypeScript を使用するので --ts オプションを忘れずに指定します。

 yarn create next-app --ts <project-name>

ゼロ・コンフィグを謳うだけあって、自動で構築されていきます。
初期 Commit も自動なので便利ですね。
古い人間なので git branch -m main master したくなってしまいます。

ディレクトリ変更

ルートに設定ファイルをたくさん置くので、早めに深層へ移しておきましょう。
デフォルトで生成される pages styles を git mv で src へ移動させます 。
Reference: src Directory

パスの設定をする
tsconfig.json のコンパイラ オプションに次の設定を書いておきます。
早めに設定しておけば、階層が深くなっても楽にインポートできます。( ドキュメント )
( 差分 )

{
  "compilerOptions": {
    "target": "es5",
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] },
    ...
  },
  ...
}

Pug.JS をセットアップ

まず、公式の babel プラグイン をインストールします。

yarn add -D babel-plugin-transform-react-pug

次に設定ファイルをプロジェクト ルートに作成します。

.babrlrc.json
{
  "presets": ["next/babel"],
  "plugins": ["transform-react-pug"]
}

ファイルを配置するだけで自動的にプラグインが読まれるようになります。

さすがゼロ コンフィグです。

ESLint / Stylelint のセットアップ

さっそくインストールしていきます

デフォルトで eslint は入っているはずですので以下を入れます

yarn add -D eslint-config-prettier eslint-plugin-react-pug \
 stylelint stylelint-config-prettier stylelint-config-sass-guidelines stylelint-config-standard  

そのままセットアップしていきます。

.eslintrc.json
{
  "root": true,
  "plugins": ["react-pug"],
  "extends": [
    "next/core-web-vitals",
    "plugin:react-pug/all",
    "prettier"
  ],
  // add your custom config here
  "rules": {
    "react-pug/empty-lines": "off",
    "react-pug/quotes": "off",
    "react-pug/prop-types": "off"
  }
}

※ rules で react-pug/prop-types を外さないと next lint での Lint は通りませんでした 。

.stylelint.confing.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-sass-guidelines',
    'stylelint-config-prettier',
  ],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {},
}

.prettierrc.json
{
  "semi": false,
  "singleQuote": true
}

.editorconfig
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

次に yarn の実行スクリプトを追記・編集します。

package.json
"scripts": {
  "lint:style": "stylelint \"**/*.scss\" --ignore-path .gitignore",
  "lint": "next lint && yarn lint:style"
}

これで Lint の実行ができるようになりました

Husky & Lint-staged のセットアップ

せっかくつけた Linter も使わなければもったいない

Husky は git コマンド実行時にスクリプトを走らせるためのツールです。

lint-staged と併用することで、ステージング済み内容に対する Lint を実行できるようになります。 yarn のバージョンにより初期化方法が異なるので要注意です ( 公式ドキュメント )

$ npx husky-init && yarn              # Yarn 1
$ yarn dlx husky-init --yarn2 && yarn # Yarn 2

すると .husky というディレクトリが作成されるはずです。

実行スクリプトを追加していきます。

$ yarn hsky add .husky/pre-commit "yarn lint"

これで Commit 時に Lint が走るようになりました。


これでブログ制作の下準備は完了です。