January 16, 2021By Shirousa← Back to Blog

Gatsbyjs で始める静的CMS

CMS というと、 WordPress や Drupal が有名ですが、 Gatsbyjs という静的なサイトを生成する CMS もあります。参考として、本サイトは Gatsbyjs で構成されています。

本記事では、Gatsbyjs がどのような仕組みになっていて、個人サイトや企業の運営する大規模サイトで利用可能なのか考察をしたいと思います。

Gatsbyjs の出来ること

ここでは、ブログや Webサイト管理に必要な機能が Gatsbyjs に備わっており、実用に耐えうるのかを見ていきたいと思います。

Gatsbyjs のメリット

Gatsbyjs は Visual Studio Codeなど用いてローカルでコンテンツを記述し、ビルドを行うことで静的サイトを生成します。作成した静的サイトを AWS S3などの Cloud Storage にアップロードし、CloudFront などの CDN で配信するものです。

Gatsbyjs の主なメリットとしては以下の通りかと思います。

維持費が安い
セキュリティ対策が容易
可用性が高い

維持費が安い

Gatsbyjs に必要なサービスは、S3などの CloudStorage と CloudFront などの CDN のみです。動的なCDNでは、RDS などの Database、EC2 などの Computer が負荷に応じて複数台追加で必要になります。

そのためGatsbyjsは他の CMSに比べて、RDSやEC2などの費用がかからず維持費が安いです。

S3も CloudFront も使用した分の従量課金であり、負荷がかからない際も動き続ける RDSや EC2 と比較し、圧倒的に安くなります。

セキュリティ対策が容易

WordPress などはサーバーで常に計算されているため、セキュリティ対策が必要となります。 Linux、PHP、WordPress、MySQL、全てに対して考慮が必要なため、対策のための稼働がかかります。

また、動的サイトであるため SQLインジェクションや XSS(Cross Site Scripting) に対する注意が欠かせません。

Gatsbyjs はクライアントサイドでコンテンツが生成され、HTMLファイルをアップロードしているため、サーバー管理が不要となります。

また、管理する対象も Gatsbyjs および、関連するモジュールのみのセキュリティ対策で十分です。

可用性が高い

WordPress は EC2 などの Computer で計算されています。そのため、ユーザーが増えた際など過負荷となりサーバーが停止、可用性が低下する事象が発生します。

Gatsbyjs は S3 や CloudFront などで構成されているため、過負荷で停止することが有りません。実体はすでにビルドされたHTMLファイルなどの静的ファイルであるため、CloudFrontなどの Edge Cacheも十分に働きます。

そのため、負荷の急増するサイトでも対応が不要で、個人サイトから大規模アクセスが発生する企業サイトまで十分な可用性が担保されます。

SEO 対策

おそらくブログではここが気になるところかと思います。

SEO 対策として必要な機能は以下の通りと考えます。

title, description, lang のカスタマイズ
- ✔ 可能（React Helmet による）
opg (Open Graph Protocol) 対応
- ✔ 可能（React Helmet による）
sitemap 対応
- ✔ 可能（gatsby-plugin-sitemap による）
Google Analytics 対応（従前）
- ✔ 可能（gatsby-plugin-google-analytics による）
Google Analytics 対応（GA4）
- ✔ 可能（gatsby-plugin-gtag による）
Google AdSense 対応
- ✔ 可能（gatsby-plugin-google-adsense による）

React Helmet

React Helmet という React の拡張を用いて、ページの title や description。 Twitter や Facebook の ogp タグを埋め込むことが可能です。

使用する Starter によると思いますが、多くの Starter が React Helmet に対応しています。全てのページは静的レンダリングされて実際の html ファイルに変換されるため、SPA(Single Page Application) で問題だった opg が設定出来ないなどの問題は有りません。

こちらは、プログラムの修正が必要なので、できるだけ対応している Starter を使うのが良いと思います。

LINK

OGP
- The Open Graph protocol - OGP 公式サイト
Twitter
- ツイートをカードで最適化する - Twitter OGP開発サイト
- Card validator - Twitter OGP 確認サイト
Facebook
- ウェブ管理者向けシェア機能ガイド - Facebook OGP開発サイト
- シェアデバッガー - Facebook OGP 確認サイト

設定例

<Helmet
  htmlAttributes={{
    lang,
  }}
  title={title}
  titleTemplate={`%s | ${siteTitle}`}
  meta={[
    {
      name: `description`,
      content: description,
    },
    {
      property: `og:title`,
      content: title,
    },
    {
      property: `og:description`,
      content: description,
    },
    {
      property: `og:type`,
      content: `website`,
    },
    {
      name: `og:image`,
      content: image,
    },
    {
      name: `twitter:card`,
      content: `summary`,
    },
    {
      name: `twitter:creator`,
      content: author,
    },
    {
      name: `twitter:title`,
      content: title,
    },
    {
      name: `twitter:description`,
      content: description,
    },
    {
      name: `twitter:site`,
      content: twitter,
    },
  ].concat(meta)}
/>
}

gatsby-plugin-sitemap

gatsby-plugin-sitemap というプラグインを用いて、 Google Search Console などが利用する sitemap を生成できます。

設定は簡単で gatsby-config.js に siteUrl と plugins を追加するだけなので簡単です。

設定例

{
  siteMetadata: {
    siteUrl: `https://example.com/`
  },
  plugins: [
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        exclude: [
          "/dummy",
        ]
      }
    },
  ]
}

gatsby-plugin-google-analytics

gatsby-plugin-google-analytics というプラグインを用いて、従前の Google Analytics 対応が出来ます。

こちらは私は利用していないため、公式サイトを参照してください。

gatsby-plugin-gta

gatsby-plugin-gta というプラグインを用いて、新しい Google Analytics （GA4）対応が可能です。

設定は簡単で gatsby-config.js に siteUrl と plugins を追加するだけなので簡単です。

設定例

{
  plugins: [
  {
    resolve: `gatsby-plugin-gtag`,
    options: {
      trackingId: `G-XXXXXXXXXX`,
      head: true,
    },
  },
}

gatsby-plugin-google-adsense というプラグインを用いて、従前の Google AdSense 対応が出来ます。

設定は簡単で gatsby-config.js に plugins を追加するだけなので簡単です。

設定例

{
  plugins: [
    {
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-000000000000000`
      },
    },
  ]
}

コンテンツ管理

ブログの記事作成、管理のところをまとめたいと思います。

簡易デプロイ
- ✔ 可能（S3 に対して、gatsby-plugin-s3 で Deploy 可能です）
WYSIWYG 対応
- ✔ 可能（CMS対応の Starter を利用する必要があります）
- 私の環境では TinaCMS を利用しています。
Markdown 対応
- ✔ 可能（Visual Studio Code で直接編集可能です）
データ保存
- ✔ 可能（私の環境では GitHub にデータを保存しています）
見た目の変更
- ✔ 可能（React のソースコードを編集することで CSS の変更が可能です）

gatsby-plugin-s3

gatsby-plugin-s3 というプラグインを用いて、 S3 に対してデータを Deploy することが可能です。

設定は簡単で gatsby-config.js に plugins を追加するだけなので簡単です。 .env ファイルに接続のための環境変数を記述するのを忘れないようにしてください。

package.json にスクリプトを記述してあるため、 npm run deploy とするだけでデプロイが可能です。

設定例

{
  plugins: [
    {
      resolve: "gatsby-plugin-s3",
      options: {
        bucketName: "example.com",
        protocol: "https",
        hostname: "example.com",
        acl: null
      }
    },
  ]
}

TinaCMS

このブログは TinaCMS と Tina Grande から始まっています。その環境に対して、コード変更、CSS拡張、機能拡張を行うことで現在の作成環境となっております。

TinaCMS を用いて、ページ、コンテンツの WYSIWYG 編集が可能となっております。

Markdown が書けない人には良い選択肢なのかと思います。

Visual Studio Code

Markdown を直接記述できる方には、 Visual Studio Code による直接編集が第一選択ではないかと思います。

私の環境では、 WYSIWYG が必要かと思い TinaCMS を利用した経緯がありますが、実際は Visual Studio Code の Markdown 編集モードで記事を記述し、ビルドし、公開という流れで作成しております。

記事作成に必要な拡張は Visual Studio Code 側に実施していますし、WYSIWYG は不要かとも思います。

React

React のソースコードを読み書きできる方であれば、自由に拡張することが可能です。

表示する項目の追加や、装飾の追加など、自在に実施することが可能です。

私のサイトでは、元のテンプレートから表題やテーブル書式など数多くの修正を行っています。

企業が商業サイトとして運営する場合、React、React Helmet、および Graphql の知識は必須になると考えます。

まとめ

Gatsbyjs は個人サイトや企業の運営する大規模サイトまで対応が可能な仕組みであると考えます。

セキュリティ対策が容易で、過負荷に強く、低予算で運用が可能です。 SEO対策も可能で、コンテンツ管理も WYSIWYG も Markdown も選択できます。

まだ、 WordPress が圧倒的に強いという現状はありますが、Gatsbyjs で安価で拡張しやすく、モダンなサイトづくりをしてみるのもいかがでしょうか？

以上

✨ブログランキングにご協力ください✨

本サイトの記事について

本サイトの記事は、プログラミングだけでなく、雑多な雑学を多く配信しております。

もしよろしければ、ほか記事も閲覧いただけますと幸いです。

新しい記事へ

古い記事へ

しろうさのソフトウェア開発室

Gatsbyjs で始める静的CMS

目次