サイト構築を手入力でやるのに限界感じて、最近の自動でやってくれるものを試してみる。使うのはGatsbyでreactベースの静的サイトジェネレーターというものらしい。今までは、node.jsでejsとbootstrapを使っていたがだんだん使用しているライブラリが更新されなくなってきたのでいっそ一から作り直そうかなと思う。サイトの読み込みを早くするために画像の遅延読み込みや、jsonで表示の切り替えなどをしていたが段々作業量が増えてきていた。
npmからgatsbyをインストールまではよかった
PowerShellで実行すると下のようなエラーが出たのでコマンドプロンプトに変えた。
「gatsby : このシステムではスクリプトの実行が無効になっているため、」
念のためにバージョン確認
gatsby --version
ローカルホストへのリンクがおかしかった、localhostの後にコロンがなかった。
Contentfulの連携
Contentfulの使い方が変わっていた、スペースを作るとあったが初めからスペースが作られていて無料プランが選ばれている。
なので設定通りやろうとすると、スペース名の変更が必要になる。
gatsby developでエラー、次のようなエラーが出た
ERROR #gatsby-source-contentful_111005 UNKNOWN
API instead.
gatsby-plugin-image is missing from your gatsby-config file.n deprecated and is no longer supported or maintained
Please add "gatsby-plugin-image" to your plugins array.stall joi'
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
not finished onPreInit - 0.023s
19記事詳細ページ
error 'Link' is not defined react/jsx-no-undef
Chapter 21 404ページ
You can now view gatsby-starter-hello-world in the browser.
⠀
http://localhost:9000/
ERROR UNKNOWN
Error: ENOENT: no such file or directory, stat
gatsby buildに失敗しているようで
ERROR #11331 API.NODE.VALIDATION
Invalid plugin options for "gatsby-source-contentful":
- "accessToken" is required
- "spaceId" is required
.env.developmentで環境変数を設定したが、build時は.env.productionの環境変数が必要なため。
gatsby-transformer-remarkのプラグインでオプションにommonmark、pedanticはないというエラーが出た。