MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. プログラミング
  3. GatsbyJSサイトをv3へアップデート

GatsbyJSサイトをv3へアップデート

2022 3/26
プログラミング
2021-08-23 2022-03-26

Gatsbyで作っているサイトをv3にアップデートしました。

目次
スポンサーリンク

v2からv3で何が変わったのか

Introducing Gatsby 3.0 – Faster in Every Way that Matters

まず、Incremental Build(差分ビルド)ができるようになり、ビルド時間が短縮された。

記事を追加/更新した際に、数分程度かかっていたのが10秒以下に短くなったとのこと♪

画像系プラグインGatsby Imageが刷新されて、画像が扱いやすく、表示パフォーマンスも高くなった。

もともとGatsbyは画像の取得/表示の扱いが難しかったので、使いやすくなったのは嬉しい。

Gatsbyの更新

Gatsbyのマニュアルに従って更新していきました。

  • Migrating from v2 to v3

package.jsonのgatsbyのバージョンを編集します。

# package.json
{
  "dependencies": {
    "gatsby": "^3.0.0"
  }
}

npm 7を使っているので、--legacy-peer-depsオプションをつけて、最新版をインストール

#Gatsby最新版インストール
npm install gatsby@latest --legacy-peer-deps

#各パッケージの最新verを確認
npm outdated

各パッケージのアップデート

npm-check-updatesを使って、npmの取得モジュールのアップデートをチェック→package.jsonの最新化→パッケージの更新をします。

# npm-check-updatesをインストール。これでncuが使えるようになる
npm install -g npm-check-updates

# 更新対象パッケージの表示
ncu

# packege.jsonを書き換える
ncu -u

# パッケージの更新
npm update --legacy-peer-deps

エラーの対応

バージョンアップ後、ビルドをするとエラーの通知が出て、対応が必要な箇所がでてきました。

gatsby-plugin-sitemap

"gatsby-plugin-sitemap" threw an error while running the onPostBuild lifecycle:

Body must be a string. Received: undefined.

gatsby-plugin-sitemap | Gatsby

gatsby-plugin-sitemapはオプションの記載方法がexclude→excludesになったもよう。

#gatsby-config.js 変更後
 {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        excludes: [`/category/**`,`/tags/**`,`/blog/**`],
      },
},

excludeをexcludesに変更するだけでうまくいきました!

gatsby-transformer-sharp

warn [gatsby-transformer-sharp] The "fixed" and "fluid" resolvers are now
deprecated. Switch to "gatsby-plugin-image" for better performance and a simpler
 API. See https://gatsby.dev/migrate-images to learn how.

画像はgatsby-imageからgatsby-plugin-image にスイッチするよう推奨されています。

  • Migrating from gatsby-image to gatsby-plugin-image | Gatsby

①gatsby-plugin-imageをインストール

npm install gatsby-plugin-image

②gatsby-config.jsに追記

#gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

③コマンドで自動で置き換えしてくれます。

npx gatsby-codemods gatsby-plugin-image

これで、無事に動くようになりましたー。

プログラミング
Gatsby.js
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • 【Mac】Node開発環境のアップデート
  • WordPressがメンテナンス中のまま終わらないときの解決策

関連記事

  • 【Mac】Node開発環境のアップデート
    2021-08-06
  • 【Mac】SourcetreeからGitHubへSSH接続する
    2021-08-05
  • Flexboxで作るヘッダーのサンプル集
    2020-07-30
  • CSSとJavaScriptで作るハンバーガーメニュー
    2020-07-25
  • Netlify経由で、Gatsby.jsブログを独自ドメインに公開する手順
    2020-07-10
  • Gatsby.jsでブログを作るための手順
    2020-07-04
  • ラジオボタン・チェックボタンの代わりに画像選択にする方法
    2020-06-13
  • 【Python】Livedoorブログのバックアップデータ(backup.txt)をWordPress用に置き換えるプログラム
    2020-05-30
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる