はじめに

Astroを使おうとしています。CMSはいくつも紹介されていますが、どれがよいかわからない。

ChatGPT に聞いてみました。

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

ヘッドレスCMS	Qiita記事数¹	使用形態
Contentful	121	ホスティングのみ
Strapi	63	自己ホスティング可能
Ghost	36	自己ホスティング可能
ButterCMS	2	ホスティングのみ

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

Ghostを試してみる

インストール方法

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

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

npm install -g ghost-cli@latest

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

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

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

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

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

./
├── .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/ を開きます。

WordPress みがあります。

管理画面

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

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

日本語化したいところですが、ソースを見た感じでは、ハードコードされているようです。

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

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

GhostはWordPressの代替？

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

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

Strapiを試してみる

始め方

ドキュメントに従いまして、さっくりとプロジェクトを作成します。

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

サーバを起動します。

npm run develop

初期セットアップ

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

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

管理画面を日本語化する

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

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

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

config/plugins.ts

export default () => ({
  i18n: true,
  "strapi-plugin-ja-pack": {
    enabled: true,
  },
});

src/admin/app.tsx

export default {
  config: {
    locales: ["ja"],
  },
  bootstrap(app) {},
};

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

@yasudacloud さん感謝

まとめ

GhostとStrapiを試しました。

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

Strapiは英語混じりですが日本語化できましたし、シンプルでわかりやすくてよい感じです。
Astroとの連携ガイドには掲載ありませんが、きっとなんとかなるでしょう。

2023年3月現在 ↩