背景

最近彼女さんがブログを作りたいと言い出して、
Ghostブログの運営を始めました。

本気でやるみたいなので、
ロゴ、ドメインなどいろいろな準備をやりました。
しかし、ブログのデザインに関しては、
いいテーマが見つからなくて自分で作ることにしました。

自分で作るなら最近ハマったTailwindCSSで作りたいので無理やり（？）入れました。

Prerequisites

テーマを作るに当たって必要が知識はhandlebars.jsの使い方ぐらいしかないです。
もちろんHTMLやCSSの知識も必要です。。

手順

テンプレートからリポジトリを作成

GhostはStarterテンプレートをGithubリポジトリとして用意したようなので、そちらから手をつけました。
Starterテンプレートのリポジトリはテンプレートとして使えるみたいなので、
「Use This Template」というボタンを押すと自分のところにリポジトリが作成できました。

ローカル環境でGhostを立ち上げる

テーマを開発する際に検証できるようにGhostのインスタンスが必要です。
正式のドキュメンテーションにあるLocal Install 手順に沿って立ち上げました。

$ npm install ghost-cli@latest -g
$ mkdir ghost && cd ghost
$ ghost install local

プロジェクトをClone

Ghostインスタンスのcontents/themesディレクトリに作ったテーマのリポジトリをCloneする。

$ cd contents/themes
$ git clone [email protected]:[github-username]/[theme-name].git

テーマを有効

Ghost Admin にログインして、Settings > Design > Change Theme > Advancedのところから自分のテーマを選択してテーマを有効します。

TailwindCSSを入れる

幸いテーマがすでにPostCSSを使われているので手間がそんなに掛かりません。

まずはパッケージをインストール：

yarn add tailwindcss
npx tailwindcss init

./assets/css/screen.cssというCSSファイルにTailwindCSSのスタイルを導入します。
中身既にあるものを使わなければ削除して大丈夫です。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

最後にgulpfile.jsにTailwindCSSの設定を導入します。

// ファイル先頭に追加
const tailwind = require('tailwindcss')

// 43行目のとこに`tailwind()`を追加
function css(done) {
    var processors = [
        easyimport,
        colorFunction(),
        tailwind(), // ここを追加
        autoprefixer(),
        cssnano()
    ];

// 79行目のcssWatcherに `.hbs` ファイルを監視対象として追加
// （JITモードを使う際にスタイルが反映するように）
const cssWatcher = () => watch(["*.hbs", "**/**/*.hbs", "!node_modules/**/*.hbs", "assets/css/**"], css);

設定はこれで以上です。
ファイルがちゃんと反映するようにGhostサーバの再起動が必要かもしれません。

$ ghost restart

また、テーマ開発する際にテーマのGulpプロセスの起動を忘れずに。

$ yarn dev

記事コンテンツのスタイリング

記事コンテンツがユーザのデータにとり生成されるものなのでHTML要素に直接クラスをつけることができません。
そこで、TailwindCSSのタイポグラフィープラグインがおすすめです。
導入すると、ヘッディングタグや段落間のホワイトスペースが上手くつけてくれます。

  <div class="prose prose-lg">
    {{content}}
  </div>

メディアコンテンツのスタイリング

Ghostのカードやギャラリー部分は上記のプラグインでカバーできないため、個別のCSS定義が必要です。
スタイルが必要なクラスは公式Docsに書いてあるのでそちらから参考してください。

自分の場合は、こうやってscreen.cssにTailwindCSSの@applyを使って定義しました。

.prose .kg-width-wide {
  @apply col-start-1 col-span-full;
}
.prose .kg-width-full {
  @apply col-start-1 col-span-full;
}
/* ... */

おまけ

Github Actions

テスト

テンプレートにテストのワークフローが用意されたので自分のユースケースに合わせて修正すればいいと思います。
自分はプッシュする際にyarn ci:testを実行するように設定しています。
テストとは言ってもただテーマが有効なのか確認するだけですが、何もないよりマシかな。。

テーマをデプロイ

Github Actionsでテーマのデプロイを自動化することもできます。
公式Docsに手順が書いてあるので参考してみてください。
ワークフローに必要なシークレットは、リポジトリの Settings > Secrets より登録できます。