静的サイトジェネレーターについてざっくりした情報

久しぶりに土日で勉強したことのまとめを共有します。

読んでも意味が分からなくても全然大丈夫ですが
読後に覚えておいて欲しいキーワード

• 「静的サイトジェネレーター」
• 「JAM Stack」
• 「Gatsby」
• 「Netlify」
• 「ヘッドレスCMS」

以前、技術が高くて有名な会社が書いた、
https://ics.media/entry/190410/
この記事を呼んでWordPress以外の選択肢を
意識していました。

勉強する候補として以下の候補がありましたが
https://jamstack.org/generators/
の人気と教材の多さからGatsbyを使ってみることにしました。

• Gatsby
• Next
• Nuxt
• Jekyll

教材は値段の関係上JAMStackを学ぼう Gatsby, React bootstrap, Netlifyでつくる企業サイト第２版とJAMStackを学ぼう GatsbyとヘッドレスCMSでつくるコーポレートサイト ～WordPressはもう古い～にしました。エビスコムのWebサイト高速化のための　静的サイトジェネレーター活用入門もよさそうです。

◇所感

Gatsbyで普通のコーポレートサイトを作るのでさえもJavaScriptやReactやGraphQLを
ゴリゴリ書かなければならず技術的な敷居はかなり高い。
日本語対応しているヘッドレスCMSは「microCMS」だけなので
選択肢は多くない。
しかし要件にハマれば学習するメリットはかなり大きい。
要件次第でWordPressと静的サイトジェネレーターを
取捨選択するというのが今後のWeb制作の正解ではないかなと思う。そうした時に求められるスキルレベルが上がってくるのですごく大変そう。精進しないといけない。

◇成果物

JavaScriptやReactやGraphQLで書いたソースコードを
Githubにpushすると連携しているNetlifyが取り込んでくれる。そしてヘッドレスCMSの「microCMS」に投稿したデータも取り込んでくれてHTMLにビルドしてくれる。それを高性能なサーバーで無料で配信してくれる。「インフォメーション」のところが「microCMS」で管理している記事になります。

ソースコードと作った成果物の架空のコーポレートサイト

◇JAM stackとは

Jamstackって何なの？何がいいの？

◇Gatsbyとは

静的サイトジェネレーター Gatsby
の前半部分を読めばなんとなく分かります。

◇Netlifyとは

NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法
の前半部分を読めばNetlifyとは何か分かります。

他にもユーザー登録せずに使えるサーバーも提供してくれています業務で使えると思います。Netlify Drop

◇ヘッドレスCMSとは

CMSの新しい潮流 - ヘッドレスCMS
の図を見るとイメージ湧きます。

代表的なサービス

• contentful
• microCMS

まだイメージ湧かない場合は
Headless CMS 軽く触って比較してみた(Contentful / microCMS / strapi / GraphCMS)
を読めばスクリーンショットが豊富なため代表的なContentfulやmicroCMSのUIを確認できます。