TailwindCSSでGhostブログのテーマを作ってみました。

# 背景

最近彼女さんがブログを作りたいと言い出して、
[Ghostブログ](https://ghost.org/)の運営を始めました。

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

自分で作るなら最近ハマった[TailwindCSS](https://tailwindcss.com/)で作りたいので無理やり（？）入れました。

# Prerequisites

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

# 手順

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

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

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

テーマを開発する際に検証できるようにGhostのインスタンスが必要です。
正式のドキュメンテーションにある[Local Install 手順](https://ghost.org/docs/install/local/)に沿って立ち上げました。

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

### プロジェクトをClone

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

```bash
$ cd contents/themes
$ git clone git@github.com:[github-username]/[theme-name].git
```

### テーマを有効

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285534/74bf4d07-c39d-c949-b463-cc7788b6a00f.png)

### TailwindCSSを入れる

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

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

```bash
yarn add tailwindcss
npx tailwindcss init
```

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

```css:screen.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

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

```js:gulpfile.js
// ファイル先頭に追加
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サーバの再起動が必要かもしれません。

```bash
$ ghost restart
```

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

```bash
$ yarn dev
```

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

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

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

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

Ghostのカードやギャラリー部分は上記のプラグインでカバーできないため、個別のCSS定義が必要です。
スタイルが必要なクラスは[公式Docsに書いてある](https://ghost.org/docs/themes/content/#editor-cards)のでそちらから参考してください。

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

```css:screen.css
.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](https://ghost.org/integrations/github/)に手順が書いてあるので参考してみてください。
ワークフローに必要なシークレットは、リポジトリの `Settings > Secrets` より登録できます。