-
Notifications
You must be signed in to change notification settings - Fork 12
Home
『Webサイト高速化のための 静的サイトジェネレーター活用入門』のサポートwiki です。
変更等があれば追加していきます。
［2021年12月3日］
gatsby-v4.pdf （P.12） の誤植を修正しました。
- ［誤］書籍 P.118
- ［正］書籍 P.188
［2021年11月14日］
サポートPDF、microCMS対応ガイド、各プロジェクトフォルダをGatsby v4対応版に置き換えました。
- PDF：gatsby-v4.pdf
- プロジェクトフォルダ：mysite-part2-gatsby-v4/
- 「v3からv4に更新する場合」「v2からv4に更新する場合」を追加。
- P.18：GatsbyImageに影響するCSSの設定を削除。
- PDF：microCMS-gatsby-v4.pdf
- プロジェクトフォルダ：mysite-microcms-gatsby-v4/
- サポートPDF（gatsby-v4.pdf）でGatsby v4に対応させたプロジェクトをもとに、microCMSへ対応。
- 新APIキー（X-MICROCMSAPI-KEY）を使用。
- リッチエディタの「画像のレスポンスにwidthとheightを含む」をオンにして、画像の横幅と高さを取得。
- @imgix/gatsby を使用して画像を表示。
- Appendixを更新。
- api-blogpost.json：「画像のレスポンスにwidthとheightを含む」をオンに設定。
- input-blog.csv：記事「スパイスの香りと刺激」のスラッグをContentfulのデータに合わせて「spice」に変更。
［2021年3月6日］
サポートPDFとプロジェクトフォルダを次のように更新しました。
-
更新前 －「gatsby-source-contentful v4 & new Gatsby image plugin 対応ガイド」
- PDF：contentful-v4-and-new-gatsby-image.pdf
- プロジェクトフォルダ：mysite-part2-contentful-v4-and-new-gatsby-image/
-
更新後 －「Gatsby v3 / gatsby-source-contentful v5 / new Gatsby image plugin 対応ガイド」
- PDF：gatsby-v3.pdf
- プロジェクトフォルダ：mysite-part2-gatsby-v3/
［2021年2月12日］
「gatsby-source-contentful v4」と「new Gatsby image plugin」に対応する方法をまとめたPDFと、対応させたプロジェクトデータを追加しました。
［2020年12月9日追加］
gatsby v2.28からgatsby new のコマンドがインタラクティブなものへと更新され、スターターの選択ができなくなりました。
プロジェクトの作成にはP.35のコマンド
gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world
を使用してください。詳しくは下記の記事を参考にしてください。
gatsby newの更新
https://ebisu.com/note/gatsby-new/
［2020年9月1日追加］
プラグイン（gatsby-source-microcms）のアップデートに伴い、「microCMS対応ガイド」をver.1.1に更新しました。
詳しくは下記の記事を参考にしてください。
プラグインのアップデートに伴う「microCMS対応ガイド」の更新
https://ebisu.com/note/microcms-guide-update/
［2020年7月27日追加］
GatsbyJSでのクエリデータの扱いについて記事を書きましたので、参考にしてください。
GatsbyJSでのクエリデータの扱い（静的生成後の記事一覧のランダム表示）
https://ebisu.com/note/gatsbyjs-querydata/
ランダム表示の「おすすめ記事」を追加したプロジェクト： https://github.com/ebisucom/essentials/commit/954c3cb8a0091d4db388c17937c76f543bea8bd2
［2020年6月3日追加］
Lighthouse 6 にはGoogle の「Web Vitals」という新しい指標が導入されており、パフォーマンススコアに影響します。
詳しくは下記にまとめましたので、参考にしてください。
GatsbyJSのパフォーマンスを Lighthouse 6（Web Vitals）に合わせて最適化する
https://ebisu.com/note/lighthouse-6-performance/
修正済みのプロジェクト： https://github.com/ebisucom/essentials/commit/e70d58df3e362237f1b8202d3a4e1aba4d7bf3f7
［2020年6月1日追加］
Lighthouse 6 では、PWAの要件として「Maskable icon（マスカブルアイコン）」が求められるようになっています。
詳しくは下記にまとめましたので、参考にしてください。
Lighthouse 6 で追加されたPWAの要件にGatsbyJSで対応する
https://ebisu.com/note/lighthouse-6-pwa/
修正済みのプロジェクト： https://github.com/ebisucom/essentials/commit/bc0bae1c0c2554453c10c30d97ed2b8d67635d19
［2020年5月25日追加］
スターター「gatsby-starter-hello-world」のindex.jsのコードを始め、公式のドキュメントの修正が行われています。
本書では変更前のコードに沿って解説しています。
変更前：
import React from "react"
export default () => <div>Hello world!</div>
変更後：
import React from "react"
export default function Home() {
return <div>Hello world!</div>
}
これは、以下の対応によるものです。
https://github.com/gatsbyjs/gatsby/issues/23575
そのため、本書のコードもfunctionの形にするか、
const Component = () => {}
export default Component
の形に修正していただくことをおすすめします。 お手数をおかけして申し訳ありません。
修正済のプロジェクト： https://github.com/ebisucom/essentials/commit/01314624ded989ab40776b7c828bbc63670a0f2c