Gatsby.jsを始める際、勉強することが多く、始めるハードルが高く感じてしまいます。
Gatsbyでサイトを作成する場合、NetlifyCMS、Netlify、Gatsby.js、Github…等、一度に勉強することが非常に多いのはすごく大変です。
そのせいで、面倒くさがってブログを移行しようと考えてから随分と時間を使ってしまいました。
同じような境遇の人の参考になれば幸いです。
一つ言えることは、始める前に調べることも大切ですが、調べるよりもまずは触ってみることが大切だと思います。
実際に触ってみるとわかることも多いです。
Gatsby.jsやNetlify、NetlifyCMS全体の流れ
NetlifyCMSはWordPressの記事投稿画面のようなものです。
ここから記事を投稿すると.mdマークダウンファイルを生成します。
GraphQLを通してこの中のデータを取得し、Gatsby.jsでビルドすることでHTMLファイル等を生成します。
Githubはソースコードの管理を行うサービスです。
NetlifyCMSでマークダウンファイルを更新すると、Github内にあるファイルが更新されます。
Netlifyが、プロジェクト内のファイルの更新を検知するたびにビルドを行いHTMLやJavascriptファイルを生成
これによりNetlifyサーバーでサイトが公開されます。
Gatsby.jsで画像パスが間違っていた時のエラー
Gatsby.jsは画像ファイルのパスが間違っているとGraphQL関連の大量のエラーが出ます。
非常に分かりにくくて困りました。
yarn buildしたときのエラー
yarn build
yarn run v1.19.2
$ yarn run clean && gatsby build
$ rimraf .cache public
success open and validate gatsby-configs - 2.289s
success load plugins - 8.105s
success onPreInit - 0.041s
success delete html and css files from previous builds - 0.016s
success initialize cache - 0.017s
success copy gatsby files - 0.357s
success onPreBootstrap - 0.028s
success createSchemaCustomization - 0.374s
success source and transform nodes - 1.017s
success building schema - 1.024s
success createPages - 0.268s
success createPagesStatefully - 0.142s
success onPreExtractQueries - 0.009s
success update schema - 0.095s
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: src\templates\category-template.js:68:22
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: src\templates\index-template.js:68:22
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: src\templates\post-template.js:48:18
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: src\templates\tag-template.js:74:22
failed extract queries from components - 2.210s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.エラー画面
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: C:/Users/todac/gatsby/blog-kirima-maaya/src/templates/category-template.js
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: C:/Users/todac/gatsby/blog-kirima-maaya/src/templates/index-template.js
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: C:/Users/todac/gatsby/blog-kirima-maaya/src/templates/post-template.js
There was an error in your GraphQL query:
Field "thumbnail" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "thumbnail". If you didn't expect "thumbnail" to be of type "String" make sure that your input source and/or plugin is correct.
File: C:/Users/0000/gatsby/blog-kirima-maaya/src/templates/tag-template.jsgatsby.jsをローカルにクローンしたすぐ後のエラー
gatsby build したときのエラー
ERROR
There was a problem loading the local build command. Gatsby may not be installed in your site’s “node_modules” directory. Perhaps you need to run “npm install”? You might need to delete your “package-lock.json” as well.
書いてある通り、
npm installします。
yarn buildでエラーが出たときは、
npm install -g yarnします。
