Ghost + Gatsby + Netlify でブログを開設しましたので、手順についてメモします。以前は、WordPressを使ってブログを運用していたのですがメンテナンスに限界を感じ、別のCMSを探したところ、この構成にたどり着きました。この構成を使用することで、シンプルかつ高速なブログを作成することができました。

Tech stack

ざっくりですが、使用した技術スタックについてひとことずつ

Ghost: コンテンツマネジメントシステム（CMS）。Ghostでブログを書きます。
Gatsby: 静的サイトジェネレータ（Static Site Generator）。Ghostで作成したブログ記事を静的コンテンツへと変換します。
Netlify: ホスティングサービス。Gatsbyで生成した静的コンテンツをここにホスティングし、Webで閲覧できるようにします。

利用環境

以下を使用しました

Docker version: 20.10.14, build a224086
Node version: v16.15.0
Gatsby CLI: 4.15.0
Netlify CLI: netlify-cli/10.3.3 win32-x64 node-v16.15.0

Ghost

CMSしてGhostを使用します。Ghostのホスティングサービスを利用すると有償になるのですが、オープンソースプロジェクトとしてソースコードを公開してくれているので、そちらを利用してローカル上でGhostサーバーを立てることができます。簡単にやる方法しては、以下の2通りになると思います。

Dockerを使用する

Ghost公式のDocker Imageがあるので、それを利用します。作業ディレクトリに、docker-compose.ymlを作成し、以下を記述します。

version: '3'
services:
  ghost:
    image: ghost
    restart: always
    volumes:
      - ./ghost:/var/lib/ghost/content
    ports:
      - 2368:2368

その後、以下のコマンドを実行すると、Ghostサーバーを http://localhost:2368/ で開始できます。

$ docker-compose up

なお、作業ディレクトリ直下に「ghost」というフォルダが作成され、そこに作成したコンテンツが保存されます。

Ghost CLIを使用する

Dockerを使用しなくても、Ghost CLIを利用することで、Ghostサーバーを立てることができます。CLIのインストールは以下のコマンドで行います。

$ npm install ghost-cli@latest -g

その後、作業ディレクトリで以下のコマンドを実行し、サーバーの起動に必要なモジュールのインストールを行います。

$ ghost install local

作業ディレクトリ配下のパス「ghost/content」に作成したコンテンツが保存されます。

上記実施後、ブラウザで　http://localhost:2368/ にアクセスすると、ローカルで起動しているGhostサーバーに接続できます。
http://localhost:2368/ghost にアクセスすると管理者ページに入ることができます。初回はユーザ未作成状態なので、「Create account」をクリックして管理者ユーザーを作成します。

その後、ダッシュボードから、[Settings] (ギアアイコン) > [Integrations] > [Add custom integration] と遷移し、任意の名前で新たなカスタム連携を作成します（このカスタム連携のAPI Keyは後の手順で使用します）。

ここまででGhostの準備は完了です。

Gatsby

次にGatsbyを使用して、Ghostサーバーのブログ記事を静的コンテンツ（Static HTML）へと変換する作業を行います。Ghostが公式のスターターテンプレートを出しているのでそちらを利用します。もしくは、サードパーティーがテーマのプラグインを公開してくれているので、そちらも利用可能です。Gatsbyサイト内で"ghost"でプラグインを検索して探すことができます（例: https://github.com/styxlab/gatsby-theme-try-ghost ）。

お好きなテンプレートをローカルへとクローンしてDependenciesのインストールを行います。

$ git clone https://github.com/TryGhost/gatsby-starter-ghost.git
$ cd gatsby-starter-ghost
$ yarn

Gatsby-CLIを利用する場合は以下のコマンドになります

$ gatsby new gatsby-starter-ghost https://github.com/TryGhost/gatsby-starter-ghost.git

その後、レポジトリ直下（「gatsby-starter-ghost」直下）の.ghost.jsonファイルに先の手順で作成したGhostのカスタム連携のAPIキーを入力します。

{
   "development": {
     "apiUrl": "http://localhost:2368",
     "contentApiKey": "f64alfad618e7f896358ab0273"
   },
   "production": {
     "apiUrl": "http://localhost:2368",
     "contentApiKey": "f64alfad618e7f896358ab0273"
   }
}

ここまでできたら、gatsby build（もしくはyarn build）を実行すると http://localhost:2368/ のGhostサイトの静的コンテンツが生成できます。生成された静的コンテンツは、レポジトリ直下（「gatsby-starter-ghost」直下）のpublicフォルダに格納されます。

ちなみに、gatsby serve（もしくはyarn serve）を実行すると、http://localhost:9000/ でGatsbyによってビルドされた静的コンテンツがどのように表示されるか確認することができます。

Netlify

作成された静的コンテンツをNetlifyへとデプロイします。Netlifyアカウントを未作成の場合は、アカウントを作成し（無償でできます）、アプリを作成しておきます。

レポジトリ直下に遷移した状態で、以下のコマンドを実行しNetlifyにログインします。

$ netlify login

その後、以下のコマンドでNetlifyにデプロイを行います。

$ netlify deploy -p

上記コマンド実施時に、デプロイ先のアプリ名などが聞かれるので、それらに回答すると静的コンテンツがNetlifyへとアップロードされ、Web上でページが閲覧できるようになります。

おさらい

ブログ作成の流れをおさらいしていきます。

ブログを更新する際は

Ghostサーバーを起動し、ローカル上で編集を行います
編集後、Gatsbyで静的コンテンツへと変換します
静的コンテンツをNetlifyへとデプロイします

フォルダ構成

- gatsby-starter-ghost/
    |- src
    |- static
    |- .ghost.json <- これを編集する
    |- netlify.toml <- Netlifyのビルド設定
    |- public <- ここにGatsbyでビルドした静的コンテンツが生成される
    |- package.json
    |- etc.
- ghost/ <- Ghostサーバー(Docker)で作成したコンテンツがここに格納される（このフォルダはバックアップをすべき）
    |- apps
    |- data
    |- files
    |- images
    |- logs
    |- media
    |- public
    |- settings
    |- themes    
- docker-compose.yml