【GatsbyJS入門1日目】『WEBサイト高速化のための静的サイトジェネレーター活用入門』を読む

ハギシリ

4年前

仕事でWordPressを使ったサイト制作ばかりやっているんですが、最近の課題はWordPressサイトの高速化。サイト改善を引き受ける場合でもいかに読み込み時間を早くするかというようなことに腐心しています。

また、キャッシュプラグインを使って静的なhtmlとして表示させるようなこともやるわけなので、それならば最近流行り(?)の静的サイトジェネレーターはどうなんだろうなと興味を持ったというわけです。

WordPressテーマ制作者はReactが必須に？

そんな折り、エビスコムさんの記事をtwitterか何かで発見します。

こうなると、WordPressで求められるスキルというものが根本的に変化して、
・カスタムブロックを開発できるレベルのJavaScript（React）のスキル
・GutenbergのブロックでコーディングできるレベルのCSSのスキル
・サードパーティ製も含めた様々なブロックに関する知識
ということになるわけです。
https://ebisu.com/note/try-block-based-theme/

グーテンベルグをリッチエディタとしてしか利用していないというかブロックエディタのなんたるかをよくわかっていなかったので、エビスコムさんの記事をいくつか読んでみたところWordPressもReact(JS)でサイトのコンテンツを組み立てていく流れになっているのだなと今更ながらに知ることができました。

仕事ではブロックエディタの積極的導入、余暇でGatsbyJSの勉強をします

ちょっとこのままではまずいなという感じがしてきたので、仕事で行うWordPressテーマ開発にさっそくブロックエディタを活用したものを導入してみようと思います。

それと並行して、就寝前の30分や土日の子供の昼寝の間などにでも少しずつGatsbyJSのお勉強も進めていこうと思います。
GatsbyJS自体がReactを利用した静的サイトジェネレーターなので、ブロックエディタの勉強とリンクする部分があるだろうということで。

エビスコムさんでもWEBサイト高速化のための静的サイトジェネレーター活用入門を執筆するにあたって、きっかけになったのはWordPressのグーテンベルグだったと書かれていました。この本のターゲットとして本当にちょうど良いところに自分がいるなぁと思いますw

ひとまず環境構築 npmでyarnをインストール

もともと自分が使っているMacにはNode.jsとGitはインストール済だったので、yarnだけ追加でインストール。
なんとなくnpmから入れました。

Github、Netlify、contentfulのアカウントを連携

もともとGithubとNetlifyは以前NetlifyCMSでGatsbyJSサイトを公開しようっていうブログ記事を見て試してみたことがあるのでアカウントが存在しました。

WEBサイト高速化のための静的サイトジェネレーター活用入門では管理画面(ヘッドレスCMS)にNelifyCMSではなくcontentfulを利用するということなので、contentfulのアカウントだけ追加で発行。Githubのアカウントと認証紐付けたりして完了。

今日はこんなところです。続く。