SSGと組み合わせるヘッドレスCMSをChatGPTに聞いてみた

# はじめに

[Astro](https://astro.build/)を使おうとしています。[CMSはいくつも紹介](https://docs.astro.build/ja/guides/cms/)されていますが、どれがよいかわからない。

https://docs.astro.build/ja/guides/cms/

ChatGPT に聞いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/336c15a9-1324-2283-24e3-7efbb0fa9ef5.png)

4つ教えてもらいました。

| ヘッドレスCMS | Qiita記事数[^1] | 使用形態 | 
|:--|:-:|:--|
| [Contentful](https://www.contentful.com/)  | [121](https://qiita.com/tags/contentful)  | ホスティングのみ  |   
| [Strapi](https://strapi.io/)  | [63](https://qiita.com/tags/strapi)  | 自己ホスティング可能  |   
| [Ghost](https://github.com/TryGhost/Ghost)  | [36](https://qiita.com/tags/ghost)   | 自己ホスティング可能  |   
| [ButterCMS](https://buttercms.com/)  | [2](https://qiita.com/tags/buttercms)  | ホスティングのみ |   

[^1]: 2023年3月現在

自己ホスティング可能なGhostとStrapiについて調べてみます。


# Ghostを試してみる

## インストール方法

インストール作業は、CLIを使って行います。便利ですね。

まずCLIをインストールします。

```console
npm install -g ghost-cli@latest
```

適当に空のディレクトリを作り、CLIを実行します。
いろいろオプション（データベース接続とか）がありますが、後から変更できます。

```console
mkdir ex-project
cd ex-project
npx ghost install --local
```

**--local** は、もろもろよろしくやってくれるためのオプションです。

インストールついでに、サーバも起動してくれます。楽ちん過ぎる :smile: 

ディレクトリ内には、こんなファイル群ができました。

```
./
├── .ghost-cli
├── .ghostpid
├── config.development.json
├── content/
│   ├── apps/
│   ├── data/
│   ├── files/
│   ├── images/
│   ├── logs/
│   ├── media/
│   ├── public/
│   │   ├── admin-auth/
│   │   │   ├── admin-auth.min.js
│   │   │   └── index.html
│   │   ├── cards.min.css
│   │   ├── cards.min.js
│   │   ├── comment-counts.min.js
│   │   └── member-attribution.min.js
│   ├── settings/
│   │   └── routes.yaml
│   └── themes/
│       └── casper -> ../../current/content/themes/casper/
├── current -> versions/5.39.0/
└── versions/
    └── 5.39.0/
```

Ghost本体は**versions**の下に置かれ、シンボリックリンクで使用するバージョンを決定するのかな？
ユーザ作成のコンテンツは**content**の下に置かれるようです。治安よいディレクトリ構成ですね。

## 初期セットアップ

http://localhost:2368/ghost/ を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/5e1138b4-96ae-1ce1-011a-1f8d4610e0d6.png)

WordPress みがあります。

## 管理画面

ログイン後の管理画面はこんなんでした。日本語ではないですね。ChatGPT さん間違ったかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/e0352535-7900-8f97-9caa-33ca52ec845e.png)

## 管理画面の日本語化は簡単ではなさそう

日本語化したいところですが、[ソース](https://github.com/TryGhost/Ghost/tree/main/ghost/admin/app/components/dashboard)を見た感じでは、ハードコードされているようです。

https://github.com/TryGhost/Ghost

Handlebars のテンプレートも、普通に英語で書かれています。

日本語化は、公式から手段を提供してもらわないと、長く険しい道のりになりそうです。

## GhostはWordPressの代替？

勘違いしていましたが、Ghostはヘッドレスではなくヘッド有りなんですね。

WordPressにお疲れ気味のかたには、Ghostはよい選択かもしれません。
ただ、管理画面は日本語化したいですねー。

# Strapiを試してみる

## 始め方

[ドキュメント](https://docs.strapi.io/dev-docs/installation/cli) に従いまして、さっくりとプロジェクトを作成します。

```console
npx create-strapi-app ex-project --typescript --quickstart --no-run
```

指定したディレクトリ名の下に、以下のようなファイル群ができました。

```
./
├── .editorconfig
├── .env
├── .env.example
├── README.md
├── config/
│   ├── admin.ts
│   ├── api.ts
│   ├── database.ts
│   ├── middlewares.ts
│   └── server.ts
├── database/
│   └── migrations/
├── favicon.png
├── package-lock.json
├── package.json
├── public/
│   ├── robots.txt
│   └── uploads/
│       └── .gitkeep
├── src/
│   ├── admin/
│   │   ├── app.example.tsx
│   │   ├── tsconfig.json
│   │   └── webpack.config.example.js
│   ├── api/
│   │   └── .gitkeep
│   ├── extensions/
│   │   └── .gitkeep
│   └── index.ts
└── tsconfig.json
```

サーバを起動します。

```console
npm run develop
```

## 初期セットアップ

ブラウザが自動的に起動して、このような画面が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/d460e602-8fee-827a-a530-beab195db7db.png)

右上に言語の選択があります。英語とフランス語が使えるようです。
日本語化できそうな気配がします。

## 管理画面を日本語化する

検索したらちゃんとありました。

https://www.npmjs.com/package/strapi-plugin-ja-pack

掲載されている手順に従って日本語化します。

自分はTypeScriptにしたので、変更するファイルがちょっと違いました。

```ts:config/plugins.ts
export default () => ({
  i18n: true,
  "strapi-plugin-ja-pack": {
    enabled: true,
  },
});
```

```ts:src/admin/app.tsx
export default {
  config: {
    locales: ["ja"],
  },
  bootstrap(app) {},
};
```

あとは、再起動して管理画面から設定することで日本語化できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/b172b5db-176c-7dd6-0c78-6c46a676f93a.png)

@yasudacloud さん感謝 :pray:

# まとめ

GhostとStrapiを試しました。

Ghostは管理画面が日本語じゃないので、人に使ってもらうのは難しそうです。

Strapiは英語混じりですが日本語化できましたし、シンプルでわかりやすくてよい感じです。
[Astroとの連携ガイド](https://docs.astro.build/ja/guides/cms/)には掲載ありませんが、きっとなんとかなるでしょう。