脱WP！netlifyCMSは静的サイトの記事作成を管理画面からできる

netlifyCMSは、netlifyが提供するCMSサービスです。 ボタン一つで、静的サイトジェネレータをベースにした、CMSの管理画面を構築してくれます。

もしこれからブログやサイトの作成を考えている方は、こちらも候補に入れて検討してみてください。 netlify CMS | Open-Source Content Management System

netlifyのホスティングについてはこちらに書いています👇

どんなサービスなのか？

静的サイトジェネレータの問題は、エンジニア的な知識がないと構築が難しい ことです。 また、クラウド上にサイトを管理するページがない ので、ローカルで静的ファイルを生成して、デプロイしなければならない。 つまり、パソコンがないとブログを構築できません。

この2つを解決するのが、netlify CMSです。 いかにWordpress並みの使いやすさを実現するか、が鍵な訳ですね。

ざっくりいうと・・・

• モダンな静的サイトジェネレータをつかって
• モダンなホスティングサービスで
• CMSを一瞬で構築できる

という感じ。 また、管理画面が存在しているので、複数人で一つのサイトを編集できたり、権限を制御できたりします。 今までの、静的サイトジェネレータ運用の弱点を、しっかりとフォローできているのが魅力です。

WPの代わりになるのか

それはイエスと言えると思います。 ただし、今までWPでブログを運用していた人の、誰もが簡単に使いこなせるかというと、そうでもありません。

WPでは超簡単に行っていた、レイアウトの変更、プラグインなどによる機能面でのカスタマイズ。 これらを行うには、htmlなどのソースコードコードに対する知識が必要になります。

というわけで、どんな場面で使えるのか、用途を明確にすることでこのサービスを選択するか否かが決まります。 この辺りについては、netlifyCMSの方針を理解することで、明確になるでしょう。

netlifyCMSの方針を理解する

「開発者と編集者の担当する領域をしっかり分ける」

これは、netlify CMSのサイトに大きく書いてある、方針です。

つまり、 編集者（記事を書く人）と、エンジニアの作業領域を完全に分けて考えます。

管理画面上で、デザインテンプレートの変更やちょっとしたあしらいの変更、プラグインの導入などの設定はありません WPで出来ていたメンテナンスを実現するには、netrifyCMSでは全く別の知識が必要になってきます。

WordPressのほうが優れている部分

通常のブログ運営を個人がやるとすると、デザインの適用やちょっとしたカスタマイズ、プラグインの導入などを、当人が一人で触るケースが多いと思います。 仮に、あなたが文章しか書かないつもりであれば、このサイトのカスタマイズは難しいものになるでしょう。

つまり、編集者がデザインを触ったりするのはだいぶハードルが高くなります。

wordpressの最大のメリットは、そのハードルを解決していることです。 コードを殆どわからない人でも、プラグインの導入、テーマの変更、レイアウトの変更などを直感的に操作で実現できます。

netlifyCMSの制限事項

さて、netlifyCMSを使っていこうかな、と思ったときに気になったこと。 それは、無料で使える制限事項です。

netlifyは以下の制限付きで無料で、ホスティングサービスを利用することが可能です。

• ネットワーク転送量：100GB/月
• 容量：100GB
• デプロイ時のAPIリクエスト：500リクエスト/分

この転送量ってやつ、分かりにくいですよね。 PVで考えるとどんなものか、ちょっと調べてみました。 その前に、まずは転送量について。

転送量について

シンプルに考えると、ユーザーの画面に表示されるときに、ユーザーが受け取るデータの量と捉えておけばOKだと思います。 つまり、画像なんかが多いサイトだと、転送量が増える。

さて、転送量とPVとの関係が知りたかったので、色々なサイトで調べてみました。 意外と情報が少なくてアレですが、こんな感じ。

1万PVで10~20GB程度の消費 と考えておけば間違いなさそうです。

つまり、5~10万PVくらいまでは無料で行けそう ですね。

netrify CMSで選べるジェネレータ

netlify CMSのサイトから一気に作る場合には、ジェネレータを選択して一瞬でベースを構築してくれます。 （すでに、管理されているプロジェクトでも適用が可能なようです）

ジェネレータは以下から選択できます。

• Hugo ( go )
• Gatsby ( react )

どちらを選んだらいいんでしょう。 っていうか、この2つ・・・ちょ、ハードル高くないすか。 僕のジャンプ力が低いだけかな（笑）

どちらが簡単にレイアウトを変更できそうか？

おそらく、ブログシステムとしての基本機能は、どっちも最初から揃っているんじゃないでしょうか （想像ですが） じゃあどういう視点で選ぶのかというと、レイアウトやちょっとしたスタイルの調整が、簡単にできるかどうか。

GatsbyはいまをきらめくReact・・・ 使ってみる価値はありそうだけれど、学習コストが高そう・・・ ブログ記事を書くことをメインとするなら、ここはなるべく記事作成に集中したいところですね。

Hugoは言語こそ難しそうな感じですが、レイアウト部分はhtmlとcssでコントロールできるようです。 これならなんとかなりそうです。 ってことは、hugoか。

どちらが無料のテーマが充実しているのか？

ベースとなるテーマが選べるのはいいことです。 できるだけ気に入ったものを選んで、なるべく、手を入れる手間を減らしましょう。

さて、Hugo。 Complete List | Hugo Themes こちらは、めっちゃある。

Gatsbyの方はというと、ググってみたんですが、ぱっと見では、検索結果から見つけることができなかったです。 テーマ集なんかがあると思っていたんですがねぇ・・・。

まとめ

ボタン一つで、ブログシステムを構築してくれるという素敵なサービスです。 編集者と開発者の完全な分離ができるのが、魅力ですね。