{"componentChunkName":"component---src-templates-post-template-jsx","path":"/blog/posts/connpass-ref","result":{"data":{"microcmsPosts":{"title":"ヘッドレスCMSで爆速ブログ構築〜Gatsby+microCMS+StartBootstrap","updatedAtJP":"2022/03/02","updatedAt":"2022-03-02T01:28:04.960Z","link":"connpass-ref","article":"

０．はじめに

  1. 自己紹介と今日の見通し
  2. いいよっていう話ばかりしますが、もちろんデメリット、うまくいかないところもありますので、ご了承を。
  3. notionの共有
  4. 目次
    1. microCMS（ヘッドレスCMS）がいいよという話
    2. Gatsby（静的サイトジェネレータ）がいいよという話
    3. Gatsby-microCMSブログ構築デモと解説
    4. まとめ

１．microCMS（ヘッドレスCMS）がいいよという話

  1. ヘッドレスCMSとは？
  1. ヘッドレスだと何がいい？
  1. ヘッドレスCMSいろいろ
  2. microCMSとは

２．Gatsby（静的サイトジェネレータ）がいいよという話

  1. Gatsbyとは？
  2. SSG（静的サイトジェネレータ）
  3. 豊富なプラグイン
  1. Reactベース
  1. graphQL

※　ここでこのnotionを共有する

３．Gatsby-microCMSブログ構築デモと解説

１．Gatsbyプロジェクトの生成

  1. プロジェクト生成
gatsby new myblog <https://github.com/sonho463/starter-microcms.git>
  1. コードエディタでプロジェクトを開く
// プロジェクトのフォルダへ移動\ncd myblog\n\n// コードエディタでプロジェクトを開く\ncode .\n\n

２．microCMSの設定

  1. ユーザー登録〜コンテンツ（API）設定
  2. サービス名を設定します。後でGatsbyで接続するときに使用します。
    1. \"\"
    2. CMSにおいては、データベースに当たる部分
  3. APIの設定：APIは「テーブル」に当たる部分
  1. 記事(posts)とカテゴリ(category)のAPIを作成（リスト形式）
  2. コンテンツ（API)の横の＋

\"\"\t

  1. API名・エンドポイントを設定

\"\"

  1. APIの型を選択　→リスト形式
    1. \"\"
  2. schemaをインポート
  3. microcmsSampleFiles/microcmsSchemaフォルダ内にあります
    1. \"\"
  4. postsAPIの設定（categoryAPIはそのままでOK）
  5. postsAPIを選択、画面右上のAPI設定
    1. \"\"
  6. APIスキーマを選択
    1. \"\"
  7. カテゴリフィールドの種類を「コンテンツ参照」にして、参照先をcategoryに設定
  8. \"\"
    1. 変更をクリックして設定反映
  9. 記事を追加
  10. csvでサンプルファイルをインポート
  11. \"\"
  12. 記事データがないとビルドエラーが出ます。
    1. ブログ記事は2件
    2. カテゴリは1件データがあればOK
    3. ブログ記事のうち１つは、すべてのフィールドにデータを設定する
  13. 設定APIを追加
    1. 上記と同じ流れでオブジェクト形式で追加
    2. オブジェクト形式のAPIは、コンテンツのインポート機能はないので、直接、タイトルとサブタイトルを追加

３．GatsbyとmicroCMSの接続設定

  1. 環境変数設定ファイル作成
  2. ルートフォルダに以下のファイルを作成
  3. .env.development
    1. .env.production
  4. microCMS管理画面からapikeyを確認してコピー・ペースト

\"\"

  1. 環境変数設定ファイル
MICROCMS_API_KEY = \"YOUR_API_KEY\"\nMICROCMS_SERVICE_ID = \"YOUR_SERVICE_ID\"

４．Git〜確認〜デプロイ

  1. Gitに登録
  2. GitHub
git remote add origin <https://github.com/sonho463/myblog0529.git>\ngit branch -M main\ngit push -u origin main
  1. gatsby develop
    1. microCMS側にデータがないとビルドエラー
    2. ブログ記事は2件、カテゴリは1件、configも入力しておく
  2. gatsby build → gatsby serve → localhost:9000
  3. GitHubへ
    1. Githubにリポジトリ作成
    2. git push
  4. git push
  5. デプロイ
  6. 環境変数の設定

\"\"

  1. デプロイ先の選択はいくつかありますが、それぞれで環境変数を設定しておく必要があります。
  2. Netlifyへデプロイ

５．コードや表示ページを見ながら解説します。（時間的に触れないかもしれません）

  1. GraphQL の記述について 1.
  2. CreatePageでページが生成される仕組み
    1. post-template.jsx
  3. index-templateのページネーション機能（GraphQLのフィルター機能で実装）
    1. カテゴリページには未実装😅
  4. previous,nextのリンクについて（かなりハマったのでその話）
    1. GraphQLでデータを読み込んだときにnullだとエラーでストップ
    2. 入れ子のオブジェクトで読み込むことで、null判定する
  5. 画像の扱い
    1. gatsby-source-microcmsプラグインがgatsby-pluguin-imageに未対応
    2. gatsby-plugin-imageとは
    3. 画像最適化にはImgixを利用
  6. 設定いろいろかえてみる
  7. 記事一覧ページの表示数
    1. GraphQLの引数　limit,skip　を利用
  8. トップページの背景画像
    1. ファイルの入れ替えで対応
    2. 記事一覧ページとカテゴリ別ページ
    3. アバウト
    4. コンタクト
  9. どうしても、コードを触らないといけないところ
    1. コンタクトフォーム→GoogleFormをiframeタグで埋め込んでいます
  10. microCMSの無料プランの制限について

４．まとめ

  1. gatsbyとヘッドレスCMSの組み合わせにいろいろな使い所
  2. 学習のために構築して、少しググりつつカスタマイズしてみる
  3. まずはこのスターターで試してみてください。


\"\"

","author":"そんほんす","eye_catch":{"url":"https://images.microcms-assets.io/assets/a20dd30d3f4d43d8814295dae8cee134/57a3de56e40341808fcea8431a0c922d/fbe611b3bf83a09557122907c7a963fb.png"},"category":{"category":"Gatsby","categorySlug":"gatsby"}}},"pageContext":{"id":"61ecacf5-12f1-54da-93a2-c88251a3b99b","previous":null,"next":{"title":"サンプル２","link":"sample-2"}}},"staticQueryHashes":["1550610083","2560007497","3020873570"]}