ヘッドレスCMSで爆速ブログ構築〜Gatsby+microCMS+StartBootstrap

Posted byそんほんすon 2022/03/02カテゴリ：Gatsby

０．はじめに

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

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

  1. ヘッドレスCMSとは？
    • ブログサイトを例に考えてみましょう。
    • 記事のページを１つずつHTMLとCSSで書くのは大変、記事を更新、追加するのにコードをいじるのが大変
  • →　CMSコンテンツ・マネジメントシステム
    • 記事を書いて登録すれば、WEBで表示ができるいろいろなブログサービスもCMSの一つ
    • CMSとはなにか？→スライド
    • 見えている部分（フロントエンド・頭）と見えていないデータベース・管理部分（バックエンド・体）があります
    • 代表的なCMS　WordPress　表示部分をテーマ等を使ってカスタマイズできる。データベース部分もある程度カスタマイズ可能
  • CMSのうち、データベース＋管理機能の部分をあつかうツール・サービスがヘッドレスCMS　←→　カップルドCMS
    • →ヘッドレスだから相棒（レンダリング（表示）を担うツール）が必要
    • 今回はGatsby
  1. ヘッドレスだと何がいい？
  • 好きなようにデータベースの構成を作れる
    1. ヘッドレスCMSではGUIでデータベースからテーブルを作成することができるので、バックエンドでプログラミングするのに近い自由度でデータベースを作れます。
  • 開発者とコンテンツ管理者の分業ができる
    • 例えば新規立ち上げのときでも、ヘッドレスCMSでコンテンツを作りつつ、フロントエンドの構築作業ができて、効率的な開発が可能
  • フロントで好きな技術を扱える
    • エンジニアの得意な技術、コンテンツや状況に応じた技術を選択できる
    • 学習したい技術を使って練習も
  • 引っ越しが簡単・フロントの技術変更が容易
    • 今回、そんの構築したものに変更を加えてあらたな機能追加した場合
    • アップデートしたら、新たにプロジェクトを起こして、連携の設定をすればOK
  • １つのデータソースから複数のところ（ウェブアプリ、ネイティブアプリ・・・）への展開が可能
    • 技術さえあれば、1つのデータをWEBアプリで、ネイティブアプリで使うことができる。
  • コンテンツ更新が簡単に
    1. コードをさわらなくてもいい
  • 一部分だけをヘッドレスCMSで管理できる
    1. 例えば、LPで３つくらい並列で「ベネフィット」とか表示するときも、その部分をヘッドレスCMSで管理できたりもします。
    2. 自分のポートフォリオ部分
    3. microCMSだとくりかえしフィールドなどを使うとかなり便利そう
    4. SSGで展開することで早くて、安全で、強力なサイトに
  1. ヘッドレスCMSいろいろ
    • Contentful
    • Strapi
    • DatoCMS
  2. microCMSとは
  • 日本製（ヘッドレスCMSでは唯一？）
    • 英語のヘッドレスCMSばかりの中でUIが日本語
  • 日本語のサポート、手厚い。
    • 画像の扱いで困ったとき、日本語のチャットで問い合わせできるというのはありがたかった。→　すぐ返答いただけました。
  • どんどん開発が進んでいます。
    • UI/UXがわかりやすい
  • カスタムフィールド、繰り返しフィールド→いろいろなサイト構築に
    • そんのポートフォリオサイトのポートフォリオの部分
    • サイトのキャンペーン表示部分またはLPのコンテンツ部分に導入することで、ノーコードでお店の人が更新
    • 個人ブログや個人開発レベルなら無料で公開まで
  • microCMSのユースケースから 企業のDX推進にもよく用いられるようになっている
    1. https://blog.microcms.io/usecase-acallアップデートのメンテナンスをしなくていい
    2. https://blog.microcms.io/usecase-interspace記事修正しやすい
    3. https://blog.microcms.io/usecase-beatfit本来ならバックエンドでデータベースや管理画面を構築するところをmicroCMSで実現　→　工数減

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

  1. Gatsbyとは？
  2. SSG（静的サイトジェネレータ）
    • 早い・安全・強い
  3. 豊富なプラグイン
  • プラグインでいろいろな機能を追加できる
    • 画像処理
    • SEO設定
    • いろいろスターターがあります
  • テーマを使うと、アップデートにも対応！
    • WordPressのテーマアップデートみたいな感じ
  1. Reactベース
    • jsxファイル→htmlに似ている
  • コンバーターもあるので、テンプレート、自分で書いたhtmlを変換できる
  • cssの当て方もいろいろいい感じのものがある
    • scss,sassでもOK
    • CSSinJS
  • 今回採用
    • ノーマルCSS→global.css bootostrap
    • styled-components
  1. graphQL
    • いろいろなデータソースを１つのインターフェースで管理できる！
    • ミックスもOK

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

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

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

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

// コードエディタでプロジェクトを開く
code .

２．microCMSの設定

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

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

  • API名はわかりやすい名前、エンドポイントは以下
    • ブログ記事のAPI：posts
    • カテゴリのAPI：category
  1. APIの型を選択　→リスト形式
  2. schemaをインポート
  3. microcmsSampleFiles/microcmsSchemaフォルダ内にあります
  4. postsAPIの設定（categoryAPIはそのままでOK）
    • categoryフィールドの形式を「コンテンツ参照」にしているので、インポートしたあとに設定をしなおします。
  5. postsAPIを選択、画面右上のAPI設定
  6. APIスキーマを選択
  7. カテゴリフィールドの種類を「コンテンツ参照」にして、参照先をcategoryに設定
    1. 変更をクリックして設定反映
  9. 記事を追加
  10. csvでサンプルファイルをインポート
    • ルートの microcmssampleFiles/csvフォルダにあります
    • 自分で記事を追加してもOK
  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"
MICROCMS_SERVICE_ID = "YOUR_SERVICE_ID"

４．Git〜確認〜デプロイ

  1. Gitに登録
  2. GitHub
git remote add origin <https://github.com/sonho463/myblog0529.git>
git branch -M main
git 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の無料プランの制限について
  • リクエスト数
    • Read　無制限
    • Write　１００回

４．まとめ

  1. gatsbyとヘッドレスCMSの組み合わせにいろいろな使い所
    • 企業のDX推進
    • お店サイトで、お店の人で更新できる
    • テンプレート（＋ちょっとカスタマイズ）でOKなら短時間で構築
  2. 学習のために構築して、少しググりつつカスタマイズしてみる
  3. まずはこのスターターで試してみてください。


Copyright © HorumonT's Blog 2021