pitcmsを導入する

pitcmsをプロジェクトに導入する方法を説明します。

pitcmsの導入は簡単ですが、GitHubの操作や設定ファイルであるpitcms.jsoncの記述が必要なので、基本的にエンジニアが行うことを想定しています。

前もって必要なもの

  • GitHubアカウント
  • pitcmsを導入したいGitHubリポジトリ

導入手順

pitcmsの導入手順は以下の通りです。

  1. GitHubリポジトリにpitcmsのGitHub Appをインストールする
  2. pitcms.jsoncファイルを作成、コミットし、GitHubにあげる
  3. pitcmsのプロジェクトを作成する

1. GitHubリポジトリにpitcmsをインストールする

まず、pitcmsを導入したいGitHubリポジトリに対して、pitcmsアプリをインストールします。

pitcmsのGitHub Appは以下の権限を使用しています。それぞれの用途は以下のとおりで、それ以外の用途で使用されることはありません。
権限用途
Checks (読み取り)プレビュー表示
Commit statuses (読み取り)プレビュー表示
Metadata (読み取り)リポジトリの基本情報の取得
Code (読み書き)ファイルの読み取り、コミットの作成
Pull requests (読み書き)プルリクエストの作成・更新
Deployments (読み書き)プレビュー表示

2. pitcms.jsoncファイルを作成・編集する

次に、リポジトリのルートにpitcms.jsoncファイルを作成し、必要な設定を記述します。

pitcms.jsoncは、pitcmsがリポジトリ内のコンテンツをどのように扱うかを定義する唯一の設定ファイルです。

your-repo/
├── pitcms.jsonc
├── content/
│   ├── posts/
│   └── pages/
└── ...

pitcms.jsoncの基本構成

pitcms.jsoncファイルの基本的な構成は次の通りです。

{
  "schemaVersion": 1,
  "collections": [...],
}
プロパティ説明
schemaVersionスキーマバージョン(現在は1のみサポートしています)
collectionsコレクション定義の配列

コレクション

コレクションは、ブログ記事、製品情報など、同じ種類のコンテンツをひとまとめに管理するための単位です。

{
  "collections": [
    {
      "name": "posts",
      "label": "ブログ記事",
      "description": "ブログの投稿を管理します",
      "path": "content/posts",
      "extension": "md",
      "singleton": false,
      "fields": [...],
      "layout": [...],
      "pico": {...}
    }
  ]
}
プロパティ必須デフォルト説明
namestringYes-コレクションの識別子(英数字)
labelstringNo-CMS上での表示名
descriptionstringNo-コレクションの説明
pathstringYes-コンテンツファイルを格納するディレクトリパス
extensionstringYes-ファイル拡張子、“md”または”json”
singletonbooleanNofalseシングルトン(単一コンテンツ)かどうか
fieldsField[]Yes-フィールド定義の配列
layoutstring[][]No-フィールドの配置を定義する2次元配列
picoPicoSettingsNo-CMS UIで使う値の設定

各プロパティの詳細は、コレクションを参照してください。

3. pitcmsのプロジェクトを作成する

最後に、pitcmsのダッシュボードにアクセスし、新しいプロジェクトを作成します。

プロジェクト作成時に、先ほど設定したGitHubリポジトリを選択します。これでpitcmsがリポジトリの内容を読み込み、CMSとして利用できるようになります。