GatsbyjsとStrapi を使用して静的なブログを作成する

みなさんこんにちは、中野です。最近静的サイトジェネレーターに激ハマりしています。

ゴール設定

ここでは、バックエンドにStrapi、フロントエンドにGatsbyを使って、簡単な静的ブログサイトを作成できるようにすることを目標とします。 簡単なクイックスタートで短時間で構築できました。

Gatsby.jsとは

Gatsbyは、React用の非常に高速なWeb サイト フレームワークです。これにより、開発者は数分で ReactベースのWebサイトを構築できます。

Strapiとは

Strapiは、オープンソースのヘッドレス CMSです。API の開発にかかる時間を数週間短縮し、誰でも使用できる管理パネルを使用して長期的なコンテンツ管理を簡単に行うことができます。

他の CMS とは異なり、Strapi は 100% オープンソースです。次のような特徴があります。

• strapiは完全に無料
• 独自のサーバーでホストできるため、データを所有できる
• プラグインシステムのおかげで、完全にカスタマイズ可能で拡張可能です。

前提条件

2022年8月17日現在ではnodejsのバージョンを16にする必要があります。

クイックスタート

yarn create strapi-starter gatsby-blog gatsby-blog

ERROR #85901  GRAPHQL
[develop:frontend] 
[develop:frontend] There was an error in your GraphQL query:
[develop:frontend] 
[develop:frontend] Unknown type "STRAPI__COMPONENT_SHARED_MEDIA".
[develop:frontend] 
[develop:frontend] GraphQL request:15:12
[develop:frontend] 14 |     }
[develop:frontend] 15 |     ... on STRAPI__COMPONENT_SHARED_MEDIA {
[develop:frontend]    |            ^
[develop:frontend] 16 |       file {
[develop:frontend] 
[develop:frontend] File: src/templates/article-post.js:50:12

実行していくとこのようなエラーが起こります。 これは、ざっくり環境変数を設定していない影響でリクエストが失敗していますね。

ディレクトリ構造は以下のようになっています。

└── gatsby-blog
    ├── backend
    ├── frontend
    ├── node_modules
    ├── package.json
    └── yarn.lock

• yarnを停止

• backendのディレクトに移動

• yarn developします

• strapiをサインアップ

• Settings > API Tokensからフルアクセスのトークンを作成します。

• このapiキーをメモしておきます。

• frontendディレクトリに移動します。

• .env.developmentにメモしたapiキーを環境変数に入れます。

[.env.development]

STRAPI_TOKEN=<メモしたapiキー>

GraphQLサンプル

http://localhost:1337/graphql

headerにapiキーを入れる

{
	Authorization: <メモしたapiキー>
}

GraphQLのdocs読めばわかりますがサンプルコードを置いておきます。

query{
  articles{
    data{
      attributes{
        slug
        blocks{
          ... on ComponentSharedRichText{
            body
          }
        }
      }
    }
  }
}

記事のslugとリッチテキストの中身を取得するqueryサンプルです

このgraphqlのdocsのは以下のようにして読みました、参考にどうぞ。

完成

再びyarn developをすると連携されたアプリケーションを楽しめます。 静的サイトジェネレータなので、yarn developをし直さないと更新しないといけない点は開発では不便だなと感じました。

基本的なブログ機能については個々のスターターを利用して、そのままデザインを変更していけば問題ないように感じます。