Ghost(CMS)のテーマ開発環境と自動デプロイのセットアップ

Ghostとは

https://github.com/TryGhost/Ghost

Ghost Foundationが提供するMIT LicenseのCMS。ホスティング代行サービスもあるが、 高額なのでセルフホスティングしよう。 Linodeとかで動かせば安い。メモリ1GBあれば足りる。

GhostをHeadless CMSとして使うこともできるが、今回はGhost自体のテーマを開発していく。

なぜかというと、

• ページネーションやアーカイブ
• sitemap.xml
• SEOメタデータ
• AMP対応

これらを自動でやってくれるからだ。これ自前で作るならContentfulとかでいいだろ!

テーマ開発環境を構築

ボイラープレート

Ghostのオフィシャルイメージを使う...が、設定を書くのがめんどくさかった 😔 ので

https://github.com/amritsarstartups/ghost-theme-docker

こちらのボイラープレートをForkして使用させていただく。感謝 🤗

自分で書く場合

docker-compose.yml

version: '3.7'
# Thank you! https://github.com/amritsarstartups/ghost-theme-docker
services:
  ghost-theme-docker:
    image: ghost-theme-docker:1.0
    container_name: ghost-theme-docker
    restart: unless-stopped
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - './.tmp/data:/var/lib/ghost/content/data'
      - './.tmp/images:/var/lib/ghost/content/images'
      - './.tmp/settings:/var/lib/ghost/content/settings'
      - './Ease:/var/lib/ghost/content/themes/Ease'
    ports:
      - "3102:2368"
    environment:
      - NODE_ENV=development

FROM ghost
LABEL maintainer="あなたの名前"
WORKDIR /var/lib/ghost

RUN ghost config url http://localhost:3102

EXPOSE 2368

編集したいテーマをFork

https://github.com/TryGhost/Ease

テーマのベースとしては、今回はこちらをForkする。

フォーク後、Actionsを有効化する。

フォークしたリポジトリにActionsがない場合は、こちらを参考に作成する。

submoduleとして追加

git submodule add https://github.com/あなたのユーザー名/Ease.git
sed -i '' -e 's/Pico/Ease/g' docker-compose.yml

docker-compose.ymlのPicoをEaseに置換している。ここは編集するテーマに応じて変えること。

ローカルで動かす

docker-compose up

localhost:3102/ghostを開けばGhostのセットアップ画面が出るので、ユーザーを追加する。

localhost:3102/ghost/#/settings/design/change-themeでテーマを変更する。

Advancedから追加テーマを選び、Activateをクリックする。

テーマの開発

Handlebarsで書かれているため、WordPressの感覚と違うというか、簡易Bladeみたいなものだと思えばいい。

https://handlebarsjs.com/guide/expressions.html

Handlebarsの構文はここで勉強できる。

GitHub Actionsを使ったテーマのデプロイ

以下、本番環境にGhostをセットアップした前提。

インテグレーションを用意

GitHubのインテグレーションをGhostに付ける。

https://ghost.org/integrations/github/

2021年11月27日現在、「カスタムインテグレーション」扱いになるため、ghost.ioなら「Pro Creator」プラン以上でないといけない。高すぎる。

「Settings」→「Integrations」から「Add custom integration」を選ぶ。アイコンや名前は自分でつける。

名前	リポジトリのシークレット
Admin API key	GHOST_ADMIN_API_KEY
API URL	GHOST_ADMIN_API_URL

▲表示された情報を、テーマのリポジトリのシークレットに設定する。ghost-theme-dockerのリポジトリじゃないよ。

https://github.com/TryGhost/action-deploy-theme

テーマをプッシュするとTryGhost/action-deploy-themeが実行され、Ghost本番環境にテーマがアップロードされる。

「Casper」をForkした場合、デフォルトテーマを上書きしないように設定を変える。

      - name: Deploy Ghost Theme
        uses: TryGhost/action-deploy-theme@v1.4.1
        with:
          api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
          api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}
+          theme-name: my-theme

こんな感じ。