Ghostでは通常はサーバ内に画像ファイルが格納されるが、今後別のブログエンジンに移行する可能性などを考えると、Cloudinaryなど外部の画像管理サービスを使うのが便利。 Cloudinaryに画像をアップして、URLをGhostブログ記事に貼り付けることももちろんできるが、やると結構面倒なので、Ghost記事に直接ドラッグ＆ドロップしてCloudinaryにアップロードできるようにしたい。

Ghost + Cloudinary統合

Ghost公式に記事がある。 この記事の通り、Ghost-Storage-Cloudinaryを利用する。 これを導入すると、記事編集中にドラッグ＆ドロップで直接Cloudinaryに画像をアップロードしてURLを貼り付けてくれる。 各記事やブログトップのカバー画像もCloudinaryにアップロードして参照される。

インストールの前に注意

Ghost-Storage-Cloudinaryをインストールすると、今までの内部ストレージは使えなくなる。 URLが勝手にリダイレクトされて404になる。 既存の記事内のURLやカバー画像も含めてすべて指定し直しになるので注意。 これはもしかすると、Ghost 2.x系にインストールした際のバグかもしれない。

Ghost-Storage-Cloudinaryのインストール

Ghostバージョン2.xではテストしてないとのことだが、2.12.0で動作することを確認している。 インストールにはgitとnpmを使う方法があり、どっちでもいいが、なんとなくパッケージ管理できそうなのでnpmでインストールした。

Ghostのルートディレクトリに行き、モジュールをインストールする。

$ npm install --production --no-save ghost-storage-cloudinary
$ mv node_modules/ghost-storage-cloudinary current/core/server/adapters/storage

設定ファイル

Ghostルートディレクトリのconfig.production.jsonに下記記述を追加する。

  "storage": {
    "active": "ghost-storage-cloudinary",
    "ghost-storage-cloudinary": {
      "useDatedFolder": false,
      "auth": {
        "cloud_name": "",
        "api_key": "",
        "api_secret": ""
      },
      "upload": {
        "use_filename": true,
        "unique_filename": false,
        "overwrite": true,
        "folder": "blog-images",
        "tags": [
          "blog"
        ]
      },
      "fetch": {
        "quality": "auto",
        "secure": true,
        "cdn_subdomain": true
      }
    }
  }

• authに記載すべき内容は、CloudinaryのDashboardトップを見ればわかる。
• fetchのsecureをtrue（画像URLにhttpsを指定）にしておかないと、各記事やブログトップのカバー画像が表示されない。
• uploadは好みに合わせて設定。

設定が終わったら多分Ghostを再起動するのがよさそう。 Ghostのルートディレクトリで下記コマンドを実行。

$ ghost restert