code-log

フロントエンドの話題中心です。

GatsbyJS + GhostでJamstackなブログを作成する

こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。

私もJamstackアーキテクチャー推しな一人なので、現在色々な構成で試作をしています。


今回は、Ghostのブログ記事に触発されて、GatsbyJS + Ghostの構成をローカルで動かしてみます。GhostはNode.js製のヘッドレスCMSで、オープンソースで公開されています。Ghostの環境はDockerで準備します。

ghost.org

Jamstackアーキテクチャーの詳細は、こちらの記事も参照して下さい。

code-log.hatenablog.com

前提

Node version

v10.16.3

Docker version

Docker version 19.03.5, build 633a0ea

GhostをDockerで準備

まずは、DockerでGhostの環境を整えていきます。Ghostの環境作成は簡単で、下記のコマンド一行です。

$ docker run -p 2368:2368 -d ghost:latest

そして、Ghostのコンテナが立ち上がってるか確認してください。

$ docker ps

f:id:kamimura-dev:20200129140935p:plain

localhost:2368にアクセスしてみましょう。無事にアプリケーションが起動していることが確認できます。

f:id:kamimura-dev:20200129144108p:plain

そして、localhost:2368/ghostにアクセスして、ユーザーの作成画面に移ります。Create your accountをクリックして、作成します。今回はローカルで起動しているので、作成項目は好きにしてもらって大丈夫です。

f:id:kamimura-dev:20200129144156p:plain

アカウントの作成が終わったら、ダッシュボードのIntegrationsからAdd custome integrationをクリックします。そして、名前を入力後にCreateをクリックします。

f:id:kamimura-dev:20200129144350p:plain

GatsbyJSでGhostのAPIを取得するために、Content API Keyと、API URLが必要になります。右上のSaveをクリックすると、Integrationsを作成できます。

f:id:kamimura-dev:20200129144426p:plain

これで、Ghost側の設定ができました。ここからはGatsbyJSでフロントを構成していきます。

GatsbyJSでフロント部分を作成

GastsbyJSのフロント部分は、一から構成するのではなく、Ghostが公式で出しているスターターテンプレートを使います。

github.com

ちなみにここで、デモを見ることができます。クオリティーが高いです。

gatsby.ghost.org

ローカルにcloneした後に、インストールして下さい。

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

ここではgatsby-source-ghostプラグインで、GhostのAPIをラップしてGatsbyまたは、GraphQLとの互換性を持たせています。

github.com

例えば、GatsbyJS内で、Ghostのブログポストをすべて取得する場合は、GraphQLで取得します。

export const pageQuery = graphql`
  query GhostPostQuery($limit: Int!, $skip: Int!) {
    allGhostPost(
        sort: { order: DESC, fields: [published_at] },
        limit: $limit,
        skip: $skip
    ) {
      edges {
        node {
          ...GhostPostFields
        }
      }
    }
  }

gatsby-starter-ghostのコードから参照

プロジェクト内にある.ghost.jsonにGhostのAPI URLと、Content API Keyをいれてください。

.ghost.json

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

これで、アプリケーションを立ち上げてみましょう。

$ yarn serve

GatsbyJSのアプリケーションが立ち上がりました。Ghostで管理しているコンテンツが表示されていることが確認できます。

f:id:kamimura-dev:20200129145609p:plain

最後に

今回はGatsbyJS + GhostでJamstackアーキテクチャーな構成でブログを作成しました。GatsbyJSのテンプレートはハイクオリティーなものが多いと感じます。今後もJamstackな構成を試したら、ブログでアウトプットしていきます。