web

脱WP。netlifyCMSなら静的サイトの記事作成を管理画面からできちゃいました!

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

もしこれからブログやサイトの作成を考えている方は、ぜひこちらも候補に入れて検討してみてください。

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

この2つを解決するのが、netlify CMSです。

  1. WPの代わりになるのか
  2. netlifyCMSの制限事項
  3. netrify CMSで選べるジェネレータ
  4. まとめ:netlifyを使ったワークフローは美しい!

Wordpressを扱うのと同じような感覚で、

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

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

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

WPの代わりになるのか

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

WPで行っていた、レイアウトや機能面でのカスタマイズを行うには、コードに対する知識が必要になってしまいます。

これは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。
こちらは、めっちゃある。

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

まとめ:netlifyを使ったワークフローは美しい!

ボタン一つでgithubのリポジトリを作成してブログシステムを構築してくれるという素敵なサービスです。
編集者と開発者の両分を分ける、という考え方もとても素晴らしいと思っています。

基本的に、記事の編集はCMSのみで行います。
記事を書くことに集中できますよね。

レイアウトなどシステムの開発は、githubのリポジトリで行うことになります。
Webデベロッパーの方であれば、問題なくカスタマイズもできるはずです。
機能を追加して、Masterにmergeしてpushしたら、netlifyが検知してジェネレート、そしてデプロイまでをやってくれます。

なんかもう、うっとりします。

CMSとしてしっかり使える印象です。
Nuxtで作る前だったら、こっちを使ってたかもしれない・・・それくらい使いやすいです。

ブログを増やしたくなってしまいました(笑)

next...
#netlify,#hosting,#cms

爆速な静的サイト・ホスティングサービス選び Github Pages vs netlify vs Firebase

ブログサービスの選び方。静的サイトという選択肢はいかがでしょう?

静的サイト公開に最適すぎるGithub Pages!privateだとより便利に使えますよ!

設定が超簡単なnetlify!オートデプロイ機能はとにかく便利過ぎだ😄