昨年末（2019年末）に登場したGatsby Cloud！

これは、buildとhostingをしてくれるサービスですが、

gatsbyを使っている方の悩みとして、ページ数や画像等のmediaファイルが増えてくると、ビルドの時間がかかる。

そこで、これをGatsby Cloudに任せ、 さらにhedlessのcms（contentfulやcosmic js など）にて、記事を管理し、 リアルタイムpreviewまでも可能にします

こちらを実現する上で、 今回はまずHeadless CMSのご紹介をします。

この記事の内容を読むメリット

• Headless CMS導入のメリットがわかる
• 静的サイトジェネレーターを使いたくなる

静的サイトジェネレータ

従来の、サーバーサイドプログラム（Ruby Python PHP等）でのWEBサイトは

1. アクセス来る
2. 処理する
3. ブラウザが読める形でDesign含め作る
4. 返す という、アクセスが来るたびに、処理してページを作成します。

これは、無駄ですという考え方が最近のWEBの考え方ですね。

静的サイトジェネレータは、

• サーバーで、予め、ブラウザの読める形で作成しておく
• ストレージにこれらを置いておく
• アクセスきたらそのファイルをそのままブラウザが読むだけ

高速かつ、webサーバーの必要がないのです。

有名どころ

• Hexo
• Hugo
• Jekyll
• Gatsby

個人的にはreactベースのGatsbyが一番フィットし、Reactで書いていく＆プラグインの充実さ いろいろなことに縛られないため、一番ずば抜けていいなと思っています。 ※ただJSやnode、reactの知識が必要ですね

記事投稿フロー

• localでマークダウンで記事を作成
• generate や buildコマンド
• strageにUPして公開

悩み

• buildに時間がかかる
• 非エンジニアに記事管理投稿をしてもらいたい

Gatsby cloudと Headless CMSを使おう

ブログやWEBサイトを運用する上で

下記の２つがあると思います。

• コンテンツの投稿（記事の投稿）をCMSからした時　▶ HeadelessCMSに任せる
• Designやコードの修正をしてgithubにcommitした時　▶ Gatsby Cloudに任せる

Gatsby cloudとは？

Gatsby Cloudは、netlifyのようにビルド〜デプロイしhostingしてくれるという感じでしょうか。 要約すると、

• git commit pushすると、github経由でビルドを開始し、deployしhostingする

つまり、commit pushすれば、リリース出来るって言うことですが、 それは以前にも他のサービスでも多数ありました。

今回注目したいのは、Gatsbyを使ったことのある方ならおわかりいただけるかと思いますが、

• ビルドに時間がかかるのです

これをCloud上でビルドしてくれるので、ビルド時間を短縮してくれるということで嬉しいことこの上ないのです。

Headless CMSって？

Gatsbyは、以前までも、Pluginを入れれば、他のCMSとの連動可能でした。 今回CMSについてちょっと触れようと思います。

CMS（Content Manegement System）は、コンテンツ、画像などの情報を管理・公開するシステム。意外と世にあるWEBサイトは 何らかのCMSが使われていることが多いかと思います。

代表的なものが、Wordpressですね。 ただこのWordpressは、PHPによるサーバーサイド上で動くもので、遅いし、縛りが多く、ワードプレスを使うためにワードプレス独自のことを学ぶのが無駄な気がして 個人的には嫌いですね。（※使ったこと有りません。先入観かもしれません悪しからず。）

じゃHeadlessってなに

Wordpressのような従来のCMSを「Decoupled」といったりします。

Wordpressは、Wordpressの管理画面上で

• 記事書いたり、画像をアップしたり
• Designなどの見た目を整えたり

します。が、Headlessは

見た目はノータッチで、記事や画像のコンテンツのみの管理を担う完全バックエンド

という認識ですね。

Decoupledなので、見た目のフロントエンドと、コンテンツのバックエンドが切り離れている

といういことですね。

メリット

• 記事の投稿は、CMSから非エンジニアが行える
• Designの調整や機能追加はエンジニアやデザイナーがやりgithubにcommitする

コンテンツと見た目をそれぞれ別の人が運用可能なわで、お互いが影響しないため、安心なのです。

Gatsby Cloudと連携可能なHeadlessCMS

• Contentful

  • 一番有名どころですね ▶ Stackshare

• Cosmic js

  • RESTとGraphQL両方サポートしてます。エンジニア思考で出来てる感じがします。▶　Stackshare

• Dato cms

  • 触ってないのでわかりませんが、今後試したいですね　▶ Stackshare

• SANITY

  • ▶ Stackshare

• Contentstack

  • ▶ Stackshare

• Drupal

  • ▶ Stackshare

• strapi

  • Self-Hosted型らしい、拡張性が高そうですね ▶ Stackshare

一応上から、[Stackshare][stackshare]でのstack数が多い順でしょうか。

僕はまだ全部ちゃんとみていなのですが、一番有名どころのContentfulを使ってみます。 連動方法は

Gatsby Cloud と Contentful(Headless CMS)の連携をし、AWS S3でhostingして運用する方法 で、紹介してます。

まとめ

Headless CMSを紹介しました。

日々新たなものが出てきて楽しいですね。 是非参考にしてみて下さい。