GatsbyJSの画像プラグイン導入でいい感じに詰む ('A`)→打開(ﾟ∀ﾟ)
静的サイトジェネレータでサイト作成、さっそく詰む！なないようです。
Gatsbyjsでサイトをつくってみようということで、数日前から作成しています。
静的サイトジェネレータは、新しいホームページの形、こんな感じです。
こまけえことは、wiki、公式でおしらべください。
そんなGatsbyですが、画像プラグインのインストールから、
様子がおかしいという話からです。
前回１から環境を整えて、作り直したときと同じく、
gatsby developからサイトがでてこない。
この症状またでた。ﾏｰﾀｼﾞｬﾈｰｶ('A`)
今回も、画像プラグインでおかしくなりました。
どうもおかしいです。
gatsby-config.js、gatsby-transformer-sharpこの辺で、
もう一回さいしょからやりなおします。
これ手を出しちゃいけない世界だったのかもしれない。
プッシュ、リポジトリ、git!。
スターターを違うタイプに変更。
中の記述は、参考書のままじゃなく、素のままで一度ためそう。
スターターの段階でよさげなのをチョイスしてみた結果、
https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-hello-world
画像プラグインも無事インストール完了しました。直りました。♪(´ε｀ )
configのファイル内容をシンプルなのに変更。
cssのファイル名のリネームでサイトの表示が戻りました。
凡ミス。chromebookは字が小さい。
これですっきり画像最適化の章へむかうことができます。
画像バンバン付けてLighthouseで満点とるために。
そんな希望と夢をよそに画像の最適化には地獄が待っていたんだ。
そう。GraphiQLというモノホンのじごくが。
参考書どおりにして、変換した右側に、なぜかextentionが表示される。
ほんとは表示されないのです。また謎が１つ増えました。
フラグメントのところ打開できました。そのまま書いてればよかった。
gatsbyでサイト作ると、webpに対応してないブラウザならjpg表示させるとかできるようです。ブログにこういう機能があったらいいな！なんてのが解決されてる。
画像最適化について
サイトの画像表示ですりガラス風からきれいな表示は、ブラーアップというらしい。
すこしモザイクのようになってからパッと表示されるあれです。
べつではtracedsvgといって、画像の中は表示され、色は抜けてるような効果もあるようです。
静的サイトジェネレータおもしろい。こういう用語を調べられるまで、
知るまでの時間が検索では長くなってて、本買ってよかった。
本で体系的に学ぶのはいい。
順番があるのは、とてもいいです。(´・ω:;.:...
- 関連記事
-
-
グーグル検索アップデートにかんするメモ
2022/08/20
-
gatsbyでサイト構築の練習contentfulの設定で詰む
2021/04/15
-
顎関節が外れたときに役に立ったサイトをすぐ知りたい人ここがいい←
2022/12/27
-
FC2ブログの記事内ワードが勝手にリンクになってる事件
2019/10/18
-